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

首先需要了解交互稿和原型圖的聯(lián)系與區(qū)別：按照常規(guī)的工作流程，交互設計師最終交付的產(chǎn)物包括任務流程圖、信息架構圖、頁面原型圖、頁面交互說明、頁面流程圖，這些都可以歸納到交互設計文檔中。因此原型圖只是交互稿的一部分，本文將鋪開闡述設計規(guī)范的原型圖應該注意哪些。

原型圖設計遵循的首要原則是：在滿足將產(chǎn)品需求轉(zhuǎn)化為界面功能需求的同時，盡可能的維持原型圖的美觀簡潔，人類始終向往和追求一切美好的事物，即便是黑白的世界，一樣會帶給人美的享受。

接下來將從“宏觀的基礎規(guī)范”和“微觀的細節(jié)規(guī)范”兩個維度，說明如何設計規(guī)范的移動端原型圖。

一、基礎規(guī)范

1.繪制原型圖的尺寸

考慮到繪制與查看原型圖的便利性，以及大部分產(chǎn)品與開發(fā)人員使用小屏幕筆記本，當前原型圖的尺寸一般采用375*670px，相當于iPhone 6s屏幕尺寸的一半，以iOS系統(tǒng)為主，安卓系統(tǒng)個別頁面單獨做圖說明。

2.原型圖常用組件尺寸

指經(jīng)常使用的通用組件，如狀態(tài)欄、頂部導航欄、底部導航欄等，這里由于最大寬度已經(jīng)確定都是375px，因此關注的是各通用組件高度。狀態(tài)欄可以設置為母版高度是20px，頂部導航欄高度44px，底部tab導航欄高度49px。

3.對齊

頁面中的模塊或元素不能隨意放置，要保持對齊性，這樣呈現(xiàn)出的效果才規(guī)整有序。

4.親密關聯(lián)

也就是我們經(jīng)常提到的“格式塔原理”的演變，是指內(nèi)容屬性可以劃歸為一組的，在位置布局上距離相近，不同屬性內(nèi)容之間的距離相對遠一些。如下圖閱讀類APP的個人中心頁面，按照消費行為、個人互動消息、系統(tǒng)操作分成了不同模塊，同一模塊下相近屬性歸為一組。

5.對比和重復

• 頁面不同元素之間要有對比效果，目的是更清晰的組織信息、使層級關系明了，能夠引導用戶瀏覽并且制造焦點。
• 設計的某些元素可能在整個頁面中多次出現(xiàn)。重復的元素可能是某個模塊、一條分割線、某種粗字體、某類型圖標標識等。

如下圖，我的書評-我的回復頁面，通過背景色對比區(qū)分“原貼以及針對原貼的回復”，并且多個貼子的回復樣式是重復排版的。

二、細節(jié)規(guī)范

1.字體或模塊色值

• 原型圖模塊背景或元素一般采用黑白灰色值，目的是避免給視覺設計師造成用色干擾。
• 頁面中重點凸顯的內(nèi)容，如字體元素顏色加重，按鈕或某個模塊采用深色塊填充。下圖中購買價格、余額是重點信息，因此色值加重；購買章節(jié)數(shù)以及購買按鈕也是關鍵內(nèi)容，因此給予色塊填充。
• 這樣做的目的是視覺設計師可以很快明確頁面元素的重要性層級，而不必一定要仔細閱讀頁面交互說明。

作為交互設計師必須始終明確，原型圖的重點是功能和邏輯結(jié)構的梳理與呈現(xiàn)，用色不是我們應該考慮的。

2.字體類型與字號大小

原型圖中使用相同的字體，保持所有頁面字體呈現(xiàn)一致性。字號要依據(jù)具體頁面中元素重要性的不同而定，一般來說為便于清楚查看，字號最小12px。如下圖紅色框選部分，標題與簡介不是相同的字體，給人感覺頁面很跳破壞了統(tǒng)一性。

三、總結(jié)

交互設計師在產(chǎn)出原型圖時，在滿足產(chǎn)品和業(yè)務需求的基礎之上，遵循一些普適的規(guī)范原則，不僅使你的原型圖美觀簡潔，更是交互設計師專業(yè)性的體現(xiàn)要素之一。以上是我的一些經(jīng)驗心得，大家如果有更好的觀點補充，歡迎留言探討。

作者：Viksea，微信公眾號：Viksea（ID：viksea-ux）

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

題圖來自 Pexels ，基于 CC0 協(xié)議