前言

近年來UI設(shè)計行業(yè)呈爆炸式發(fā)展，眾多科班非科班人員紛紛加入這個行列，從UI設(shè)計師到交互設(shè)計師再到近兩年興起的產(chǎn)品設(shè)計師，行業(yè)對這個崗位的要求由最開始單純的User Interface 美化，逐漸向交互，用研各個方向延伸。此舉必然會淘汰一些人，但卻也指明了設(shè)計師未來職業(yè)晉升途徑，以某個方向?yàn)楹诵那胰姘l(fā)展涉獵廣泛的設(shè)計師，逐漸成為熾手可熱的企業(yè)爭搶對象。成為產(chǎn)品設(shè)計師，將有涉足產(chǎn)品的全鏈路設(shè)計的能力，即參與到整個產(chǎn)品設(shè)計的上中下游，因此有足夠的話語權(quán)為產(chǎn)品體驗(yàn)發(fā)聲，為創(chuàng)造優(yōu)秀產(chǎn)品貢獻(xiàn)價值。最早的UI設(shè)計師更多專注于產(chǎn)品美學(xué)層面的提升，而產(chǎn)品經(jīng)理較之有更優(yōu)秀的邏輯思維能力，在信息架構(gòu)、交互設(shè)計等方面可以發(fā)揮更多作用，這也與其產(chǎn)品主導(dǎo)者的身份相契合。但發(fā)展到現(xiàn)在，產(chǎn)品經(jīng)理將更多精力向業(yè)務(wù)方向拓展，產(chǎn)品交互架構(gòu)層面的工作則分發(fā)下來由誰負(fù)責(zé)？一種公司策略是建立交互設(shè)計師崗位（多見于大型互聯(lián)網(wǎng)公司或重邏輯向的toB類產(chǎn)品企業(yè)），一種則是培養(yǎng)UI設(shè)計師向產(chǎn)品設(shè)計師過度，將交互與視覺合并，修補(bǔ)了以往交互視覺間的斷層。而第二種方案，也為中小公司設(shè)計師提供另一條專業(yè)技能的晉升途徑，從事用戶界面設(shè)計培養(yǎng)出的產(chǎn)品敏感度，融合交互技能以提供更高的視野，實(shí)現(xiàn)技能的提升。

我任職于獵豹移動UX設(shè)計部門，在最近參與了一個為期一周的小程序項(xiàng)目（設(shè)計開發(fā)到上線約一周），負(fù)責(zé)產(chǎn)品設(shè)計中的交互與視覺部分。本文一方面屬于項(xiàng)目總結(jié)，沉淀項(xiàng)目設(shè)計過程中的一些思考，另一方面希望提供一種UI設(shè)計師參與產(chǎn)品設(shè)計上下游的快速有效模型，指導(dǎo)設(shè)計師從一種更廣闊的視角更深入的參與到產(chǎn)品設(shè)計中。

項(xiàng)目特點(diǎn)：此項(xiàng)目總結(jié)起來就是在極其有限的時間內(nèi)產(chǎn)出高質(zhì)量的工作成果，因此完成此項(xiàng)目重點(diǎn)在于如何提高效率。小程序產(chǎn)品限于其自身特點(diǎn)，一般不會采用仔細(xì)打磨孵化的傳統(tǒng)做法，而是快速開發(fā)迭代，敏捷開發(fā)、快速試錯。設(shè)計師如何適應(yīng)越來越快的產(chǎn)品開發(fā)節(jié)奏？如何深入?yún)⑴c產(chǎn)品設(shè)計流程（這里的產(chǎn)品設(shè)計不是指用戶界面設(shè)計，而是產(chǎn)品從戰(zhàn)略層范圍層到交互再到視覺的整個設(shè)計過程）,發(fā)揮自我價值？以及如何跟隨項(xiàng)目不斷提升，在這篇文章中希望你會有所收獲。

目錄

一： 項(xiàng)目難點(diǎn)分析

二： 需求評審流程

三： 設(shè)計執(zhí)行 ? ??

一：項(xiàng)目難點(diǎn)

一.時間有限

