UI界面設(shè)計

超齊全的UI設(shè)計流程指南

7556

UI設(shè)計工作，包括APP設(shè)計、網(wǎng)頁設(shè)計、小程序設(shè)計等方面，而一個產(chǎn)品完整的UI設(shè)計流程，是指拿到一個新的項目需求后，從設(shè)計思考開始，產(chǎn)品前期分析，設(shè)計產(chǎn)品，設(shè)計評審，用戶測試，直至產(chǎn)品上線。我們的工作流程如下：

以上的流程都是與設(shè)計師密切相關(guān)的內(nèi)容，我們的關(guān)注點(diǎn)不能只有視覺效果，孤立的設(shè)計容易脫離產(chǎn)品，反復(fù)修改，因此前期分析與后期支持都值得我們重視。

需求分析

產(chǎn)品立項后的第一階段是需求分析階段，當(dāng)我們拿到一個新的需求時，首先要了解的就是產(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)或價值所描述的產(chǎn)品需求內(nèi)容文檔（報告）。

MRD文檔（Market Requirement Document）：市場需求文檔，該文檔在產(chǎn)品項目過程中屬于“過程性”文檔，由產(chǎn)品經(jīng)理或者市場經(jīng)理編寫的一個產(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ù)資訊聚合平臺：http://www.iresearch.cn/

數(shù)據(jù)分析網(wǎng)：https://www.afenxi.com/

36氪：https://36kr.com/

產(chǎn)品分析緯度

有了數(shù)據(jù)參考來源后，我們就能從五個緯度分析產(chǎn)品：

產(chǎn)品分析：市場背景、產(chǎn)品業(yè)務(wù)、現(xiàn)有產(chǎn)品各項數(shù)據(jù)。

用戶畫像：

（1）顯性畫像：即用戶群體的可視化的特征描述。如目標(biāo)用戶的年齡、性別、職業(yè)、地域、興趣愛好等特征。

（2）隱性畫像：用戶內(nèi)在的深層次的特征描述。包含了用戶的產(chǎn)品使用目的、用戶偏好、用戶需求、產(chǎn)品的使用場景、產(chǎn)品的使用頻次等。

需求確認(rèn)：產(chǎn)品需求主要是為了滿足用戶或企業(yè)價值，所以一定要確認(rèn)重要且緊要的需求內(nèi)容是什么功能，什么功能和內(nèi)容暫時不需要做，什么功能和內(nèi)容放在后期做，因此設(shè)計時也要考慮產(chǎn)品未來的擴(kuò)展性。

邏輯流程：

（1）邏輯流程，整個產(chǎn)品的邏輯、內(nèi)部流程；

（2）用戶路徑，描述用戶在產(chǎn)品內(nèi)部的路徑。

競品分析：和國內(nèi)外同類產(chǎn)品進(jìn)行比較分析，知己知彼。

競品選擇，從兩個方向出發(fā)：一是從產(chǎn)品類型出發(fā)：比如我們需要設(shè)計的產(chǎn)品是財務(wù)類，選擇的方向也是同類財務(wù)類產(chǎn)品；二是從產(chǎn)品功能出發(fā)：比如說財務(wù)產(chǎn)品中有著支付購買的功能板塊，選擇的競品也包括了購物、生活類產(chǎn)品。

最后，比起產(chǎn)品經(jīng)理來說，設(shè)計師在這個階段能獲三個信息：

1.自己需要完成什么

2.要做到什么程度

3.擴(kuò)展性的考慮，可以在設(shè)計時預(yù)留位置

文檔整理工具

語雀：https://www.yuque.com

原型設(shè)計

原型設(shè)計的主要作用，是用戶體驗設(shè)計師與PM、網(wǎng)站開發(fā)工程師溝通最初的產(chǎn)品設(shè)想的重要工具，展示產(chǎn)品內(nèi)容和結(jié)構(gòu)及粗略的布局，說明用戶將如何與產(chǎn)品進(jìn)行交互，而不是視覺設(shè)計。

在大廠中，職位分工更為細(xì)致明確，大多原型都是由產(chǎn)品經(jīng)理制作的，而中小企業(yè)里，更多的是設(shè)計師也要具備制作原型的能力。原型圖階段中設(shè)計師需要和產(chǎn)品經(jīng)理溝通需求，并不是產(chǎn)品經(jīng)理向設(shè)計師下發(fā)需求，而是需要相互就自己擅長的方面進(jìn)行溝通。

原型類型區(qū)別

設(shè)計時原型的類別也需要關(guān)注，每個項目啟動時對原型的需求不一定都相同，交流的對象也有可能會對原型的類別產(chǎn)生混淆，以為線框圖（Wireframe）、原型（Prototype）和視覺稿（Mockup）是一個東西，設(shè)計最好先與產(chǎn)品經(jīng)理/甲方開始就確認(rèn)要繪制什么類型的原型。

三種類別雖然產(chǎn)出效果不同，但在本質(zhì)上都是一樣的，為設(shè)計開發(fā)服務(wù)，所以在產(chǎn)品研發(fā)時，并沒有硬性規(guī)定一定先產(chǎn)出哪一個類別的原型圖，一切以實(shí)際研發(fā)過程中的要求為準(zhǔn)。

交互設(shè)計原則

交互設(shè)計作為原型設(shè)計里的重要環(huán)節(jié)，了解交互設(shè)計原則，給交互設(shè)計提供更多設(shè)計支持。

（1）Fitts’ Law / 菲茨定律（費(fèi)茨法則）

目標(biāo)離的越遠(yuǎn)，到達(dá)就越是費(fèi)勁。目標(biāo)越小，就越難點(diǎn)中。如果我們要想鼠標(biāo)比較快速的命中目標(biāo)可以采取兩個措施，要么減少鼠標(biāo)與目標(biāo)之間的距離，要么使目標(biāo)足夠大。

（2）Hick’s Law / 席克定律（?？朔▌t）

定律內(nèi)容：一個人面臨的選擇越多，所需要作出決定的時間就越長。在人機(jī)交互中界面中選項越多，意味著用戶做出決定的時間越長。

（3）神奇數(shù)字 7±2 法則

人類頭腦最好的狀態(tài)能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。與席克定律類似，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動應(yīng)用交互設(shè)計上，如應(yīng)用的選項卡不會超過 5 個。

（4）The Law Of Proximity 接近法則

根據(jù)格式塔（Gestalt）心理學(xué)：當(dāng)對象離得太近的時候，意識會認(rèn)為它們是相關(guān)的。在交互設(shè)計中表現(xiàn)為一個提交按鈕會緊挨著一個文本框，因此當(dāng)相互靠近的功能塊是不相關(guān)的話，就說明交互設(shè)計可能是有問題的。

