超全面的 UI 工作流程指南（一）：需求分析
工作流程第一節(jié)：需求分析锁蠕。
UI設(shè)計(jì)工作惑艇，包括 APP 設(shè)計(jì)蒿辙、網(wǎng)頁設(shè)計(jì)、小程序設(shè)計(jì)等方面滨巴。而一個(gè)產(chǎn)品完整的 UI 設(shè)計(jì)流程思灌，是指拿到一個(gè)新的項(xiàng)目需求后，從設(shè)計(jì)思考開始恭取，產(chǎn)品前期分析泰偿，設(shè)計(jì)產(chǎn)品，設(shè)計(jì)評(píng)審蜈垮，用戶測試耗跛，直至產(chǎn)品上線。
以上的流程都是與設(shè)計(jì)師密切相關(guān)的內(nèi)容攒发，我們的關(guān)注點(diǎn)不能只有視覺效果调塌，孤立的設(shè)計(jì)容易脫離產(chǎn)品，反復(fù)修改惠猿，因此前期分析與后期支持都值得我們重視羔砾。
產(chǎn)品立項(xiàng)后的第一階段是需求分析階段，當(dāng)我們拿到一個(gè)新的需求時(shí)偶妖，首先要了解的就是產(chǎn)品的需求是什么蜒茄，了解市場背景、產(chǎn)品定位餐屎、概念，客戶的需求是什么玩祟。
一般來說腹缩，我們接到的需求分為三類：全新產(chǎn)品、現(xiàn)有產(chǎn)品新增功能空扎、產(chǎn)品改版藏鹊。
需求文檔類型
前期分析階段中，需求方主要是與產(chǎn)品經(jīng)理進(jìn)行溝通转锈，產(chǎn)出文檔有三種：
BRD文檔（Business Requirement Document）：商業(yè)需求文檔盘寡，基于商業(yè)目標(biāo)或價(jià)值所描述的產(chǎn)品需求內(nèi)容文檔（報(bào)告）。
MRD文檔（Market Requirement Document）：市場需求文檔撮慨，該文檔在產(chǎn)品項(xiàng)目過程中屬于「過程性」文檔竿痰，由產(chǎn)品經(jīng)理或者市場經(jīng)理編寫的一個(gè)產(chǎn)品說明需求的文檔脆粥。
PRD文檔（Product Requirement Document）：產(chǎn)品需求文檔是將商業(yè)需求文檔（BRD）和市場需求文檔（MRD）用更加專業(yè)的語言進(jìn)行描述。
分析類網(wǎng)站推薦
互聯(lián)網(wǎng)數(shù)據(jù)資訊中心：http://www.199it.com/
艾瑞網(wǎng)-互聯(lián)網(wǎng)數(shù)據(jù)資訊聚合平臺(tái)：http://www.iresearch.cn/
數(shù)據(jù)分析網(wǎng)：https://www.afenxi.com/
產(chǎn)品分析緯度
有了數(shù)據(jù)參考來源后影涉，我們就能從五個(gè)緯度分析產(chǎn)品变隔。
1. 產(chǎn)品分析
市場背景、產(chǎn)品業(yè)務(wù)蟹倾、現(xiàn)有產(chǎn)品各項(xiàng)數(shù)據(jù)匣缘。
2. 用戶畫像
顯性畫像：即用戶群體的可視化的特征描述。如目標(biāo)用戶的年齡鲜棠、性別肌厨、職業(yè)、地域豁陆、興趣愛好等特征柑爸。
隱性畫像：用戶內(nèi)在的深層次的特征描述。包含了用戶的產(chǎn)品使用目的献联、用戶偏好竖配、用戶需求、產(chǎn)品的使用場景里逆、產(chǎn)品的使用頻次等进胯。
3. 需求確認(rèn)
產(chǎn)品需求主要是為了滿足用戶或企業(yè)價(jià)值，所以一定要確認(rèn)重要且緊要的需求內(nèi)容是什么原押，什么功能和內(nèi)容暫時(shí)不需要做胁镐，什么功能和內(nèi)容放在后期做，因此設(shè)計(jì)時(shí)也要考慮產(chǎn)品未來的擴(kuò)展性诸衔。
4. 邏輯流程
邏輯流程盯漂，整個(gè)產(chǎn)品的邏輯、內(nèi)部流程笨农；
用戶路徑就缆，描述用戶在產(chǎn)品內(nèi)部的路徑。
5. 競品分析
和國內(nèi)外同類產(chǎn)品進(jìn)行比較分析谒亦，知己知彼竭宰。
競品選擇，從兩個(gè)方向出發(fā)：
從產(chǎn)品類型出發(fā)：比如我們需要設(shè)計(jì)的產(chǎn)品是財(cái)務(wù)類份招，選擇的方向也是同類財(cái)務(wù)類產(chǎn)品切揭；
從產(chǎn)品功能出發(fā)：比如說財(cái)務(wù)產(chǎn)品中有著支付購買的功能板塊，選擇的競品也包括了購物锁摔、生活類產(chǎn)品廓旬。
相關(guān)教程：《視覺設(shè)計(jì)師如何做競品分析？來看這份超全面的指南谐腰！》
最后孕豹，比起產(chǎn)品經(jīng)理來說涩盾，設(shè)計(jì)師在這個(gè)階段能獲三個(gè)信息：
自己需要完成什么；
要做到什么程度巩步；
擴(kuò)展性的考慮旁赊，可以在設(shè)計(jì)時(shí)預(yù)留位置。
文檔整理工具
超全面的 UI 工作流程指南（二）：原型設(shè)計(jì)
原型設(shè)計(jì)的主要作用椅野，是用戶體驗(yàn)設(shè)計(jì)師與 PM终畅、網(wǎng)站開發(fā)工程師溝通最初的產(chǎn)品設(shè)想的重要工具，展示產(chǎn)品內(nèi)容和結(jié)構(gòu)及粗略的布局竟闪，說明用戶將如何與產(chǎn)品進(jìn)行交互离福，而不是視覺設(shè)計(jì)。
在大廠中炼蛤，職位分工更為細(xì)致明確妖爷，大多原型都是由產(chǎn)品經(jīng)理制作的，而中小企業(yè)里理朋，更多的是設(shè)計(jì)師也要具備制作原型的能力絮识。原型圖階段中設(shè)計(jì)師需要和產(chǎn)品經(jīng)理溝通需求，并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求嗽上，而是需要相互就自己擅長的方面進(jìn)行溝通次舌。
原型類型區(qū)別
設(shè)計(jì)時(shí)原型的類別也需要關(guān)注，每個(gè)項(xiàng)目啟動(dòng)時(shí)對原型的需求不一定都相同兽愤，交流的對象也有可能會(huì)對原型的類別產(chǎn)生混淆彼念，以為線框圖（Wireframe）、原型（Prototype）和視覺稿（Mockup）是一個(gè)東西浅萧，設(shè)計(jì)開始前最好先與產(chǎn)品經(jīng)理/甲方確認(rèn)要繪制什么類型的原型逐沙。
三種類別雖然產(chǎn)出效果不同，但在本質(zhì)上都是一樣的洼畅，為設(shè)計(jì)開發(fā)服務(wù)吩案，所以在產(chǎn)品研發(fā)時(shí)，并沒有硬性規(guī)定一定先產(chǎn)出哪一個(gè)類別的原型圖帝簇，一切以實(shí)際研發(fā)過程中的要求為準(zhǔn)务热。
交互設(shè)計(jì)原則
交互設(shè)計(jì)作為原型設(shè)計(jì)里的重要環(huán)節(jié)，了解交互設(shè)計(jì)原則己儒，給交互設(shè)計(jì)提供更多設(shè)計(jì)支持。
1. Fitts’ Law / 菲茨定律（費(fèi)茨法則）
目標(biāo)離的越遠(yuǎn)捆毫，到達(dá)就越是費(fèi)勁闪湾。目標(biāo)越小，就越難點(diǎn)中绩卤。如果我們要想鼠標(biāo)比較快速地命中目標(biāo)可以采取兩個(gè)措施途样，要么減少鼠標(biāo)與目標(biāo)之間的距離江醇，要么使目標(biāo)足夠大。
2. Hick’s Law / 席克定律（虾蜗荆克法則）
一個(gè)人面臨的選擇越多陶夜，所需要作出決定的時(shí)間就越長。在人機(jī)交互中界面中選項(xiàng)越多裆站，意味著用戶做出決定的時(shí)間越長条辟。
可以簡化選項(xiàng)
3. 神奇數(shù)字7±2法則
人類頭腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后就開始出錯(cuò)宏胯。與席克定律類似羽嫡，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上，如應(yīng)用的選項(xiàng)卡不會(huì)超過 5 個(gè)肩袍。
4. The Law Of Proximity 接近法則
根據(jù)格式塔（Gestalt）心理學(xué)：當(dāng)對象離得太近的時(shí)候杭棵，意識(shí)會(huì)認(rèn)為它們是相關(guān)的。在交互設(shè)計(jì)中表現(xiàn)為一個(gè)提交按鈕會(huì)緊挨著一個(gè)文本框氛赐，因此當(dāng)相互靠近的功能塊是不相關(guān)的話魂爪，就說明交互設(shè)計(jì)可能是有問題的。
5. Tesler’s Law 泰思勒定律（復(fù)雜性守恒定律）
該定律認(rèn)為每一個(gè)過程都有其固有的復(fù)雜性艰管，存在一個(gè)臨界點(diǎn)滓侍，超過了這個(gè)點(diǎn)過程就不能再簡化了，你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方蛙婴。如對于郵箱的設(shè)計(jì)粗井，收件人地址是不能再簡化的，而對于發(fā)件人卻可以通過客戶端的集成來轉(zhuǎn)移它的復(fù)雜性街图。
6. 新鄉(xiāng)重夫：防錯(cuò)原則
防錯(cuò)原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽浇衬，而不是人為操作疏忽。通過改變設(shè)計(jì)可以把過失降到最低餐济。該原則最初是用于工業(yè)管理的耘擂，如在硬件設(shè)計(jì)上的 USB 插槽。而在界面交互設(shè)計(jì)中也是可以經(jīng)承跄罚看到醉冤，如當(dāng)使用條件沒有滿足時(shí)，常常通過使功能失效來表示（一般按鈕會(huì)變?yōu)榛疑珶o法點(diǎn)擊）篙悯，以避免誤按蚁阳。
7. Occam’s Razor 奧卡姆剃刀原理（簡單有效原理）
這個(gè)原理被稱為「如無必要，勿增實(shí)體」鸽照，即如有兩個(gè)功能相等的設(shè)計(jì)螺捐，那么選擇最簡單的。
8. Steering Law 轉(zhuǎn)向定律
觸控技術(shù)（Touch）應(yīng)用：
0° 方向是最利于操作者移動(dòng)的方向，具有較好的視覺反饋定血，成功率相對最高赔癌；
120° 方向用戶在操作時(shí)最為困難，在用戶界面交互設(shè)計(jì)中應(yīng)盡少使用澜沟；
用戶手指在各個(gè)方向的運(yùn)動(dòng)中灾票，寬度低于 14 像素的 Touch 是用戶體驗(yàn)最差的。
9. 帕累托定律（80/20原則）
任何大系統(tǒng)中茫虽，大部分的效果僅有少數(shù)幾項(xiàng)變量決定刊苍。用戶 80% 的時(shí)間花在了 20% 的功能上。
其實(shí)交互定律看起來有點(diǎn)枯燥席噩，生搬硬套其實(shí)并不一定能套上去班缰，列舉以上的設(shè)計(jì)原則更多的是為設(shè)計(jì)做參考，結(jié)合設(shè)計(jì)原則悼枢，是提升設(shè)計(jì)說服力的有效方法埠忘。
