——我的生活將再不會像從前那樣……
所以,Axure……
這真的僅僅只是一個做原型的工具嗎?
UI設計師可以完全放棄其他工具,僅僅靠Axure完成所有工作嗎?
這個程序有什么優缺點呢?
下面我將試著回答這些問題。最近我開始放棄Adobe 轉向Axure,然后發現了它除了原型制作以外的潛能,也許我的生活將有大不同。如果有時候你不得不打開PS查看位圖細節,你就會知道它到底有多慢。
近年來PS功能越來越豐富,當我使用了另一個看起來明顯簡單了許多但仍然功能完備的軟件后再來看PS,覺得這個特點愈加明顯。Axure沒有太多多余的東西,在界面開發時我能更快地在很多典型場景中進行模擬。
我相信那些熱愛自己工作的人會知道學習新事物的重要性。新的工具簡化了常規工作,同時我也會考慮競爭力因素。如果現在我不把一些重要的條目寫在簡歷上,我可能就找不到工作。
雖然那些在幾年前可能從沒人聽說過。然后其他人就可能因為他會使用更適合界面設計的工具而獲得這份工作。這意味著我們要跟上技術和工具的進化步伐。我是一個保守派,在半年前,從PS/AI轉向Axure對我來說是個極大的改變。但之后每次要打開軟件時我的手就會自己點擊正確的圖標……
實驗性任務:PSD>Axure
為了消除你的疑慮,我打算將完成項目的一個布局轉為可交互的。雖然我通過故事版展示了98%的項目ps制作按鈕按下效果,并且大體上我的想法和場景都被理解且贊同了。但這僅僅是計劃的一部分。第二件事是結合“編輯瀏覽器( )”查看和比較顯示的元素的質量。Axure有一點就是可以模擬服務器工作(如我所想),并且能夠立刻告訴你剛畫的元素的HTML/CSS設置。你在左邊窗口畫了一個矩形,然后在右邊你可以看到一個瀏覽器。點擊預覽你可以看到你畫的元素在任何瀏覽器上看到的效果。超級棒!還可以看代碼、樣式、縮進等等。
更好的協作
以前設計師通常給客戶展示什么?圖片!這是第一點!在編輯器中畫了這個布局,平滑字體,制作陰影和其他很棒的效果。設計師并不關心開發人員如何實現這些。在規范中,如果設計師不說明這個陰影的方向、模糊、透明度,那么開發人員會依照他們看到的效果進行開發。后果可想而知…
相同字號和密度的體的不同效果(上面是PS中的效果,下面是Axure中在瀏覽器中的效果)
總結Axure的整體視覺印象:有一些東西來自PS(+熱鍵組合是一樣的,這很酷)和的經典。這是一個帶有矢量圖繪制元素的編輯器。
現在我們可以從理論進入實踐了。在這里我用這個*.psd布局開始(名字因調查興趣改變):
動態的和
必須確保布局在高分辨率下看起來更有效。設計師經常使用“在額外的背景上做布局并使用陰影”的方法。這是多么蒙蔽人的做法的!現在沒有必要這樣做了。
我們需要的是:在頁面加載時,我們需要在屏幕的整個寬度上拉伸多個圖層。看看它是多么容易。只需在編程部分的相應區域點擊不同的詞。哇!這真的很好奇,一種家庭主婦也可以進行的視覺編程。
1、 單擊屏幕的工作區域,樣式選項卡中的頁面對齊ps制作按鈕按下效果,選擇中心對齊,以便交互性顯示在瀏覽器的中心。
2、看看屬性中的腳本 – 這個會在頁面加載的時候運行
3、在左邊的設置中選擇Size – 想要設置大小的時候
4、然后點擊我們“拉取”的元素 – 和
5、 現在點擊fx標志 – 進階章
6、選擇.Width – 這會從“編碼的信息”中抓取瀏覽器寬度并且賦值給圖層寬度
7、 在下拉列表中記得選擇(居中) – ( where to pull from ) 拉取的起點
移動按鈕
有必要從PSD拷貝字體設置,按鈕的高度等。幸運的是,我能夠記得幾乎所有設置。
我們需要:之后通過CSS設置,所以有必要設置它們的高度和縮進。在給定元素中對齊X軸和Y軸。角也應該是圓的。所有這些都是必要的,所以當你懸停時,鏈接按鈕下的背景能夠被繪制。還需要設置縮進,考慮到菜單中每個部分左側的圖標。真的,還有很多事情要做。應該這樣:
1、把按鈕元素拖到工作區– 能對按鈕進行設置
2、在樣式標簽中我設置了高度– 我偏好5或10的倍數的設置
3、L、R、T、B四個方向的內部縮進– 給定10px的網格和24px的icon大小我給左邊設置了44的縮進
4、接下來,設置和布局配套的顏色并且把按鈕放到上
第一個交互
好處是顯而易見的 - 靜態圖像不能顯示動效。而對于Axure中的布局,你可以將鼠標懸停在一個元素,獲得交互體驗和直觀印象。
要做到這一點,你需要:選擇當光標懸停在元素上的狀態的樣式編輯模式,在那刻設置一個新的顏色。目前只有顏色,但其他一切效果也是可能的,但不應該現在做。
1、選擇所有按鈕應用
2、轉到屬性選項卡– 這里有交互的所有樣式
3、選擇 - 我們需要的事件
4、在新窗口中,我選中“填充顏色”旁邊的復選框 - 設置新顏色
按F6我們可以從Axure轉到瀏覽器看看效果:
元素分組
在每張卡內,我按照規則拉伸元素。然后我對齊縮進。在Axure使用網格工作特別好。使用Ctrl-Alt +光標左鍵快速克隆元素,就像在PS中一樣。Axure開發商顯然很了解他們的消費者以及他們從哪來。他們是對的。
我們還不需要轉到主窗口。
通過右鍵單擊元素,將組快速傳到主窗口。這對于多頁原型非常方便。在這種情況下,使用它沒什么意義,但總體來說它很方便:你在一個地方編輯,在其他所有屏幕上同步改變。如果在未來的版本中,不再將整個“”組作為例外,而僅僅是所需的元素(例如Label)將是不錯的。否則,更改主卡的文本標題,其他所有頁面中的文本也會調整。
按F6測試按鈕在每個資費計劃中如何反應:
使用動態面板
簡單來說,它是一個用來應用不同的動作的特殊元素分組。可以在時創建粘性菜單或者制作原始輪播。面板有幾個活動的狀態,在狀態內有各自的一組元素。因此,我們有一種動態畫板。
我們需要做的:將屏幕從類似的按鈕中解放出來,默認隱藏按鈕。當鼠標懸停在資費計劃上時顯示對應的按鈕:
1、首先,我將每個組轉換為動態面板 – 在元素列表中的上下文菜單中選擇轉換為動態面板
2、右鍵單擊面板中的
3、單擊上下文菜單中的相應選項卡一個復制
4、開始編輯頂部- 刪除按鈕,并降低卡的高度
5、在相同的屬性選項卡中,設置鼠標懸停事件(…順便說一句,懸停在動態面板中不起作用)
6、在新窗口中單擊左側列 -選擇設置面板狀態操作
7、選擇要切換到的卡片和面板狀態
原圖:
交互效果:
如果你想要在鼠標懸停時有更柔和的按鈕樣式,選擇褪色效果動畫列表并設置持續時間(毫秒)。
現在我要做些總結
我花了不到4小時將布局轉化為可交互的。最終,PSD轉變為了機器碼。跨瀏覽器有效,且不受機器限制。我仍然在研究以這樣的方式代替原先得PSD呈現結果是否是可接受的。沒人想做兩份工作,再把Axure轉為PSD,“去做吧”。
Axure真的僅僅只是一個原型工具嗎?
事實證明它能做到更多。除了UI設計,你能夠設計微交互。它有你需要的一切。什么元素消失在哪里,哪個元素在哪里重新出現。不,你不能制作像設計師在Adobe After 中制作的那些超酷的動畫,但你會得到一個相當可行的結果:CSS-淡入淡出、反彈、滑動翻轉效果和其他組合給出足夠溫而準確的微交互。你可以在瀏覽器中看到所有這些,你可以得到使用所需的坐標和持續時間的效果的代碼。
UI設計師可以完全轉換到Axure工作,放棄其他工具嗎?
實際上是可以的!雖然Axure似乎更專注于開發桌面產品而不是移動產品。到目前為止,任何移動原型需要通過瀏覽器顯示。在此模式下,有些動畫不可用。我想要一些手機軟件解決方案:例如,將客戶端設置在手機上,通過按F6預覽我可以選擇在哪里顯示結果。智能手機會立即從桌面上獲得Axure制作的原型,并在預覽模式下播放。否則,你必須切割寬度為320及以上的素材,然后手動調整他們的大小供移動開發人員。但是誰知道呢,也許建立一個完整的高保真原型更有價值,那樣我們可以更快地進行測試,并發現未來產品的所有問題。為此,即使通過移動端瀏覽器預覽也是相當不錯的。
這個程序的優點和缺點是什么?
一切都是相對的。優勢只能由試過所有視覺設計開發工具的人來辨別。
我注意到以下弱點:
? 缺少合適的SVG支持(可以插入圖標,它可以動態調整大小,但不能更改顏色或移動曲線)
? 沒有一致的規格、尺寸和縮進生成器。
? 導出到PNG會導致所有文本轉換為圖形
? 沒有足夠的蒙版,很難導入照片然后調整其大小或裁剪他們。
? 生成的機器代碼可能逗笑開發人員,甚至可能會導致他們從椅子上笑得掉下來受傷。
但是,我喜歡Axure!桌面界面設計開發的任務是我的主要工作,它就這樣發生了并且完全符合我。特別是現在,當每個人都渴望在一個選定的方向有所建樹。