（5）Tesler’s Law 泰思勒定律（復(fù)雜性守恒定律）

該定律認(rèn)為每一個過程都有其固有的復(fù)雜性，存在一個臨界點(diǎn)，超過了這個點(diǎn)過程就不能再簡化了，你只能將固有的復(fù)雜性從一個地方移動到另外一個地方。如對于郵箱的設(shè)計，收件人地址是不能再簡化的，而對于發(fā)件人卻可以通過客戶端的集成來轉(zhuǎn)移它的復(fù)雜性。

（6）新鄉(xiāng)重夫：防錯原則

防錯原則認(rèn)為大部分的意外都是由設(shè)計的疏忽，而不是人為操作疏忽。通過改變設(shè)計可以把過失降到最低。該原則最初是用于工業(yè)管理的，但在交互設(shè)計也十分適用。如在硬件設(shè)計上的 USB 插槽；而在界面交互設(shè)計中也是可以經(jīng)?？吹?，如當(dāng)使用條件沒有滿足時，常常通過使功能失效來表示（一般按鈕會變?yōu)榛疑珶o法點(diǎn)擊），以避免勿按。

（7）Occam’s Razor 奧卡姆剃刀原理（簡單有效原理）

這個原理被稱為“如無必要，勿增實(shí)體”，即如有兩個功能相等的設(shè)計，那么選擇最簡單的。

（8）Steering Law轉(zhuǎn)向定律

觸控技術(shù)(Touch)應(yīng)用：

a.0°方向是最利于操作者移動的方向，具有較好的視覺反饋，成功率相對最高；

b.120°方向用戶在操作時最為困難，在用戶界面交互設(shè)計中應(yīng)盡少用；

c.用戶手指在各個方向的運(yùn)動中,寬度低于14像素的Tunnel是用戶體驗最差的。

（9）帕累托定律（80/20 原則）

任何大系統(tǒng)中，大部分的效果僅有少數(shù)幾項變量決定。

用戶80%的時間花在了20%的功能上。

法則定律其實(shí)看起來有點(diǎn)枯燥，生搬硬套其實(shí)并不一定能套上去，列舉以上的設(shè)計原則更多的是為設(shè)計做參考，結(jié)合設(shè)計原則，是提升設(shè)計說服力的有效方法。

完整的原型圖

一套完整且專業(yè)的原型圖，除了按照需求文檔設(shè)計出所有頁面，串聯(lián)頁面以外，還包括一些讓人容易疏忽的地方，因為原型圖所交付的人并不只有需求方，還有設(shè)計師與開發(fā)人員。

1.原型圖標(biāo)注，畫開發(fā)看得懂的圖

原型圖對于設(shè)計師來說，是為了查看產(chǎn)品功能頁面與邏輯路徑。對于開發(fā)人員來說，除了產(chǎn)品框架搭建，他們最關(guān)心的內(nèi)容是產(chǎn)品使用中的邊界條件、頁面跳轉(zhuǎn)關(guān)系。原型設(shè)計時需要畫出功能的所有交互狀態(tài)，因此原型圖標(biāo)注包括：

（1）定義好每個標(biāo)注點(diǎn)的含義和事件

在做交互稿標(biāo)記之前，定義規(guī)范好每個標(biāo)記的含義，形成統(tǒng)一的規(guī)范，使得團(tuán)隊成員易于理解。如，用水滴表示標(biāo)注的功能，用圓圈+箭頭的形式來標(biāo)識頁面跳轉(zhuǎn)關(guān)系。

（2）梳理所有對象和邏輯關(guān)系、狀態(tài)

下面的原型圖標(biāo)注以在餓了么商家詳情頁結(jié)算訂單為例，先用思維腦圖梳理功能狀態(tài)，這樣能避免遺漏一些邊界條件。

（3）模塊化區(qū)分和標(biāo)記

梳理好狀態(tài)后再在原型圖上寫產(chǎn)品用例，每個功能做成一個模塊，有利于往后的維護(hù)和迭代。

2.在同一個頁面展示所有的交互狀態(tài)

當(dāng)項目開始一段時間后，原型里的標(biāo)注會逐漸變多，很多的開發(fā)和設(shè)計，沒有很多耐心看原型圖上的各種標(biāo)注。所以盡量能一個頁面上顯示出所有的交互狀態(tài)，避免設(shè)計與開發(fā)時看漏。

3.流程圖，梳理業(yè)務(wù)邏輯關(guān)系

以流程圖梳理產(chǎn)品業(yè)務(wù)的邏輯關(guān)系，常用的流程圖分為單向流程圖和泳道圖（涉及到多個角色）。

單向流程圖一般描述單一角色完成某個任務(wù)的整體過程，如登錄注冊過程、支付流程、填寫資料等。

繪制流程圖需要注意一下幾點(diǎn)：

1.確保產(chǎn)品流程的合理性。

2.有效傳達(dá)需求。

3.檢驗異常分支。

以上簡單的梳理了一下日常工作設(shè)計原型圖中容易讓人忽略的內(nèi)容。

如若想要設(shè)計繪制更專業(yè)的原型圖，可參閱一下兩篇文章：

《超全面總結(jié)！如何畫出專業(yè)的原型圖？（上）》

《超全面總結(jié)！如何畫出專業(yè)的原型圖？（下）》

關(guān)于原型工具

Axure

官網(wǎng)鏈接：http://www.axure.com/

很有名的原型設(shè)計工具，也算是日常工作中最常用的原型工具，成名很早，很多設(shè)計師、PM（產(chǎn)品經(jīng)理）都有用它，它除了能夠高效率制作產(chǎn)品原型，快速繪制線框圖、流程圖、網(wǎng)站架構(gòu)圖、示意圖、HTML 模版外，還支持javascript交互的實(shí)現(xiàn)，并生成Web格式上傳到Axure share分享瀏覽。

當(dāng)然，目前市面上有很多種原型工具誕生，例如墨刀、摩客、ProtoPie等，都適合用于原型交互設(shè)計，當(dāng)然選擇哪個工具要看你自己，你的需求是什么，最適合自己工作流程的工具是哪種，有沒有電腦系統(tǒng)的要求等等。

推薦設(shè)計應(yīng)用——Figma

官網(wǎng)鏈接：https://www.figma.com/

