中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

優(yōu)秀的原型設(shè)計(jì)，不光是自己和相關(guān)人員看起來(lái)賞心悅目，在團(tuán)隊(duì)溝通、協(xié)作時(shí)也能提高工作效率，達(dá)成默契。這篇文章，作者分享了優(yōu)秀的原型的五個(gè)特征，快來(lái)看看你的原型是否符合要求吧。

原型是一個(gè)產(chǎn)品的模型，通過(guò)制作這樣的一個(gè)模型能夠讓大家直觀感受產(chǎn)品的功能，讓團(tuán)隊(duì)成員、項(xiàng)目干系人了解產(chǎn)品的概貌。原型制作的好壞，直接影響大家對(duì)產(chǎn)品的認(rèn)識(shí)與理解，影響著需求傳達(dá)的準(zhǔn)確性。

原型指導(dǎo)著設(shè)計(jì)、開(kāi)發(fā)與測(cè)試的工作環(huán)節(jié)，從而間接影響了產(chǎn)品的最終質(zhì)量。因此，設(shè)計(jì)一份高質(zhì)量的原型，對(duì)整個(gè)項(xiàng)目工作而言至關(guān)重要，所以我們有必要努力將原型設(shè)計(jì)得更好。

我們研究了大量的優(yōu)秀設(shè)計(jì)案例，發(fā)現(xiàn)那些優(yōu)秀的原型都具有以下5個(gè)特征：統(tǒng)一的設(shè)計(jì)尺寸及布局結(jié)構(gòu)、優(yōu)雅的配色方案、明確的文字規(guī)范、高效的母版設(shè)計(jì)、強(qiáng)大的組件系統(tǒng)。一份好的原型看上去給人的感覺(jué)就是簡(jiǎn)潔、明了、整齊劃一，頁(yè)面之間的邏輯關(guān)系也很清晰明了。

下面我們就來(lái)分析這5個(gè)特征：

特征一：確定設(shè)計(jì)尺寸及界面布局

無(wú)論是設(shè)計(jì)移動(dòng)端頁(yè)面，還是PC端頁(yè)面，我們首先都需要確定好頁(yè)面的設(shè)計(jì)尺寸，通常移動(dòng)端頁(yè)面的設(shè)計(jì)尺寸為375（寬度） x 667（高度），在Axure RP9的版本當(dāng)中，通過(guò)頁(yè)面樣式，我們可以根據(jù)設(shè)計(jì)需要或者演示設(shè)備的分辨率選擇合適的移動(dòng)端頁(yè)面尺寸。如果是PC端頁(yè)面，寬度一般設(shè)置為1024，高度通常不上限。

這里重點(diǎn)說(shuō)明下PC端的設(shè)計(jì)尺寸，確定完了頁(yè)面尺寸，接下來(lái)我們需要根據(jù)產(chǎn)品需求來(lái)確定頁(yè)面的設(shè)計(jì)版式以及界面布局，從橫向上看將頁(yè)面需要分成幾個(gè)版塊，每個(gè)版塊之間的留白間隙是多少，這些都需要統(tǒng)一。

在設(shè)計(jì)PC端頁(yè)面的時(shí)候，根據(jù)柵格系統(tǒng)的設(shè)計(jì)原則，從橫向上將頁(yè)面切分為24個(gè)方塊,這樣便于界面的布局，無(wú)論是兩等份、三等份、四等分、六等分都可以滿足設(shè)計(jì)要求。每個(gè)版塊之間的間隙一般為6px、8px、10px、12px、14px，無(wú)論選擇什么樣的間隙尺寸，都要注意每個(gè)版塊之間的留白間隙要保持相等。

無(wú)論是設(shè)計(jì)移動(dòng)端頁(yè)面，還是PC端頁(yè)面，我們首先都需要確定好頁(yè)面的設(shè)計(jì)尺寸，通常移動(dòng)端頁(yè)面的設(shè)計(jì)尺寸為375（寬度） x 667（高度），在Axure RP9的版本當(dāng)中，通過(guò)頁(yè)面樣式，我們可以根據(jù)設(shè)計(jì)需要或者演示設(shè)備的分辨率選擇合適的移動(dòng)端頁(yè)面尺寸。如果是PC端頁(yè)面，寬度一般設(shè)置為1024，高度通常不設(shè)上限。