?短短一周的開發(fā)時間，除去產(chǎn)品產(chǎn)出文檔以及為開發(fā)人員預(yù)留的時間，設(shè)計師需要在3天內(nèi)完成所有設(shè)計稿的產(chǎn)出。并且快速審核通過后交由開發(fā)，切圖標(biāo)注不允許有失誤。在此前提下，設(shè)計師必須對項(xiàng)目背景，產(chǎn)品交互有足夠的了解，才能以極高的完成度完成界面設(shè)計。? ?

二.多人協(xié)作

大多數(shù)上線產(chǎn)品都需要有多個設(shè)計師來維護(hù)，體量較大的產(chǎn)品甚至?xí)?xì)分多個模塊由單獨(dú)的設(shè)計師負(fù)責(zé)。多人協(xié)作中的協(xié)作方本身沒有困難點(diǎn)，多人協(xié)作的前提是有統(tǒng)一的設(shè)計規(guī)范來規(guī)整不同設(shè)計師的產(chǎn)出，否則會出現(xiàn)設(shè)計稿差異過大，重復(fù)反工事倍功半的情景。因此此項(xiàng)目在啟動之初需要盡早輸出一份通用設(shè)計規(guī)范，此初版規(guī)范用于指導(dǎo)設(shè)計師視覺產(chǎn)出，同時也可以在完善后提供給開發(fā)人員用于設(shè)計數(shù)值的查閱，如顏色、間距、字號等。

三.控件個性化

微信小程序擁有龐大的控件庫，可以支持大部分設(shè)計需求，但產(chǎn)品為追求差異化和視覺質(zhì)量，需要設(shè)計師單獨(dú)設(shè)計所有控件的樣式，如input、時間檢查器等。（真香定律早期患者，打死我從這跳下去也不用默認(rèn)控件）

二：需求評審流程

需求評審是產(chǎn)品啟動的重中之重，所有產(chǎn)品開發(fā)需要涉及到的人員都需要參加，為產(chǎn)品出謀劃策，從自己所從事方向的專業(yè)角度探索需求點(diǎn)以及規(guī)避問題點(diǎn)。在14年谷歌對外分享的產(chǎn)品設(shè)計課中較早的將這一理念推廣開來。

第一次會議

項(xiàng)目啟動之初，公司決策者召開第一場需求評審會，此評審會目標(biāo)為介紹待開發(fā)的產(chǎn)品，并商討可行性及預(yù)估成本。

參會人員：決策者、產(chǎn)品經(jīng)理、開發(fā)人員、設(shè)計人員

會議內(nèi)容

1.首先，由項(xiàng)目leader闡述項(xiàng)目方向、類比數(shù)據(jù)，最終目的在于闡述產(chǎn)品可行性，使參會人員達(dá)成對產(chǎn)品的一致認(rèn)可，制造共同目標(biāo)并建立團(tuán)隊(duì)信心。 概括下來即確定產(chǎn)品可行性，達(dá)成一致。

2.參考競品——腦暴——提出可行的需求點(diǎn)待定——確定最終需求

參考競品：我比較認(rèn)可一個觀點(diǎn)是：參考競品的目的在于產(chǎn)出不低于行業(yè)標(biāo)準(zhǔn)的產(chǎn)品。另一種解釋則是，已上線的產(chǎn)品是用戶已經(jīng)耗費(fèi)學(xué)習(xí)成本去掌握的，因此如非必要，請保持原樣。更多情況下，我們需要借鑒不同競品的多個功能，并最終結(jié)合自家產(chǎn)品特色對其進(jìn)行個性化處理，最終與你的產(chǎn)品的核心功能共同構(gòu)成此產(chǎn)品的整個生態(tài)系統(tǒng)。

腦暴及可行需求點(diǎn)：參考菱形設(shè)計法則，探索多樣需求方案，聚焦可行需求方案。腦暴時無需管可行性，只需要提出并記錄，最終進(jìn)行篩選，選取既契合產(chǎn)品定位又具有可行性的需求點(diǎn)。以我們的產(chǎn)品為例，最終確定以會議提醒為核心功能，考慮到大部分場景是為企業(yè)單位等團(tuán)隊(duì)用戶服務(wù)，用戶實(shí)名制是一件很重要又很棘手的問題。在腦暴過程中，提出了將名片與個人中心合并，以創(chuàng)建個性名片為觸發(fā)點(diǎn)引導(dǎo)用戶完善信息，并由此探索出未來可發(fā)展方向——收集并沉淀產(chǎn)品自身的用戶數(shù)據(jù)，逐漸形成基于此產(chǎn)品的社交圈。后期分享會議可以基于產(chǎn)品內(nèi)部的社交圈，而不必借用微信的接口。省略了分享至好友或群——用戶點(diǎn)擊分享card——確定參會中的第一步，參會人員可以通過小程序通知及時獲得 會議推送。