Figma 是一個完全免費(fèi)的在線設(shè)計軟件，支持 Windows 和 macOS 等多個平臺，是可以讓整個團(tuán)隊的成員同時查看并修改協(xié)作的平臺。使用過 Sketch后，上手 Figma 幾乎沒有難度。

（1）原型設(shè)計

在figma里面，你可以無縫完成從設(shè)計到原型演示的切換，不需要反復(fù)同步設(shè)計圖到第三方平臺，并且可以利用Figma Mirror在手機(jī)上預(yù)覽效果。單擊播放圖標(biāo)將進(jìn)入演示模式，可以在其中實(shí)時查看已完成的原型。

（2）實(shí)時協(xié)作+內(nèi)置評論

在Figma里，設(shè)計和協(xié)作可以是同時進(jìn)行的，任何人都可以在設(shè)計圖的任何地方添加評論，你可以在評論中@其他人或?qū)⒃u論標(biāo)記為已解決。

視覺設(shè)計

情緒板設(shè)計

情緒板，換句簡單話來說就是由圖像，視頻和其他視覺元素組成拼貼在一起想法和過程，主要目的是講述項目背后的故事，一次作為設(shè)計方向形式上的參考，同時情緒板也可以在配色方案上，視覺風(fēng)格，質(zhì)量材質(zhì)，作為設(shè)計指導(dǎo)，幫助設(shè)計師提供一些設(shè)計方案和指引。（我們有一篇關(guān)于UI設(shè)計師如何創(chuàng)建情緒板？的文章，可以參考一下）

色彩

配色在視覺設(shè)計中所發(fā)揮的作用是不言而喻的，我們在設(shè)計時對于色彩的制定一般有兩類情況：

1.全新品牌設(shè)計，了解各種顏色或者色相的氣質(zhì)和情感屬性，在具體設(shè)計的時候，進(jìn)一步根據(jù)品牌的氣質(zhì)和需求，再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。

2.根據(jù)甲方/需求方原有產(chǎn)品的色彩來設(shè)置，如果不是全新產(chǎn)品，大部分都有一套自己產(chǎn)品的色彩體系，在保持產(chǎn)品的一致性的前提下，后續(xù)產(chǎn)品皆沿用原有色彩體系。

但是，色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部。比如一個行業(yè)當(dāng)中，很多企業(yè)都使用了藍(lán)色，那么產(chǎn)品繼續(xù)使用藍(lán)色，可以讓用戶更快「識別出」產(chǎn)品所屬的領(lǐng)域，但是本身也存在讓人混淆的風(fēng)險。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。

配色參考網(wǎng)站：

風(fēng)格

品牌或者產(chǎn)品的設(shè)計風(fēng)格與配色是相輔相成的，依據(jù)產(chǎn)品特性與需求，選擇合適的設(shè)計風(fēng)格，更利于提升視覺效果。所以我們需要隨時了解最新的設(shè)計趨勢與風(fēng)格，分清各個設(shè)計風(fēng)格的特點(diǎn)與區(qū)別十分有必要。以下是設(shè)計中常用的設(shè)計風(fēng)格集合：

01. 半扁平化設(shè)計

關(guān)鍵詞：極簡、符號化、光影

由于具體化設(shè)計的影響，界面設(shè)計更加趨向于立體化，光和陰影的運(yùn)用，成為“半扁平化設(shè)計”。為了適應(yīng)現(xiàn)代科技而推崇的扁平化設(shè)計仍會存在，但已不再被大量發(fā)展并使用。適量漸變陰影的使用將會在保留其簡約風(fēng)格的基礎(chǔ)上使扁平化設(shè)計更加復(fù)雜和寫實(shí)化。

02.三維渲染風(fēng)格

關(guān)鍵詞：平面立體感，純色，空間感。

隨著C4D的流行，三維的表現(xiàn)形式在設(shè)計中變得愈演愈烈。不過在后扁平化時代，如何在扁平與立體的形式中間尋找平衡是大家關(guān)注的焦點(diǎn)，而三維純色渲染恰恰是一種很好的嘗試。

空間感的布局拓展了畫面深度，同時物體純色系的渲染方式又強(qiáng)化了畫面的平面感。設(shè)計將干擾人們注意力的因素排除，只留下需要傳達(dá)的主題部分，令人印象深刻，這樣的形式已經(jīng)在攝影及三維藝術(shù)中流行起來，充滿儀式感的畫面讓設(shè)計者愛不釋手。

03. 動畫效果

動畫效果已經(jīng)越來越多的以各種形式出現(xiàn)在網(wǎng)頁設(shè)計上，諸如gifs, SVG, WebGL CSS 或小視頻。

04. 漸變色

關(guān)鍵詞：多色、同色系、對比色

漸變色是時下最主要的流行趨勢之一，始于2016且勢頭至今有增無減。像Instagram這樣的業(yè)界大拿甚至將其logo由扁平改成了多顏色漸變。從logo到按鍵和圖片，漸變色的潮流已經(jīng)無處不在。

05.極簡風(fēng)格

關(guān)鍵詞：極簡、雅致、留白

在內(nèi)容越來越多的前提下，設(shè)計師應(yīng)該減少無用信息的干擾讓用戶可以快速聚焦的到內(nèi)容本身，這種“少即是多”設(shè)計思路就是我們常說的極簡風(fēng)格。刪減與用戶任務(wù)無關(guān)的非功能性元素，只保留重要的信息，減輕用戶的認(rèn)知負(fù)荷。

06.波普風(fēng)格

關(guān)鍵詞：波點(diǎn)、夸張、設(shè)計感極強(qiáng)

波普風(fēng)格主要體現(xiàn)在大眾喜聞樂見的人物、事物、事件中。簡單來說，它有以下幾個特點(diǎn)：（1）設(shè)計中強(qiáng)調(diào)新奇和獨(dú)特、采用強(qiáng)烈的色彩處理，個性化的配色風(fēng)格很有感染力。（2）圖案是最主要的表現(xiàn)形式。常常帶有娛樂、趣味性、詼諧性。（3）難以確定統(tǒng)一的風(fēng)格，追求各種風(fēng)格的混合，追求新奇、古怪。（3）通俗大眾，設(shè)計元素一般來自日常生活中的人物、事物。（4）拼接。

? ?

07.孟菲斯風(fēng)格

關(guān)鍵詞：明快，集合結(jié)構(gòu)，隨性