這里重點(diǎn)說(shuō)明下PC端的設(shè)計(jì)尺寸，確定完了頁(yè)面尺寸，接下來(lái)我們需要根據(jù)產(chǎn)品需求來(lái)確定頁(yè)面的設(shè)計(jì)版式以及界面布局，從橫向上看將頁(yè)面需要分成幾個(gè)版塊，每個(gè)版塊之間的留白間隙是多少，這些都需要統(tǒng)一。

在設(shè)計(jì)PC端頁(yè)面的時(shí)候，根據(jù)柵格系統(tǒng)的設(shè)計(jì)原則，從橫向上將頁(yè)面切分為24個(gè)方塊,這樣便于界面的布局，無(wú)論是兩等份、三等份、四等分、六等分都可以滿足設(shè)計(jì)要求。每個(gè)版塊之間的間隙一般為6px、8px、10px、12px、14px，無(wú)論選擇什么樣的間隙尺寸，都要注意每個(gè)版塊之間的留白間隙要保持相等。

特征二：明確產(chǎn)品色調(diào)

設(shè)計(jì)規(guī)范中還要注重用色的統(tǒng)一。

首先確定產(chǎn)品的品牌色，品牌色即為產(chǎn)品的主色調(diào)，主色調(diào)通常只能有一個(gè)。

確定了主色調(diào)，還需要確定兩個(gè)輔助色，一個(gè)產(chǎn)品的用色最好不要超過(guò)3種顏色，尤其是同一個(gè)頁(yè)面的顏色更不應(yīng)超過(guò)3種，研究表明同一個(gè)頁(yè)面的顏色超過(guò)3種以上，頁(yè)面給人的感覺(jué)就會(huì)覺(jué)得混亂，讓人抓不住重點(diǎn)信息。品牌的logo、操作按鈕、以及導(dǎo)航等應(yīng)使用主色調(diào)，重要的文字信息應(yīng)使用主色調(diào)。次要的操作按鈕、頁(yè)面的狀態(tài)信息、部分提示信息可以使用輔助色。同一個(gè)按鈕的不同狀態(tài)，可以使用同一色系的不同深淺度或飽和度來(lái)區(qū)分狀態(tài)。

統(tǒng)一用色，可以讓原型看上去更簡(jiǎn)潔，避免出現(xiàn)五彩斑斕的黑、或者讓人眼花繚亂的配色方案。顏色規(guī)范的目的主要用于向用戶傳達(dá)統(tǒng)一的視覺(jué)觀感，一眼就能夠記住產(chǎn)品的顏色。

當(dāng)然有些產(chǎn)品經(jīng)理、交互設(shè)計(jì)師可能更傾向于黑白灰這種經(jīng)點(diǎn)配色，最終的配色方案會(huì)交由視覺(jué)設(shè)計(jì)師來(lái)確定，但即便使用黑白灰也要注重用色的統(tǒng)一，同一個(gè)設(shè)計(jì)元素在不同的頁(yè)面之間要保持用色的統(tǒng)一。

特征三：確定文字使用規(guī)范

產(chǎn)品信息是由文字、圖片和視頻傳達(dá)的，而絕大部分的信息又是以文字作為載體。因此，在進(jìn)行產(chǎn)品原型設(shè)計(jì)，我們也需要認(rèn)證研究下文字的使用。

首先，我們需要確定文字的字體，和顏色的規(guī)范一樣，字體的使用最多不應(yīng)超過(guò)3種，能使用同一種字體固然是最好的。

中文字體推薦大家使用PingFang SC、Langting SC、Microsoft YaHei，英文字體推薦使用Helvetica Neue、Symbol、Arial。

根據(jù)文字信息的重要程度、文字類型，所使用的字號(hào)也是不同的，通常，越重要的文字信息使用的字號(hào)也越大。

大部分的文字盡量使用同一個(gè)顏色，這里推薦純黑色#000000，不同類型的文字可以使用不同的飽和度來(lái)進(jìn)行區(qū)分。

下面這兩張圖，整理了不通類型的文字使用的文字大小、文字顏色。

特征四：善于使用成母版

同一個(gè)產(chǎn)品原型設(shè)計(jì)當(dāng)中，我們可以將一些使用率較高的組件、模板設(shè)置為母版，如頁(yè)面導(dǎo)航、文章列表、商品列表、頁(yè)頭、頁(yè)尾、表格、各類表單等都可以設(shè)置為母版，下次使用，直接從母版中拖拽。