確定最終需求：需求通過所有參與人員的評審，阻力相對較小，最終由leader拍板，完成最終需求的確認(rèn)。

3.評估工作（前期）

人員配比：初步分配人員配比，幾名開發(fā)人員，幾名設(shè)計師，分別負(fù)責(zé)哪部分工作。

時間成本：由于詳細(xì)產(chǎn)品文檔未出，因此關(guān)于各方時間成本的預(yù)測只能是憑經(jīng)驗(yàn)，并不具備絕對參考價值。產(chǎn)品進(jìn)度卡在產(chǎn)品文檔這一環(huán)節(jié)，當(dāng)務(wù)之急是產(chǎn)品與設(shè)計合作產(chǎn)出文檔乃至交互稿。

第二次會議

產(chǎn)品經(jīng)理與UX設(shè)計師合作完成交互稿的設(shè)計后進(jìn)行。（關(guān)于早期交互原型的產(chǎn)出，雙方要明確定位，在業(yè)務(wù)目標(biāo)與用戶體驗(yàn)?zāi)繕?biāo)兩者間取得平衡。可以合作腦暴加參考競品產(chǎn)出原型交互稿也可以由產(chǎn)品產(chǎn)出業(yè)務(wù)向文檔后交由設(shè)計師完成交互稿的設(shè)計）

參會人員：產(chǎn)品經(jīng)理、開發(fā)人員、設(shè)計人員

在第一次會議中我們明確了業(yè)務(wù)目標(biāo)和用戶體驗(yàn)?zāi)繕?biāo)后，由產(chǎn)品與設(shè)計合作完成了產(chǎn)品設(shè)計計劃，接下來最重要的就是執(zhí)行。因此召開第二次需求評審會，評估各項(xiàng)指標(biāo)及成本。

內(nèi)容

評估工作量： 根據(jù)開發(fā)成本拆分開發(fā)目標(biāo)，敏捷開發(fā)，項(xiàng)目一期以實(shí)現(xiàn)核心功能，保證基礎(chǔ)體驗(yàn)為主。次要功能及高成本功能延后。

設(shè)計師根據(jù)文檔評估——周二至周四給完所有圖。開發(fā)人員給出對應(yīng)開發(fā)時間。

結(jié)論：周末開發(fā)完整個產(chǎn)品 ——提測

三：設(shè)計執(zhí)行

完成方案后，開始執(zhí)行，整個產(chǎn)品迭代遵循計劃-執(zhí)行-檢驗(yàn)-糾正循環(huán)往復(fù)的體系。

設(shè)計規(guī)范的制定

設(shè)計規(guī)范的的一個核心目的在于指導(dǎo)項(xiàng)目開發(fā)人員及設(shè)計人員以更高質(zhì)量和更高效率完成產(chǎn)品設(shè)計。在此基礎(chǔ)上可以進(jìn)行查漏補(bǔ)缺，規(guī)范設(shè)計產(chǎn)出以及開發(fā)者的實(shí)現(xiàn)效果。

不同于我們平時收藏的各大廠輸出的精致龐大的設(shè)計規(guī)范，此類規(guī)范是在產(chǎn)品中后期完成產(chǎn)品規(guī)格的統(tǒng)一后逐漸形成的，需要多人維護(hù)，龐大（內(nèi)容量大，各類設(shè)計元素，從logo到品牌推廣，合作方案等等）細(xì)致（有歸納詳盡的控件及原子級設(shè)計元素）。更適合產(chǎn)品由1到100的過程，而不適合產(chǎn)品自0到1的研發(fā)期場景。