孟菲斯風(fēng)格在色彩上，常常打破配色規(guī)律，喜歡用一些靚麗、純度高、大膽、對比強(qiáng)烈的配色，借鑒了波普藝術(shù)的配色。在排版上，元素之間沒有過多的聯(lián)系，元素的排列常常無規(guī)律可循，運(yùn)用大量的幾何元素，點(diǎn)、線、面綜合運(yùn)用。規(guī)則的幾何圖形有圓形、三角形、矩形、圓環(huán)、波浪線、網(wǎng)格、斜杠等等，不規(guī)則的幾何圖形也是由點(diǎn)、線、面拼貼而成。

08.光感透氣疊加

關(guān)鍵詞：光感，漸變，氤氳感。

具有光感的半透明漸變疊加平面設(shè)計風(fēng)格。光因為其剔透，純凈，反射的特性，一直被人們所青睞著。人們不再滿足于簡單的色彩疊加，增加光感的設(shè)計將會為產(chǎn)品增添更多的未來迷幻屬性。

09.插畫風(fēng)格

（1）扁平插畫：簡單來講就是把復(fù)雜的關(guān)系簡約化，讓畫面更加清爽整潔，也是現(xiàn)在比較常用的風(fēng)格了，很多商務(wù)工具類的APP會選擇使用這種風(fēng)格。

（2）肌理插畫：顧名思義就是給插畫加上了些肌理質(zhì)感（比如雜色）和光感，本質(zhì)也和扁平插畫差不多，一些想體現(xiàn)質(zhì)感的頁面會用到這種風(fēng)格。

（3）手繪插畫：需要設(shè)計師具備很強(qiáng)的繪畫功底，也算是插畫里面難度比較高的一種。手繪風(fēng)格的插畫運(yùn)用的也比較廣，常見的有一些插畫繪本，故事場景設(shè)計等。

（4）MBE插畫：dribbble的一位設(shè)計師創(chuàng)作了這種風(fēng)格，它主要的特點(diǎn)就是圓潤、可愛、呆萌、簡潔。在APP中的引導(dǎo)頁、啟動頁和缺省頁運(yùn)用也比較廣泛。

（5）漸變插畫：有點(diǎn)類似日本漫畫場景的感覺，風(fēng)格特別唯美浪漫。光感比較強(qiáng)，所以也稱為微光插畫。顏色一般采用相近色，顏色種類不要太多。

（6）2.5D插畫：立體插畫，也就是在二維的空間里表現(xiàn)三維的事物。大多設(shè)計師使用C4D設(shè)計，PS/AI也可以。

10.中國風(fēng)

關(guān)鍵詞：水墨、雅致、文藝

利用中國風(fēng)的視覺元素在設(shè)計上完成表達(dá)。在各種視覺表現(xiàn)形式中，國畫，書法，服飾紋理，建筑結(jié)構(gòu)，陶瓷等傳統(tǒng)材料肌理等等都可以作為素材，利用中國風(fēng)元素的同時，適當(dāng)改造，更換色彩，簡化結(jié)構(gòu)，復(fù)雜化肌理效果等等以求在視覺上更接近品牌的氣質(zhì)。

11.剪紙風(fēng)格

關(guān)鍵詞：矢量插畫、投影、紙張肌理

12.低多邊形（Low Poly）

關(guān)鍵詞：多邊形、3D、低細(xì)節(jié)

low poly實(shí)際是把多色元素，用三角形分割，每個小三角形的顏色，取自原多色元素的相應(yīng)位置。這種設(shè)計風(fēng)格的特點(diǎn)是低細(xì)節(jié)，面又多又小，高度渲染，經(jīng)常配以柔光效果。

13.賽博朋克

關(guān)鍵詞：虛擬現(xiàn)實(shí)、人工智能、霓虹光感

賽博朋克又稱賽伯朋克、數(shù)字朋克、電腦判客、網(wǎng)絡(luò)判客，是科幻小說的一個分支，以計算機(jī)或信息技術(shù)為主題。在視覺設(shè)計中的特點(diǎn)就是藍(lán)、紫、青等冷色調(diào)為主色調(diào)，霓虹燈光感效果為輔助，故障藝術(shù)風(fēng)為輔助（圖像的失真、錯位、破碎等），有時還可以加一些異常的現(xiàn)象比如180度翻轉(zhuǎn)的建筑，還有復(fù)古風(fēng)和未來風(fēng)并存。

14.蒸汽波（Vaporwave）

關(guān)鍵詞：熒光、流體、夢幻感

蒸汽波是一種受賽博朋克影響的網(wǎng)絡(luò)線上藝術(shù)，選用的視覺元素主要有古典藝術(shù)形象，八九十年代的流行文化產(chǎn)物，window95經(jīng)典窗口樣式，又或者是代表著某個時代記憶的各種事物。【蒸汽波更多相關(guān)內(nèi)容】

15.像素風(fēng)格

關(guān)鍵詞：像素化，輪廓清晰，卡通。

像素風(fēng)格屬于點(diǎn)陣式圖像，是一種圖標(biāo)風(fēng)格的圖像，更強(qiáng)調(diào)清晰的輪廓、明快的色彩，幾乎不用混疊方法來繪制光滑的線條，同時它的造型比較卡通，得到很多朋友的喜愛。

16.故障藝術(shù)（Glitch Art）

利用事物形成的故障，進(jìn)行藝術(shù)加工。特點(diǎn)就在于圖像失真、破碎、錯位、變形，還有顏色的失真、錯位，和一些條紋圖形的輔助。

字體

一、界面常用字體推薦

字體的選擇是由產(chǎn)品屬性或品牌特性的關(guān)鍵詞而決定。

1.一般中文字體種類分為：黑體、宋體、仿宋、楷體等；

2.英文字體種類分為：無襯線體、襯線體、意大利斜體、手寫體、黑字體等。

中文字體推薦

線上中文字體推薦使用思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡、黑體-簡。其中 iOS 系統(tǒng)默認(rèn)中文字體是「蘋方PingFang」，Android 系統(tǒng)中文字體使用「思源黑體Noto Sans CJK」。

英文字體推薦

線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系統(tǒng)默認(rèn)英文字體為「San Francisco」，Android 系統(tǒng)默認(rèn)英文字體為「Roboto」。

數(shù)字字體推薦

線上數(shù)字字體推薦使用 DIN、Helvetica Neue。

DIN 起源于1995年的德國，無襯線字體，易用耐看、字形開放，是設(shè)計師最愛的幾類字體之一，適合顯示比較長的大號數(shù)字，但是小字號的情況下識別度較低。

Helvetica Neue 除了上文介紹的簡潔樸素、中性嚴(yán)謹(jǐn)、沒有多余的修飾外，還是 Helvetica 的升級版，擁有了更多的字重，可以作為 iOS 和 Android 跨平臺數(shù)字字體使用。

