07：設(shè)計標準——好的設(shè)計需要表達
原型：是產(chǎn)品功能與內(nèi)容的示意圖，包含靜態(tài)的頁面樣式（線框圖）枫吧，也包含動態(tài)的操作效果（交互說明）。
通過思考宇色，設(shè)計方法等九杂，把需求轉(zhuǎn)化為設(shè)計方案，再細化成標準的設(shè)計原型宣蠕。
拿到需求后尼酿，在考慮各種限制的基礎(chǔ)上，從用戶的角度出發(fā)植影，把需求轉(zhuǎn)化為目標。（例如：產(chǎn)品經(jīng)理發(fā)現(xiàn)市場上需要果汁涎永，而手里剛好有個蘋果思币，于是設(shè)計師榨出蘋果汁。設(shè)計師通過思考羡微、分析谷饿，發(fā)現(xiàn)用戶更喜愛的是橙汁。如果提供橙汁妈倔，用戶會更滿意博投，對公司也沒有不利影響。于是最后決定提供橙汁盯蝴。這個設(shè)計決策的過程就是價值的體現(xiàn)毅哗。）
如何產(chǎn)出標準的原型稿（清楚听怕、規(guī)范）
推薦：設(shè)計移動端產(chǎn)品，使用PowerPoint來繪制原型虑绵。
高保真原型：在外觀尿瞭、操作上與最終產(chǎn)品一致，適合做展示用翅睛。
標準的原型應(yīng)該包含什么內(nèi)容
1.簡要說明與信息結(jié)構(gòu)
1.1簡要說明：以列表的形式呈現(xiàn)
1.2信息結(jié)構(gòu)：需求文檔階段声搁，信息結(jié)構(gòu)更多體現(xiàn)產(chǎn)品的邏輯結(jié)構(gòu)。原型稿是綜合考慮產(chǎn)品邏輯結(jié)構(gòu)和用戶習慣而得到的結(jié)果捕发。
2.任務(wù)流程與頁面流程
2.1任務(wù)流程：是指用戶使用產(chǎn)品時疏旨，它的每一步操作會遇到什么結(jié)果，系統(tǒng)會如何反饋等扎酷，引導(dǎo)用戶完成用戶目標檐涝。
2.2頁面流程：展示用戶如何通過操作，從一個頁面跳轉(zhuǎn)到另一個頁面霞玄。
3.線框圖與交互說明
3.1交互說明：
哪些內(nèi)容需要詳細的說明：文字過多怎么顯示骤铃？操作瞬間會出現(xiàn)什么提示？點擊了頁面上某個部分內(nèi)容坷剧，會出現(xiàn)什么反饋惰爬？跳轉(zhuǎn)到哪個頁面？......
推薦：交互說明與動態(tài)效果相配合的方式
注：除靜態(tài)頁面外惫企，還需考慮各種動態(tài)情況：除正常情況外撕瞧，還需考慮特殊和錯誤情況。
如何劃線框圖狞尔。
1.通過明暗對比表達丛版。
? ? ? ? 直觀表示界面元素的優(yōu)先級關(guān)系。
2.不使用截圖和顏色偏序。
? ? ? ? 線框圖上不建議使用色彩页畦。
3.合理的布局。
? ? ? ? 確定界面布局時研儒，提前和視覺設(shè)計師溝通商量豫缨。
4.遵守柵格規(guī)范。
? ? ? ? 保證交互稿中的字號端朵、間距盡量符合視覺要求（如間距最小為10像素）好芭。
5.標記第一屏的高度。
? ? ? ? 設(shè)計Web端時應(yīng)注意冲呢。最重要的內(nèi)容舍败，在第一屏內(nèi)完全顯示。
6.表達清楚UI邏輯。
? ? ? ? 一般來說邻薯，操作的優(yōu)先級大于鏈接裙戏，鏈接的優(yōu)先級大于文本。最重要的操作一般是用按鈕來表現(xiàn)的弛说，然后是普通的操作挽懦，最后是消極的操作。
7.考慮視覺實現(xiàn)后的效果木人。
? ? ? ?繪制線框圖時信柿，應(yīng)考慮細致⌒训冢考慮到文字對圖片的影響渔嚷。
8.了解視覺趨勢。
? ? ? ?通過對比某個應(yīng)用的前后版本稠曼，分析視覺趨勢形病，應(yīng)用到線框圖的設(shè)計中。
寫交互說明的訣竅
1.盡量使用真實霞幅、符合邏輯的數(shù)據(jù)內(nèi)容漠吻。
? ? ? ? 極端情況的展示需要考慮，但不要作為最主要的司恳。
2.不遺漏特殊狀態(tài)的描述途乃。
? ? ? ? ?用戶極少用到的情況，不能忽略扔傅。（比如：勾選人名后耍共，下面相應(yīng)顯示對應(yīng)的信息。如何顯示猎塞？信息如何排序试读？最多顯示多少？超出一行怎么辦荠耽？名字有無字數(shù)限制钩骇？名字超長（外國人、少數(shù)名族）怎么辦铝量？重名怎么辦伊履？勾選人名后，在下方修改信息后怎么辦款违？...都需提前考慮到并寫在交互說明里。）
3.避免過長的說明群凶。
4.避免流水賬式的說明插爹。
? ? ? 流程圖代替文字說明。用表格羅列何種狀態(tài)。巧妙組織文字說明（用if\else\case等）赠尾。制作動態(tài)效果力穗。
5.關(guān)于重復(fù)出現(xiàn)的模塊。
? ? ? ?對于重復(fù)出現(xiàn)的模塊气嫁，可以將其命名当窗，在其他頁面上留個空位就可以了。盡量用模塊化的思維方式來處理較復(fù)雜的問題寸宵。
6.如原型有修改崖面，不要口頭溝通，而要更新交互說明并告知大家梯影。
關(guān)于設(shè)計規(guī)范
一巫员、有了設(shè)計規(guī)范，可以統(tǒng)一整個產(chǎn)品的風格甲棍，“一致性”形成鮮明的產(chǎn)品特征简识，增強用戶粘度。提高易用性感猛。避免重復(fù)設(shè)計同樣的功能七扰，減少工作量，提高工作效率陪白。
二颈走、什么時候開始設(shè)計規(guī)范？
1.大型且重要的產(chǎn)品拷泽。
2.產(chǎn)品結(jié)構(gòu)疫鹊、頁面類型、UI組件相對較單一司致，可復(fù)用的內(nèi)容較多拆吆。
3.項目人手充足、時間較充裕脂矫。
4.品牌風格枣耀、主題風格已確定完畢，品牌備忘和梳理勢在必行庭再。
5.產(chǎn)品線日益豐富捞奕，后續(xù)設(shè)計一致性和可循環(huán)的要求被提高。
6.產(chǎn)品結(jié)構(gòu)壯大拄轻，新人不斷涌入颅围，溝通和執(zhí)行效率亟待提升。
三恨搓、制定設(shè)計規(guī)范的原則
1.內(nèi)容一定要簡單易懂院促，條理清晰筏养。
2.交互設(shè)計一般先于視覺設(shè)計，視覺是在交互的基礎(chǔ)上做效果常拓。
3.先制定大的設(shè)計方向渐溶，再制定項目中單個詳細的說明；先制定團隊合作的規(guī)范弄抬，再制定個人操作上的規(guī)范茎辐。