而我所面對的場景是完成本項(xiàng)目設(shè)計需要多人協(xié)作，這一特點(diǎn)要求我必須在產(chǎn)品設(shè)計的伊始完成通用設(shè)計規(guī)范的構(gòu)建。此規(guī)范目的為統(tǒng)一不同設(shè)計師的設(shè)計產(chǎn)出，其作用為指導(dǎo)設(shè)計師設(shè)計產(chǎn)出，由于時間因素等原因，此規(guī)范盡量簡單易用，無法做到全面，但要求高度概括。 在進(jìn)行UI設(shè)計的起始主動制定規(guī)范，表面上限制了設(shè)計師自身的發(fā)揮空間，但保證了設(shè)計的嚴(yán)謹(jǐn)性，而且規(guī)范不是一成不變，靈活運(yùn)用并能夠隨時更新。

以構(gòu)建早期通用設(shè)計規(guī)范為目標(biāo)，我總結(jié)出以下幾項(xiàng)用于指導(dǎo)設(shè)計師，統(tǒng)一視覺產(chǎn)出。

顏色：主色、輔色、異常色 、背景色、分割線色、字體色（主、二級、三級、不可用）

間距與柵格

側(cè)邊距、選項(xiàng)卡距，柵格系統(tǒng)。

間距通用設(shè)計原則，盡量使用4的倍數(shù)，如8、16、24、32。適合大部分移動端屏幕尺寸。設(shè)定好間距梯級層次，以應(yīng)對不同場景下的間隔劃分。

移動端柵格以12列最為常用，以iphone6的750*1334尺寸為例（微信小程序設(shè)計的標(biāo)準(zhǔn)尺寸），左右空余24px，12列列寬44，欄間距16。此柵格能滿足大部分設(shè)計場景。

文字字號

各級標(biāo)題、通用字號、副文案字號、最小字號 ?字號梯級設(shè)定如： 24/ 28/ 30/ 36/ 48。在實(shí)際場景中，針對不是特別龐大的產(chǎn)品，無需采用如25，27等奇數(shù)字號，以4的倍數(shù)構(gòu)建梯級效果最佳。除去字號大小對比，也可以通過改變字體顏色和粗細(xì)來達(dá)到對比或者區(qū)分的效果。

模塊化設(shè)計（后面會詳細(xì)講）

即原子設(shè)計法或者設(shè)計系統(tǒng)？（概括為一種較規(guī)范的設(shè)計方法）主要規(guī)范的方向有兩個。

一：規(guī)范設(shè)計控件，統(tǒng)一設(shè)計元素類別。目的在于通過設(shè)計元素的復(fù)用提高設(shè)計效率，以及統(tǒng)一設(shè)計內(nèi)容的視覺效果，便于構(gòu)建規(guī)范。早期有意識的設(shè)計與構(gòu)建規(guī)范并行，優(yōu)于設(shè)計完成后總結(jié)歸納規(guī)范。

二：遵循開發(fā)者思維進(jìn)行設(shè)計，模擬開發(fā)人員的box實(shí)現(xiàn)原則進(jìn)行控件的設(shè)計。目的在于提高切圖效率及開發(fā)效率更能提高設(shè)計還原度，便于后期維護(hù)。

后續(xù)界面設(shè)計??

一：首頁風(fēng)格確定

由于產(chǎn)品原型與交互稿制作期間，設(shè)計師都有參與，因此對界面布局等結(jié)構(gòu)層和框架層的內(nèi)容都已達(dá)成一致。因此可根據(jù)最終原型直接開展設(shè)計。（如果直接拿到的是產(chǎn)品已經(jīng)產(chǎn)出的原型，設(shè)計師一定要從設(shè)計角度及用戶角度重新審視交互稿。最低要保證不低于競品的體驗(yàn)，走查并避免一些需要學(xué)習(xí)成本的交互，如非必要，請參考上線產(chǎn)品而不是重新設(shè)計交互原則。）

小微會議是一款偏工具型的會議辦公類產(chǎn)品，主打基于微信圈的會議提醒的功能。用戶可以方便的創(chuàng)建會議并通過微信分享的方式發(fā)送至群和個人用戶，提高下發(fā)會議通知的效率，且會議發(fā)起方能清晰的了解到參會情況。

小而簡的功能決定了其設(shè)計風(fēng)格應(yīng)當(dāng)更加傾向簡潔清晰。用色則采取常用的藍(lán)色系，屬于工具類產(chǎn)品高頻用色。定義好配色，間距等規(guī)范后，完成首頁設(shè)計并輸出規(guī)范交由合作設(shè)計師。首頁效果及規(guī)范如下如所示。

