Axure產(chǎn)品原型設(shè)計(jì)規(guī)范:這3點(diǎn)需要注意

2 評(píng)論 12789 瀏覽 69 收藏 5 分鐘

編輯導(dǎo)語:Axure 是創(chuàng)建軟件原型的快速有力的工具,然而對(duì)于很對(duì)用戶來說,他們可能沒有接受過正式的培訓(xùn),不知道如何以恰當(dāng)?shù)姆绞絹砀行实氖褂肁xure?;诖?,本文作者結(jié)合案例分享了產(chǎn)品原型頁面規(guī)范設(shè)計(jì)過程中需要注意的幾個(gè)關(guān)鍵問題,希望看后對(duì)你有所幫助。

產(chǎn)品原型存在的價(jià)值是能夠以最為直觀的方式將你的業(yè)務(wù)需求展示給你的受眾用戶。

除了產(chǎn)品原型之外需要在PRD文檔中體現(xiàn)的其他內(nèi)容(比如業(yè)務(wù)、流程、邏輯等等)在同等質(zhì)量的情況下,具有一定設(shè)計(jì)規(guī)范的產(chǎn)品原型明顯會(huì)讓你的受眾更加容易接受。此外,在實(shí)際的工作中,我們也會(huì)擔(dān)負(fù)著UI視覺稿的評(píng)審與驗(yàn)收工作,具有一定的設(shè)計(jì)思維,也能讓你更加理解對(duì)方的一些設(shè)計(jì)思路與理念。

產(chǎn)品原型頁面的規(guī)范設(shè)計(jì)需要注意以下幾點(diǎn):

01 字體:類型 & 字號(hào)

在原型頁面的文字設(shè)計(jì)中,字體的選擇方面建議使用蘋方(macOS)或是微軟雅黑(Windows),以便達(dá)到更好的顯示效果。

字號(hào)我個(gè)人比較常用的是12、13、14、15、17,偶爾會(huì)用9、10、20。

02 配色:色彩 & 界面

在原型頁面的色彩設(shè)計(jì)中,最好保持一致,無論是文本還是其他圖形、圖片不要使用太多非黑灰白以外的色值。

如果用于演示的產(chǎn)品原型稿件中需要配圖標(biāo),則需要保持圖片的一致性,大小及樣式。但在實(shí)際的工作中,除了一些指示性比較強(qiáng)的圖標(biāo),比如搜索、設(shè)置、分享等等,其他的盡量不要使用圖標(biāo)素材。

組成原型界面的素材也要盡可能的避免混搭,比如從成熟產(chǎn)品中截圖然后應(yīng)用到自己的產(chǎn)品原型當(dāng)中。

在Axure9中新增了Adjust Color【顏色調(diào)整】,可對(duì)圖片可以進(jìn)行色值調(diào)整。

03 排版:對(duì)齊 & 間距 & 留白

在原型頁面的結(jié)構(gòu)設(shè)計(jì)中,要靈活的使用參考線、對(duì)齊、分布等功能,使頁面內(nèi)容具有良好的可讀性。

從個(gè)人習(xí)慣來講,無論是間隔還是留白,我會(huì)按照5像素的倍數(shù)進(jìn)行設(shè)置。留白一般在Style樣式面板中調(diào)整Padding值,很多時(shí)候,Padding值也能輔助我對(duì)組件進(jìn)行對(duì)齊操作。文本之間的行間距偶爾會(huì)調(diào)整,但會(huì)以默認(rèn)為主。

04 案例

以下是一些規(guī)范原型頁面示意:

05 結(jié)束語

對(duì)于想要從事產(chǎn)品經(jīng)理或是交互設(shè)計(jì)師的新人來講,建議大家在熟悉工具的使用過程中有意識(shí)的培養(yǎng)自己的設(shè)計(jì)規(guī)范。在繪制線框圖,或者臨摹其他成熟產(chǎn)品創(chuàng)建高保真原型(實(shí)際工作中并不需要?jiǎng)?chuàng)建高保真原型,這邊需要特別注意)的時(shí)候,一定要注意以下2點(diǎn):

  1. 線框圖:不建議完全按照蘋果或是安卓,設(shè)計(jì)規(guī)范進(jìn)行頁面設(shè)計(jì)。
  2. 高保證:不建議像素級(jí)臨摹。

 

作者:GrowingPM;公眾號(hào):GrowingPM

本文由 @GrowingPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我最近畫原型圖 發(fā)現(xiàn)自己很多顏色用的不標(biāo)準(zhǔn) 也表述不出自己想要表達(dá)的意思 主次不明顯

    回復(fù)
  2. 學(xué)習(xí)到了,有規(guī)范還是好,標(biāo)注清楚再給開發(fā)或者UI好像他們都會(huì)舒服很多,這樣也會(huì)保持頁面風(fēng)格統(tǒng)一。

    來自安徽 回復(fù)