編輯導(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é)議。