二：表單設(shè)計

表單設(shè)計是產(chǎn)品的重中之重，而input項(xiàng)的體驗(yàn)是產(chǎn)品核心體驗(yàn)的重中之重。微信官方提供有完備的控件可以直接使用，但為追求視覺效果及產(chǎn)品差異化，最終決定重新設(shè)計表單組件。設(shè)計表單過程中通過參考各種線上的表單設(shè)計，以及查閱大量表單設(shè)計規(guī)范原則。最終以只問所需、反饋、防錯與糾錯、合理排序?yàn)榛驹瓌t開展設(shè)計。表單設(shè)計體驗(yàn)可以參考此文章：https://www.uisdc.com/the-most-comprehensive-form-design-manual。

只問所需

設(shè)計要做減法，深思熟慮結(jié)合用戶體驗(yàn)和業(yè)務(wù)最終簡化表單輸入項(xiàng)。反思哪些選項(xiàng)卡是必要的，而哪些是次要乃至不需要的。砍掉一部分，再砍掉一部分。如何判斷信息的重要性？如果此信息不予顯示會對用戶造成困擾或中斷用戶進(jìn)行中的任務(wù)，那此信息項(xiàng)是必要信息。

如下圖中的表單首頁，實(shí)際可輸入的信息為會議主題和會議地點(diǎn)。但我們并未提供必填項(xiàng)標(biāo)簽，因?yàn)閺臉I(yè)務(wù)向考慮，我們希望用戶填寫完整的會議主題和會議地點(diǎn)，這樣的會議信息盒子豐滿且體驗(yàn)最佳。而當(dāng)用戶僅填充了會議主題一項(xiàng)后，會議地點(diǎn)填充默認(rèn)字段：待定。

因此，此表單必填項(xiàng)只有一個就是會議主題，經(jīng)過深思熟慮，七個input項(xiàng)及選項(xiàng)卡被簡化至唯一一項(xiàng)作為必填項(xiàng)。

反饋

參考配圖，輸入狀態(tài)應(yīng)與默認(rèn)狀態(tài)作區(qū)分，強(qiáng)化反饋以提示用戶所處位置，這是最基礎(chǔ)的設(shè)計原則，這里無須贅述。

防錯與糾錯

防錯與糾錯是交互設(shè)計中必須要考慮的因素。防錯即防止錯誤的發(fā)生，需要設(shè)計師通過預(yù)測用戶行為，在產(chǎn)品中加入限制，劃定邊界從而防止用戶誤操作導(dǎo)致較差的體驗(yàn)。在《交互設(shè)計第一原則》中提到一個概念——用戶自治，即用戶有權(quán)利自治，即自由的執(zhí)行操作，以自己喜好的方式完成任務(wù)，但在給予自由的同時也要有規(guī)則作為限制，包含規(guī)則的自由才是真的自由。一定的規(guī)則限制只會帶來更好的體驗(yàn)而不會干擾到用戶。如下圖中，未輸入任何內(nèi)容的情況下保存按鈕置灰顯示，從而防止用戶出錯。而當(dāng)用戶在使用過程中已經(jīng)出現(xiàn)錯誤時，應(yīng)當(dāng)給予恰當(dāng)?shù)囊龑?dǎo)以糾正其錯誤，且糾錯包括兩步，告知問題所在，提供解決方案。

合理排序

排序是布局的關(guān)鍵因素，不同產(chǎn)品遵循不同原則進(jìn)行排序。概括來說仍然是亙古不變的兩個方向，即業(yè)務(wù)向和體驗(yàn)向。左上至右下重要性呈遞減趨勢，展示必要信息與功能而隱藏次要信息。以及遵循基礎(chǔ)的格式塔原理，通過不同間距區(qū)分模塊。

三：組件化設(shè)計

當(dāng)下設(shè)計軟件眾多，用戶界面設(shè)計首推sketch，沒有mac機(jī)的同學(xué)也可以使用adobeXD來提高設(shè)計效率。接下來想分享的是sketch的組件功能，能大幅提高設(shè)計效率，減少后期維護(hù)成本，易于形成產(chǎn)品自身高度統(tǒng)一的規(guī)范。此功能極度契合原子設(shè)計法和設(shè)計系統(tǒng)等設(shè)計方法論。（超級傳送門：https://www.uisdc.com/design-systems-reading-notes）實(shí)際操作如下圖。