二、字號

1. 關(guān)于字號

字號是界面設(shè)計中另一個重要的元素，字號大小決定了信息的層級和主次關(guān)系，合理有序的字號設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號使用會讓界面混亂不堪，影響閱讀體驗。

2. 字號的選擇

字號的選擇，可以遵循 iOS 、Material Design、Ant Design 等國內(nèi)外權(quán)威設(shè)計體系中的字號規(guī)則，也可以根據(jù)產(chǎn)品的特點(diǎn)自行定義。

（1）iOS 字號規(guī)則

在 iOS11 系統(tǒng)中，使用 San Francisco 作為系統(tǒng)英文字體，包含了以下幾種字號的文本樣式：

需要注意的是，San Francisco 字體有兩種模式：文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式適用于字號小于 20pt 的文字，展示模式適用于字號大于等于 20pt 的文字。

（2）Material Design 字號規(guī)則

在 Material Design 設(shè)計體系中，使用 Roboto 作為英文字體，規(guī)定了以下文字排版的常用字號：

長篇幅正文，每行建議 60 字符左右，短文本建議每行 30 字符左右。

（3）Ant Design 字號規(guī)則

Ant Design 受到5音階以及自然律的啟發(fā)定義了10種不同的字號，從小到大依次為: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

建議主要字號為 14px，其余字號的選擇可根據(jù)具體情況進(jìn)行自由的定義，盡量控制在3-5種之間，保持克制的原則。

（4）Kiwi 字號規(guī)則

Kiwi 是餓了么的中后臺設(shè)計語言，致力于打造出能夠「了解、洞察、溫暖、激勵用戶」的產(chǎn)品。

在 Kiwi Web 中，規(guī)定最小字號為 12px，主要文本字號為 14px，最大字號為 46px。

三、行高

行高可以理解為一個包裹在字體外面的無形的框，字體距框的上下空隙為半行距。

參考 W3C 原理，眼睛到屏幕的距離 25cm 為最佳閱讀距離。

西文的基本行高通常是字號的 1.2 倍左右。而中文因為字符密實(shí)且高度一致，沒有西文的上伸部和下延部來創(chuàng)造行間空隙，所以一般行高需要更大，根據(jù)不同人群的特點(diǎn)（兒童、年輕人、老年人）以及使用環(huán)境，可達(dá)到1.5至2倍甚至更大。

文章引用來源：《餓了么高級設(shè)計師：界面視覺設(shè)計 5 要素之字體篇》

關(guān)于文字版權(quán)問題：https://www.yuque.com/docs/share/ae07c865-a2ef-4c30-8a8b-1f4e2e958593

圖標(biāo)

設(shè)計中常用的圖標(biāo)，從使用的用途來說圖標(biāo)分為兩種，功能性圖標(biāo)和展示性圖標(biāo)。

1.功能性圖標(biāo)是為了引導(dǎo)用戶理解和操作，需要表現(xiàn)精確和簡介，方便用戶識別其含義。功能性圖標(biāo)常規(guī)狀態(tài)下為無彩色。

2.展示性圖標(biāo)通常為頁面入口，會有更多形狀、顏色、質(zhì)感的表達(dá)，吸引用戶的注意力和點(diǎn)擊欲望，強(qiáng)調(diào)差異性，比如各種品類區(qū)的圖標(biāo)、徽章、等級圖標(biāo)等等。

但圖標(biāo)的風(fēng)格并不止兩類，以下簡單的整理了一下圖標(biāo)的風(fēng)格分類，設(shè)計中選擇符合產(chǎn)品整體風(fēng)格的圖標(biāo)即可。

△參考文檔作者：超人的電話亭/RDD

如果是自己進(jìn)行圖標(biāo)繪制，那么需要采用統(tǒng)一的圖標(biāo)繪制模板，保證圖標(biāo)視覺上大小的一致。

實(shí)際項目中，并不是所有項目都有十分充裕的時間來設(shè)計圖標(biāo)，所以我們可以下載圖標(biāo)素材（圖標(biāo)素材下載地址）。

圖片

網(wǎng)上推薦的無版權(quán)圖片網(wǎng)站有很多，但是真正好用的卻是少數(shù)部分。

第一找圖梯隊

piqsels

基于CC0協(xié)議的免版稅圖庫，個人和商業(yè)免費(fèi)使用。

Unsplash

最知名的無版權(quán)圖片網(wǎng)站，這家以風(fēng)景為主，數(shù)量足夠多，但是很多濾鏡感太強(qiáng)，顏色太過厚重，比較適合做壁紙，事實(shí)上很多壁紙軟件也是直接從這上面下載的圖。

Pixabay

可以說是全球最大的免費(fèi)圖片網(wǎng)站了。圖多而且種類足夠豐富。這其實(shí)也是一家集合網(wǎng)站，可以看到Unsplash 家的很多圖也能在Pixabay 里搜到。

Pexels

這家也有很多精美的圖片，而且比較好的一點(diǎn)是會有「一周精選」，平常沒事的時候來收收圖也挺好的。

visualhunt

數(shù)量超級多的無版權(quán)圖片網(wǎng)站，可以根據(jù)顏色進(jìn)行搜索。

第二找圖梯隊

這里面是一些圖片資源沒有那么豐富，但是質(zhì)量都還不錯的，如果之前的網(wǎng)站沒有找到合適的，可以在這里再次搜尋一下。

別樣網(wǎng)——找圖新歡，旅行日常為主，圖片多為用戶自己上傳，所以在其他地方很少見到

Gratisography——每周都會更新，圖片角度和題材都比較另類，人物圖片不少。

StreetWill——優(yōu)點(diǎn)是圖片都比較精致小眾，缺點(diǎn)是更新慢。

IM FREE——圖片分類詳細(xì)，可按分類進(jìn)行篩選。

Magdeleine——有編輯精選，但圖片濾鏡也比較厚重。

FancyCrave——每天兩張手工篩選精品照片。

精準(zhǔn)找圖梯隊

Flickr

雅虎著名的圖片社區(qū)——Flickr，由于匯集了大批的攝影師，所以Flickr 家的圖片質(zhì)量都相當(dāng)之高，不過你可能會說Flickr 的圖片不都是有版權(quán)的嗎？別急，在「授權(quán)」那里選擇「所有創(chuàng)用CC」或者「允許商業(yè)用途」即可找到那些可以使用的圖片。

ps.由于Flickr 目前沒有簡體中文版，所以搜索時用英文或者繁體中文會得到比較好的結(jié)果。