養(yǎng)成使用母版的良好習(xí)慣，可以大大的提高我們的設(shè)計(jì)效率。根據(jù)使用需求的不同，可以將設(shè)計(jì)內(nèi)容轉(zhuǎn)化為不同類型的母版。

母版類型分為三種：固定型母版、任意型母版以及脫離型母版。

1. 固定型母版，通常位置是固定好的，不能人為的改變位置，如頁(yè)頭、App的底部導(dǎo)航等；
2. 任意型母版，在引用的時(shí)候，可以靈活修改位置，這類型的母版也是使用最廣泛的母版；
3. 最后一種就是脫離型母版，這種母版與前面兩種母版最大的區(qū)別就是在引用頁(yè)面中修改它的內(nèi)容，而不會(huì)影響到原母版的內(nèi)容，就好像是脫離了母子關(guān)系。

另外兩種母版， 如果在引用頁(yè)面中進(jìn)行修改，則會(huì)同步修改原母版的內(nèi)容，他們之間保持了一種特殊的母子關(guān)系。

特征五：建立完善的組件庫(kù)

隨著參與的設(shè)計(jì)項(xiàng)目越來(lái)越多，我們會(huì)發(fā)現(xiàn)有些設(shè)計(jì)元素在很多不同的產(chǎn)品當(dāng)中都會(huì)被多次重復(fù)使用。

如App的底部導(dǎo)航、table標(biāo)簽、彈框組合、toast提示、浮層提示、下拉菜單、進(jìn)度條、各類選擇器、文本框、單選、復(fù)選等，這些使用場(chǎng)景廣泛的通用型控件、組件會(huì)被不同的設(shè)計(jì)項(xiàng)目多次頻繁使用，這個(gè)時(shí)候母版已經(jīng)幫不了我們了。

到了這一步，我們可以考慮建立自己的組件庫(kù)，將這些使用頻率高的通用型控件、組件，甚至頁(yè)面模板納入到我們的組件庫(kù)當(dāng)中。

建立一套成熟、全面的組件庫(kù)，不僅可以統(tǒng)一我們的設(shè)計(jì)規(guī)范，還能夠極大的提高原型設(shè)計(jì)效率。

有了這樣的一套組件庫(kù)，設(shè)計(jì)產(chǎn)品原型只需要不停的拖拽，并在這些基礎(chǔ)上稍作修改，就能夠快速的完成原型設(shè)計(jì)。

原型設(shè)計(jì)的時(shí)間減少了，作為產(chǎn)品經(jīng)理、交互設(shè)計(jì)師就可以有更多的時(shí)間思考產(chǎn)品的流程、邏輯以及用戶體驗(yàn)。

交互組件庫(kù)演示地址：https://8hzn8o.axshare.com

小結(jié)

最后，我們一起來(lái)總結(jié)下本文的討論主題，我們應(yīng)做好以下三點(diǎn)要求：

1. 統(tǒng)一設(shè)計(jì)規(guī)范，明確設(shè)計(jì)標(biāo)準(zhǔn)：善于借助頁(yè)面樣式管理器和元件樣式管理器這兩個(gè)輔助工具來(lái)幫助我們養(yǎng)成統(tǒng)一視覺(jué)規(guī)范的良好習(xí)慣，團(tuán)隊(duì)內(nèi)部還要做到組件庫(kù)的統(tǒng)一。
2. 產(chǎn)品結(jié)構(gòu)清晰，內(nèi)容表達(dá)準(zhǔn)確：用好柵格系統(tǒng)、母版、中繼器使得頁(yè)面結(jié)構(gòu)清晰，內(nèi)容傳達(dá)準(zhǔn)確；用好頁(yè)面導(dǎo)航，規(guī)范頁(yè)面的名稱、層級(jí)關(guān)系，使得產(chǎn)品結(jié)構(gòu)更清晰。
3. 交互邏輯完整，操作流程順暢：養(yǎng)成預(yù)覽原型的好習(xí)慣，檢查頁(yè)面操作流程，對(duì)頁(yè)面跳轉(zhuǎn)交互進(jìn)行查漏補(bǔ)缺。

感謝您的閱讀，由于本人才疏學(xué)淺，難免有不足之處，歡迎大家在評(píng)論區(qū)分享交流，愿你我一起成長(zhǎng)，共同進(jìn)步！謝謝！