Axure產(chǎn)品原型設計規(guī)范:這3點需要注意
編輯導語:Axure 是創(chuàng)建軟件原型的快速有力的工具,然而對于很對用戶來說,他們可能沒有接受過正式的培訓,不知道如何以恰當?shù)姆绞絹砀行实氖褂肁xure?;诖?,本文作者結(jié)合案例分享了產(chǎn)品原型頁面規(guī)范設計過程中需要注意的幾個關鍵問題,希望看后對你有所幫助。
產(chǎn)品原型存在的價值是能夠以最為直觀的方式將你的業(yè)務需求展示給你的受眾用戶。
除了產(chǎn)品原型之外需要在PRD文檔中體現(xiàn)的其他內(nèi)容(比如業(yè)務、流程、邏輯等等)在同等質(zhì)量的情況下,具有一定設計規(guī)范的產(chǎn)品原型明顯會讓你的受眾更加容易接受。此外,在實際的工作中,我們也會擔負著UI視覺稿的評審與驗收工作,具有一定的設計思維,也能讓你更加理解對方的一些設計思路與理念。
產(chǎn)品原型頁面的規(guī)范設計需要注意以下幾點:
01 字體:類型 & 字號
在原型頁面的文字設計中,字體的選擇方面建議使用蘋方(macOS)或是微軟雅黑(Windows),以便達到更好的顯示效果。
字號我個人比較常用的是12、13、14、15、17,偶爾會用9、10、20。
02 配色:色彩 & 界面
在原型頁面的色彩設計中,最好保持一致,無論是文本還是其他圖形、圖片不要使用太多非黑灰白以外的色值。
如果用于演示的產(chǎn)品原型稿件中需要配圖標,則需要保持圖片的一致性,大小及樣式。但在實際的工作中,除了一些指示性比較強的圖標,比如搜索、設置、分享等等,其他的盡量不要使用圖標素材。
組成原型界面的素材也要盡可能的避免混搭,比如從成熟產(chǎn)品中截圖然后應用到自己的產(chǎn)品原型當中。
在Axure9中新增了Adjust Color【顏色調(diào)整】,可對圖片可以進行色值調(diào)整。
03 排版:對齊 & 間距 & 留白
在原型頁面的結(jié)構設計中,要靈活的使用參考線、對齊、分布等功能,使頁面內(nèi)容具有良好的可讀性。
從個人習慣來講,無論是間隔還是留白,我會按照5像素的倍數(shù)進行設置。留白一般在Style樣式面板中調(diào)整Padding值,很多時候,Padding值也能輔助我對組件進行對齊操作。文本之間的行間距偶爾會調(diào)整,但會以默認為主。
04 案例
以下是一些規(guī)范原型頁面示意:
05 結(jié)束語
對于想要從事產(chǎn)品經(jīng)理或是交互設計師的新人來講,建議大家在熟悉工具的使用過程中有意識的培養(yǎng)自己的設計規(guī)范。在繪制線框圖,或者臨摹其他成熟產(chǎn)品創(chuàng)建高保真原型(實際工作中并不需要創(chuàng)建高保真原型,這邊需要特別注意)的時候,一定要注意以下2點:
- 線框圖:不建議完全按照蘋果或是安卓,設計規(guī)范進行頁面設計。
- 高保證:不建議像素級臨摹。
作者:GrowingPM;公眾號:GrowingPM
本文由 @GrowingPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議。
我最近畫原型圖 發(fā)現(xiàn)自己很多顏色用的不標準 也表述不出自己想要表達的意思 主次不明顯
學習到了,有規(guī)范還是好,標注清楚再給開發(fā)或者UI好像他們都會舒服很多,這樣也會保持頁面風格統(tǒng)一。