Google

谷歌的圖片搜索那是相當(dāng)?shù)膹?qiáng)大，選擇右側(cè)的「工具」，可以自定義很多東西，包括大小、顏色及使用權(quán)限。

關(guān)于圖片版權(quán)問題：https://www.yuque.com/docs/share/e61dbdaf-d101-4b19-ad47-0c7d08814041

組件

組件是設(shè)計師在日常設(shè)計工作中，極為常見的內(nèi)容。設(shè)計師除了在完成業(yè)務(wù)需求的的設(shè)計之后，同時需要設(shè)計一套適用于產(chǎn)品的組件庫。

所謂“最佳方案性價比”，就是我們需要在設(shè)計的個性化表達(dá)和資源投入之間找到最佳的平衡點(diǎn)，在關(guān)注出色視覺表現(xiàn)的基礎(chǔ)上，逐漸加強(qiáng)對項目協(xié)同及體驗價值的關(guān)注，逐步形成新的設(shè)計思維模式，也就是組件化思維。

組件化設(shè)計就是把產(chǎn)品需求場景化、視覺表達(dá)模塊化，每個組件基于復(fù)用為目的，使其具備獨(dú)立的完整解決方案，通過標(biāo)準(zhǔn)的規(guī)范組合方式來構(gòu)建整個設(shè)計方案，從而提升設(shè)計效能。

組件化設(shè)計思維3個關(guān)鍵點(diǎn)：

1. 完整組件方案：將組件視為一個獨(dú)立的產(chǎn)品，從多維度，多場景輸出組件的方案和組合標(biāo)準(zhǔn)。

2. 組件化思維：從需求出發(fā)，拆解頁面表達(dá)結(jié)構(gòu)和所需組件。

3. 通用頁面規(guī)則：通用的頁面與組件的柵格體系及替換規(guī)則。

設(shè)計規(guī)范

在產(chǎn)品發(fā)展日趨平穩(wěn)，產(chǎn)品定位和品牌形象都比較確定的時候，參與設(shè)計的人越來越多，統(tǒng)一性和效率的問題漸漸顯現(xiàn)，為了保證平臺統(tǒng)一性，提升團(tuán)隊工作效率，打磨細(xì)節(jié)體驗，這時候就需要我們定義和整理設(shè)計規(guī)范。

確定規(guī)范內(nèi)容

模范大平臺完整規(guī)范體系，針對產(chǎn)品自身情況增刪，整理出我們自己所需要的規(guī)范內(nèi)容。

規(guī)范優(yōu)先級

了解規(guī)范的內(nèi)容有哪些之后，我們需要確認(rèn)的是規(guī)范優(yōu)先級，規(guī)范內(nèi)容龐大復(fù)雜，基礎(chǔ)的、必要的、高性價比的放在第一個版本中，復(fù)雜的向后放，隨著產(chǎn)品的迭代，規(guī)范才會越來越完整。

一個好的規(guī)范應(yīng)該是高效的、簡單易懂的，具體執(zhí)行時，我們應(yīng)該確保分類合理、規(guī)范本身保持一致、布局排版易讀，來提升設(shè)計師查閱的效率；確保定義清晰、描述準(zhǔn)確、場景完備，來幫助設(shè)計師理解和使用，但值得注意的是，設(shè)計規(guī)范并不是“圣經(jīng)”，不要因為規(guī)范而限制了自己的思維，當(dāng)發(fā)現(xiàn)規(guī)范有問題的時候，要及時去修正，而不是做了一次之后，一直沿用，永不修改。

設(shè)計評審

設(shè)計評審是一種可用性測查工具，通常由一個評審員審查設(shè)計方案中的可用性問題。

「設(shè)計評審」一詞頗為廣義，涉及數(shù)種可用性測查方法，且每一種的運(yùn)用因人（評審員）而異、因評審目的而異。常見的設(shè)計評審方法有：

1.啟發(fā)式評估（Heuristic Evaluation）。啟發(fā)式評估的標(biāo)準(zhǔn)是設(shè)計方案需遵循一套設(shè)計原則，比如尼爾森十大可用性原則。

2.獨(dú)立設(shè)計準(zhǔn)則（Standalone Design Critique）。獨(dú)立設(shè)計準(zhǔn)則是（通常以群組對話的形式）對進(jìn)行中的設(shè)計加以分析，以決策設(shè)計方案是否達(dá)成目標(biāo)、體驗友好的一種評估方法。

3.專家評審（Expert Review）。專家評審是指由 UX 專家對網(wǎng)站/或網(wǎng)站部分功能，App 應(yīng)用/App 中部分功能進(jìn)行可用性問題的精細(xì)檢查。很多公司分不清專家評審和啟發(fā)式評估兩者的界限，把專家評審當(dāng)做是比啟發(fā)式評估更加通用的方法也是可以的。

原型交互評審

原型完成后召集至少兩三個設(shè)計師或者對交互比較了解的人，使用并評測原型。你可以將原型所關(guān)注的幾個任務(wù)列出來，以免專家不知道原型哪部分可交互哪部分不可交互。

第一種方法比較常用的評測方法是啟發(fā)式評估法，而這種方法比較常見的標(biāo)準(zhǔn)是尼爾森交互設(shè)計法則（Nielsen Heuristic）。以下是十條尼爾森交互設(shè)計法則：

1、系統(tǒng)狀態(tài)是否可見

2、系統(tǒng)是否符合現(xiàn)實(shí)世界的習(xí)慣

3、用戶是否能自由地控制系統(tǒng)

4、統(tǒng)一與標(biāo)準(zhǔn)

5、錯誤防范

6、減輕低用戶的記憶負(fù)擔(dān)

7、靈活性和效率

8、美觀簡潔

9、幫助用戶認(rèn)知、了解錯誤，并從錯誤中恢復(fù)

10、幫助文檔

第二種常用方法是SUS（系統(tǒng)可用性量表），最初是 Brooke 于1986年編制，量表由10個題目組成，包括奇數(shù)項的正面陳述和偶數(shù)項的反面陳述，要求參與者在使用系統(tǒng)或產(chǎn)品后對每個題目進(jìn)行5點(diǎn)評分。

1.量表公開免費(fèi)。

2.整個量表題目陳述簡單，只需參與者打分，實(shí)施起來很快。

3.測量結(jié)果是介于0-100之間的分?jǐn)?shù)，容易理解。

4.可測量多種用戶界面，比如網(wǎng)頁、手機(jī)、平板等。

SUS(系統(tǒng)可用性量表) 分?jǐn)?shù)