當(dāng)然組件并不是簡單的將成組的元素再次打包一遍。組件化的關(guān)鍵在于更標(biāo)準(zhǔn)的規(guī)范以及更低的修改和維護(hù)成本。設(shè)計組件需要有宏觀的設(shè)計意識，既考慮當(dāng)下的布局也要考慮設(shè)計的延展性，同時要了解基本的開發(fā)實(shí)現(xiàn)邏輯，比較常用的如下圖的box設(shè)計原則。基于此設(shè)計的組件不僅僅存放于設(shè)計素材庫，更能通過開發(fā)實(shí)現(xiàn)納入代碼組件庫。說夸張些一勞永逸，既方便自己又方便了開發(fā)人員。

除去組件，更小的設(shè)計元素也能規(guī)范化，如字體和顏色。

當(dāng)產(chǎn)品中有多個模塊可復(fù)用時，整理完畢的組件可以大幅提你的設(shè)計效率，同時也保持著設(shè)計規(guī)范，便于切圖與標(biāo)注。開發(fā)場景和設(shè)計場景保持一致，直接對組件進(jìn)行拼接即可。使用組件工作的場景如下。

下面是第一版本小程序整理的組件庫部分截圖。它如何提升工作效率，大可一試，一試便知。

四：發(fā)現(xiàn)問題及應(yīng)對

在設(shè)計進(jìn)行期間難免會出現(xiàn)未曾考慮到的狀況，或走查遺漏的部分。有關(guān)次要的功能或體驗(yàn)可以記錄并傳達(dá)至產(chǎn)品經(jīng)理，留作后期產(chǎn)品迭代時補(bǔ)充。早期版本未完成的任務(wù)條目是最適合的迭代版本啟動項(xiàng)。

當(dāng)這個問題涉及到產(chǎn)品核心功能的核心體驗(yàn)，或者涉及到業(yè)務(wù)目標(biāo)的核心指標(biāo)，那我們必須在當(dāng)下立即解決。一般由產(chǎn)品與設(shè)計師溝通，并將結(jié)果公布于團(tuán)隊(duì)成員，都無異議后更新文檔或郵件。但產(chǎn)品與設(shè)計人員的溝通，一般不會是一帆風(fēng)順的。雙方各司其職，一為體驗(yàn)發(fā)聲，一為業(yè)務(wù)爭執(zhí)。兩種立場本身都沒有錯，需要的是冷靜的溝通，權(quán)衡利弊，最終達(dá)成商業(yè)與體驗(yàn)的平衡。通過合理解釋 條分縷析講清楚問題，促使產(chǎn)品同意修改一些細(xì)節(jié)交互（與產(chǎn)品溝通要以達(dá)成一致為目的，最終大家都以產(chǎn)品目標(biāo)為驅(qū)動，不存在矛盾甚至仇恨，你說服我或者我說服你，最終使產(chǎn)品既能為企業(yè)獲得利潤又能為用戶帶來價值，以一方說服一方或達(dá)成一個共同方案為目標(biāo)，如果雙方始終無法達(dá)成一致，那意味著這個問題很嚴(yán)重，需要更多人的參與進(jìn)行決策。

為產(chǎn)品體驗(yàn)去撕逼是一件在正常不過的事情，爭取更優(yōu)體驗(yàn)，產(chǎn)品以業(yè)務(wù)目標(biāo)為導(dǎo)向，而設(shè)計要為產(chǎn)品本身的體驗(yàn)負(fù)責(zé)，只有爭取才能不斷提升體驗(yàn)，達(dá)成商業(yè)與體驗(yàn)的平衡才是真正的優(yōu)秀產(chǎn)品。正如《About face》中：如果我們設(shè)計的數(shù)字產(chǎn)品能夠讓人們方便的達(dá)成目標(biāo)，他們會感到滿意，提高效率，心情愉快。如此一來人們會高興的購買使用產(chǎn)品，還會推薦別人購買，假使我們能以低成本實(shí)現(xiàn)上述目標(biāo)，就能取得商業(yè)上的成功。