去年一直想寫的Axure小技巧分享斯够，終于動(dòng)手寫了囚玫。還有最近打算發(fā)布文章清單中的積壓文章喧锦，加油咯读规，文筆爛，望噴燃少。
@文章內(nèi)容
- 啥是高保真原型束亏？簡單說明原型
- Axure可以畫出什么水準(zhǔn)的高保真？給示例阵具，開啟裝逼模式
- 特殊的技巧：
- 核心內(nèi)功：目標(biāo)清晰/理解設(shè)計(jì)規(guī)范
- 畫圖習(xí)慣：像素對齊/用淺色/上素材
- 啥時(shí)候上高保真碍遍？：適用場景 and 不適用場景
啥是高保真原型 定铜？
謝自邀。
啥是原型怕敬，從事互聯(lián)網(wǎng)研發(fā)體系的同學(xué)揣炕，肯定非常熟悉，特別是產(chǎn)品崗?fù)瑢W(xué)东跪。如果不是畸陡，那如下簡單講原型和高保真原型的：
原型：草圖。從產(chǎn)品流程來看虽填，將想法形成草圖原型丁恭，原型再有設(shè)計(jì)師形成效果圖，程序猿們根據(jù)需求和效果圖開發(fā)斋日，出來的軟件樣子就是和效果圖差不多牲览。原型在過程中就是產(chǎn)品最終形態(tài)的骨架。
低/中/高保真：根據(jù)圖的粗糙程度劃分恶守，以最終效果圖為參照第献。保真程度越高，離最終效果圖越接近熬的。
Axure：工具只是實(shí)現(xiàn)想法的工具痊硕。在眾多的原型軟件中，最廣泛使用的就是Axure了押框。
Axure可以畫出啥水準(zhǔn)的高保真岔绸？
在這里一圖勝過千言，以下分享自己畫過低/中/高保真原型截圖橡伞。
@低保真：最輕松和省時(shí)間的原型盒揉，粗獷的風(fēng)格讓我們只重視結(jié)構(gòu)和流程，原型不在乎太多設(shè)計(jì)細(xì)節(jié)兑徘。
- 示例1：一個(gè)App官網(wǎng)下載頁的低保真原型刚盈，我們甚至可以成為結(jié)果圖，突出了這個(gè)需要哪一些元素挂脑。
- 示例2：wap版本下載頁藕漱，同樣低保真，突出結(jié)構(gòu)和元素崭闲。
@中保真：這類原型最常見肋联，低保真不容易描述產(chǎn)品最終樣子，高保真容易干擾設(shè)計(jì)師刁俭，中保真匯集了各類有點(diǎn)橄仍，也是比較常用的。
- 示例3：本示例圖為微信酒店訂房下的系列頁面，中保真對比低保真侮繁，更能體現(xiàn)了交互細(xì)節(jié)和產(chǎn)品流程虑粥。
- 示例4：這是一個(gè)”邀請好友注冊獲取獎(jiǎng)勵(lì)“的流程，采用中保真并強(qiáng)調(diào)了多個(gè)頁面的交互流程宪哩。
@高保真：對比中低保真娩贷，高保真可以稱之為效果圖了，如果加深細(xì)節(jié)可以直接對著開發(fā)咯锁孟，換句話說育勺，高保真更強(qiáng)調(diào)細(xì)節(jié)。
- 示例5：在校期間做的校園助手小項(xiàng)目罗岖，和同學(xué)的第一個(gè)1000+用戶的項(xiàng)目涧至，簡直無以言必的自豪感。由于組內(nèi)無設(shè)計(jì)同學(xué)桑包，于是要求用Axur直接先畫出類似最終效果的高保真南蓬，最后再開發(fā)。圖中除了素材哑了，其他都是使用Axure直接繪制出來赘方。
- 示例6：在校期間某日看到了多年未更新的老版36Kr，根據(jù)自己興趣畫了新版效果圖弱左，也是可以直接通過Axure繪制出來窄陡。
- 示例7：眾包某App中“我的”頁面。
高保真的特殊技巧
特殊的技巧：
- 核心內(nèi)功：目標(biāo)清晰/理解設(shè)計(jì)規(guī)范
- 畫圖習(xí)慣：像素對齊/用淺色/上素材
@核心：
目標(biāo)清晰：不管采用低中高的原型拆火，核心目標(biāo)是交互稿就是想法的表達(dá)跳夭，產(chǎn)品流程的表達(dá)∶蔷担可以采用“目標(biāo)币叹、堆疊、排序”方式來表達(dá)模狭。目標(biāo)指的是頁面目的颈抚，流程目的，都是為了實(shí)現(xiàn)某些需求嚼鹉。堆疊指的是為了滿足目的贩汉，一個(gè)新聞詳情頁需要哪些元素？一個(gè)登錄頁需哪些元素锚赤？建議先用思維導(dǎo)圖或者手繪出基本包含的元素匹舞，先把包含的元素列出來，不在乎樣式宴树，正如HTML編碼里面的”內(nèi)容/樣式/結(jié)構(gòu)“策菜，堆疊考慮的是內(nèi)容和結(jié)構(gòu)晶疼。等列出這個(gè)頁面的所有元素酒贬，那就可以開始排列了又憨，這就涉及涉及規(guī)范和畫圖習(xí)慣了。
了解設(shè)計(jì)規(guī)范：了解不同類型產(chǎn)品的設(shè)計(jì)規(guī)范是很有必要的锭吨。比如IOS蠢莺、Android、Web設(shè)計(jì)規(guī)范零如，或者某個(gè)產(chǎn)品常用頁面設(shè)計(jì)方法躏将。沒人會(huì)把登錄按鈕放在賬戶密碼框的上面，了解設(shè)計(jì)規(guī)范的目標(biāo)是調(diào)整好頁面結(jié)構(gòu)考蕾，將頁面元素合理的擺放祸憋。推薦《UI設(shè)計(jì)模式》和《Web信息架構(gòu)》這兩本書，總結(jié)了移動(dòng)端和Web端常用的頁面設(shè)計(jì)知識(shí)肖卧。
@習(xí)慣：
繪圖習(xí)慣直接影響到了畫出來的效果蚯窥，如果想輕松畫出顏值較高的原型，那么可以遵守以下細(xì)節(jié)塞帐。
控制組件到素級(jí)級(jí)別：低保真原型比較粗糙是因?yàn)椴辉诤跫?xì)節(jié)拦赠，啥事細(xì)節(jié)，就是一個(gè)頁面內(nèi)元素的寬高圓角等葵姥。所以畫高保真原型時(shí)候荷鼠，最常用習(xí)慣就是計(jì)算和定義組件的寬高等屬性。 比如App基礎(chǔ)背景頁面我們可以定義為320x480(Iphone4s的對半比例)榔幸、360x640(720P屏幕的對半)等其他比例允乐，然后在此基礎(chǔ)上，定義狀態(tài)欄高度20PX像素削咆，xxx欄高度44Px喳篇，幾乎就是按照設(shè)計(jì)規(guī)范給的來畫組件了，自定義組件一般取10px的倍數(shù)态辛，如狀態(tài)欄這類組件盡量復(fù)用麸澜。
善用對齊功能：對齊在Axure里面非常重要，善用Axure自帶對齊功能奏黑！
1）不同組件間距盡量對齊相同炊邦，或者10px的倍數(shù)規(guī)律。
2）2個(gè)元素間關(guān)系善用向左/右對齊熟史，居中對齊馁害，頁面內(nèi)元素間必須存在對齊關(guān)系（左右居中）
- 3個(gè)元素以上，善用間距對齊蹂匹。
淺色為主碘菜，慎用深色：在組件顏色選擇上，盡量采用淺色，首先是深色顯得比較重忍啸，建議關(guān)鍵組件采用深色仰坦。
圖標(biāo)等采用真實(shí)素材：在低保真中计雌，涉及圖片圖標(biāo)等素材用占位符悄晃，而畫高保真時(shí)，我們可以替換為真實(shí)素材凿滤。圖標(biāo)可以去Iconfont下載尋找妈橄，圖片盡量找真是素材替換。
有興趣適當(dāng)配色：在不影響設(shè)計(jì)師的前提下翁脆，可以嘗試配色眷蚓，但是交付設(shè)計(jì)師的交互稿最好不帶顏色。
啥時(shí)候上高保真反番？
并不是任何時(shí)候都適用于高保真原型溪椎，哪些場景下比較適合使用呢？
適用場景：
- 不干擾設(shè)計(jì)師的前提下恬口，想要盡量接近產(chǎn)品最終效果校读。
- 涉及會(huì)議演示。
- 做好方案對B/C端用戶直接展示祖能，越保真效果越好歉秫。
非適用場景
- 產(chǎn)品流程還在探索期，此期強(qiáng)調(diào)流程而不是細(xì)節(jié)养铸，建議采用低保真雁芙。
- 周期短，那還是重點(diǎn)表達(dá)清流程和適當(dāng)?shù)募?xì)節(jié)钞螟。
總結(jié)兔甘，高保真原型：
- 制作周期：較長，耗時(shí)間鳞滨。
- 適用場景：流程清晰的前提下洞焙，想要接近或者定義最終效果。
END
Axure小心得拯啦，望能對親有所幫助澡匪，文筆粗糙請諒解。