當(dāng)參與者做完一系列任務(wù)后，就可以快速對SUS進(jìn)行打分。然后就需要對每個題目的分值進(jìn)行轉(zhuǎn)換，奇數(shù)項計分采用“原始得分-1”，偶數(shù)項計分采用“5-原始得分”。由于是5點(diǎn)量表，每個題目的得分范圍記為0~4（最大值為40），而SUS的范圍在0~100，故需要把所有項的轉(zhuǎn)換分相加，最終再乘以2.5，即可獲得SUS分?jǐn)?shù)。

將SUS分?jǐn)?shù)換算成百分等級來解釋，百分等級的意思是指測量的產(chǎn)品或系統(tǒng)相對于總數(shù)據(jù)庫里其他產(chǎn)品或系統(tǒng)的可用性程度。

SUS評分參考

從圖中我們可以看出評分達(dá)到70分左右，就可以比市面上一半產(chǎn)品可用性要好，也就是說這個產(chǎn)品的用戶體驗算是合格了。

用戶體驗評審

使用用戶體驗問題記錄表，組織相應(yīng)的評估小組人員，參與評估人數(shù)越多越好，樣本越多越好。為了提升工作效率，可以直接通過發(fā)放記錄表給到評估人員，再統(tǒng)一回收就好。

用戶體驗問題記錄表

包括問題所在位置、對應(yīng)的二十一條可用性原則、嚴(yán)重程度等級、問題描述。

問題分析整理

通過收集用戶體驗問題記錄表，進(jìn)行小組會議討論，把問題總結(jié)歸類，并對所有問題做一個統(tǒng)一的規(guī)范分類。（例可優(yōu)化問題保留，不是體驗問題的舍棄）。

當(dāng)問題總結(jié)歸類完成后，下一步需要引入“用戶體驗八陣圖”來對應(yīng)相應(yīng)頁面，讓我們能夠更直觀的了解到現(xiàn)有項目中精細(xì)到單個頁面中所面臨的用戶體驗設(shè)計問題，這樣一來，可以快速發(fā)現(xiàn)體驗問題最多是哪個頁面？體驗問題最嚴(yán)重的是哪個頁面？體驗問題中哪個模塊的問題最多？等。

用戶體驗八陣圖

中心向外為問題嚴(yán)重等級，依次為：小問題（1）、次要問題（2）、主要問題（3）、災(zāi)難性問題（4），

一一應(yīng)對到「用戶體驗問題記錄表」中的「問題嚴(yán)重等級」。

把收集到的問題以「點(diǎn)」的形式點(diǎn)到對應(yīng)模塊的八陣圖當(dāng)中

優(yōu)化方案

——通過 SUS系統(tǒng)可用性量表知道了產(chǎn)品的整體體驗處于什么水平。

——通過協(xié)作啟發(fā)式評估知道了產(chǎn)品的用戶體驗到底有哪些問題。

——通過最新21條可用性原則知道了如何避免出現(xiàn)體驗問題。

——通過用戶體驗八陣圖知道了哪些模塊最迫切需要優(yōu)化。

更多與設(shè)計評審相關(guān)內(nèi)容：《一個完整的設(shè)計評審流程是怎樣的？來看這篇總結(jié)！》

項目走查

01. 檢查需求

檢查設(shè)計方案是否滿足需求，是否完成了原型設(shè)計中覆蓋的全部設(shè)計點(diǎn)。

02. 檢查規(guī)范

檢查方案排版和對齊是否準(zhǔn)確，產(chǎn)品設(shè)計要檢查控件尺寸字體字號是否符合設(shè)計規(guī)范，運(yùn)營設(shè)計要檢查字體字

號是否符合運(yùn)營設(shè)計規(guī)范。

03. 閱讀順序

產(chǎn)品設(shè)計檢查方案的使用順序是否符合產(chǎn)品使用流程及用戶預(yù)期，運(yùn)營設(shè)計檢查閱讀順序是否滿足運(yùn)營引導(dǎo)用戶閱讀的需求。

04. 視覺表達(dá)

評估設(shè)計創(chuàng)意是否有服務(wù)于設(shè)計目標(biāo)，視覺表達(dá)手法是否處理到位。

切圖與標(biāo)注

當(dāng)界面設(shè)計定稿之后，設(shè)計師需要對圖標(biāo)進(jìn)行切片提供給開發(fā)工程師，切圖與標(biāo)注是為了能夠滿足開發(fā)人員對于效果圖的高度還原需求，直接影響到工程師對設(shè)計效果的還原度。并且也是設(shè)計師重要的輸出物之一。合適、精準(zhǔn)的切圖可以最大限度的還原設(shè)計圖，起到事半功倍的效果。

通常我們只需要對 icon 與圖片進(jìn)行切圖即可，文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的，例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果。

切圖基本規(guī)范

1.切圖的尺寸必須為偶數(shù)

2.同一模塊內(nèi)，切圖大小應(yīng)保持一致

3.如果有背景，盡量用平鋪的背景圖案來設(shè)計（減少程序體積）

4.可點(diǎn)擊的部件要把相關(guān)狀態(tài)都切圖輸出，比如：正常狀態(tài)、點(diǎn)擊狀態(tài)、不可點(diǎn)擊狀態(tài)

5.輸出的切圖應(yīng)當(dāng)盡可能的壓縮大小，以降低APP的總大小，提升用戶使用時的加載速度 (推薦在線壓縮：https://tinypng.com)

6.所有的變形字體把它當(dāng)成icon來切

7.切圖輸出格式：png-24

8.重復(fù)的東西只切一個

切圖輸出類型

1.圖標(biāo)切圖輸出

（1）桌面圖標(biāo)切圖輸出

App的桌面圖標(biāo)會被運(yùn)用在很多不同的地方展示，比如手機(jī)桌面、APP store、手機(jī)的設(shè)置列表，所以app桌面圖標(biāo)需要很多個不同尺寸的切圖輸出。兩個平臺對相應(yīng)桌面圖標(biāo)設(shè)計輸出尺寸也不盡相同，在輸出的時候要把雙平臺的這些尺寸全部輸出切圖。桌面圖標(biāo)切圖只需要提供直角的圖標(biāo)切圖即可，手機(jī)系統(tǒng)會自動生成圓角效果。

（2）系統(tǒng)圖標(biāo)切圖輸出

一套圖適配雙平臺：

iOS平臺（iPhone 6plus版本除外）和安卓平臺公用44*44px切圖素材，即可實(shí)現(xiàn)一套切圖適配兩個平臺的開發(fā)。

適配大屏幕：

為了適配iPhone 6plus、iPhone 7plus，單獨(dú)切一套比原有44*44px切圖大1.5倍的切圖，即66*66px大小的切圖。

（3）APP內(nèi)功能圖標(biāo)：

圖標(biāo)是可以有留白區(qū)域的，建議圖標(biāo)尺寸盡量不要過多。

2.圖片類切圖輸出

圖片類切圖主要是指啟動頁、新手引導(dǎo)頁、默認(rèn)提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的大小尺寸以便于工程師開發(fā)使用。另外一般這些切圖的文件較大在切圖過程中需要控制切圖文件的大小。

全屏類切圖

局部類切圖

3.動效元素切圖

動效元素切圖一般是指在app中加載動效所需要的切圖元素。gif動圖切圖一般分為三種：

（1）只需要給到gif圖動效的部分即可。

△城易logo

（2）導(dǎo)出序列圖片壓縮打包給開發(fā)人員。

（3）導(dǎo)出json ??

Airbnb 開發(fā)了一款動效神器： Lottie，這是一個將 After Effects 動畫提供給任意一個 iOS，macOS，Android 還有 React Native 原生 APP 的文件庫。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件，以 JSON 文件的形式進(jìn)行輸出。Lottie 通過 JSON 格式下載動畫數(shù)據(jù)并實(shí)時提供給開發(fā)者。

相關(guān)鏈接

Lottie官方：Lottie 官方地址

bodymovin：GitHub 地址 (安裝方法：https://www.uisdc.com/lottie-make-loading-animation)

如若安裝不成功，可在下面的網(wǎng)址中下載其他版本插件：

bodymovin版本地址：https://github.com/bigxixi/bodymovin_cn

lottie-ios：GitHub 地址

lottie-android：GitHub 地址?

如何導(dǎo)出 json 動畫文件

打開AE，首選項—常規(guī)，將允許腳本寫入文件和訪問網(wǎng)絡(luò)選項勾選上。

窗口—擴(kuò)展—Bodymovin，選擇好合成和保存路徑后，點(diǎn)擊 Render 導(dǎo)出 data.jason 文件，再把該文件交給 iOS 開發(fā) （其他同理），具體如下圖。

這里設(shè)置選擇 Demo ，可以導(dǎo)出html文件，在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉(zhuǎn)換成圖形形狀。

導(dǎo)出文件

在線測試結(jié)果

可以直接上傳json文件，可以提前知道動畫是否有問題，然后再交付開發(fā)

網(wǎng)址：https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切圖命名規(guī)范

（1）通用切圖命名：組件_類別_功能_狀態(tài)@2x.png

舉例：tabbar_icon_home_default@2x.png（對應(yīng)中文：標(biāo)簽欄_圖標(biāo)_主頁_默認(rèn)@2x.png）

（2）模塊特有切圖命名：模塊_類別_功能_狀態(tài)@2x.png

舉例：bill_icon_search_pressed@2x.png（對應(yīng)的中文為：賬單_圖標(biāo)_搜索_ 默認(rèn)@2x.png）

（3）常用英文單詞表：

標(biāo)注軟件

現(xiàn)如今市場已有很多設(shè)計交互的平臺，如：國內(nèi)的墨刀/藍(lán)湖/摹客等，國外的Figma/invision等，各自都有優(yōu)秀的特點(diǎn)，既滿足交互需求，又能有標(biāo)注切圖功能，選擇適合自己團(tuán)隊的工具與開發(fā)一起協(xié)作即可。

Figma

支持sketch導(dǎo)入，F(xiàn)igma也像Zeplin一樣，標(biāo)注頁面間距與尺寸，并且支持各種圖片格式、尺寸、形態(tài)輸出，開發(fā)人員也有相應(yīng)的代碼可用參考，分享鏈接即可。

墨刀

支持sketch上傳頁面至客戶端，分享鏈接即可。支持多種切圖格式下載，開發(fā)人員也有相應(yīng)的代碼可用參考，操作簡單清晰。

藍(lán)湖

支持軟件PS、sketch上傳在線標(biāo)注，在設(shè)計源文件上切好圖片，開發(fā)人員可在線上下載，且有相應(yīng)的代碼可用參考，分享鏈接即可。

設(shè)計驗證

什么設(shè)計驗證？

當(dāng)設(shè)計稿交付之后，設(shè)計師的工作看似已經(jīng)結(jié)束，但在一個完整的項目流程中，還遠(yuǎn)沒有完成。

除了落地后的視覺走查，設(shè)計師也可以關(guān)注下設(shè)計方案在上線后是否達(dá)到了項目初期所設(shè)定的各項指標(biāo)，如PV、UV、IP等。

達(dá)到預(yù)期的，設(shè)計師可以總結(jié)設(shè)計經(jīng)驗用以提升未來的設(shè)計準(zhǔn)確率；發(fā)現(xiàn)問題的，也可以分析方案的缺陷，在下次改版當(dāng)中進(jìn)行優(yōu)化。而這樣的一個環(huán)節(jié)就是設(shè)計驗證。

數(shù)據(jù)檢驗方法

簡單來說，檢驗方式可以概括為：灰度發(fā)布（A/B Test）和新舊版對比。

1、灰度發(fā)布

灰度發(fā)布即非全量發(fā)布，一部分用戶體驗新版，一部分用戶仍然使用舊版。例如，針對某個新的設(shè)計方案，灰度 20% 的用戶（如 QQ 尾號是 0、1 的用戶）體驗到新的設(shè)計方案，剩下 80% 的用戶依舊使用的是原有設(shè)計。這里以 QQ 尾號為例，當(dāng)然也可以通過手機(jī)尾號，用戶獨(dú)立 ID 等信息來控制發(fā)布比例。

灰度發(fā)布包括了 A/B Test。和灰度發(fā)布不同的是，A/B Test 一般針對兩種不一樣的設(shè)計方案，均分給兩個群體的人使用。如針對 A、B 兩種設(shè)計方案，50% 的用戶體驗到 A 方案，另外 50% 的用戶的用戶體驗到 B 方案。

使用灰度發(fā)布的好處體現(xiàn)在哪里？它可以確保同一時間內(nèi)，由不具備明顯身份屬性差異的隨機(jī)用戶來體驗同一個內(nèi)容和排序下不同設(shè)計方案，規(guī)避了時間因素、產(chǎn)品策略、用戶屬性、內(nèi)容差異，這種情況下得到的數(shù)據(jù)是相對精準(zhǔn)可靠的，灰度發(fā)布的驗證方式更加有針對性。