良好的交互規(guī)范可以很好的幫助企業(yè)、團隊提高產(chǎn)出,保證用戶體驗。
一. 規(guī)范很重要
規(guī)范和秩序存在于生活的方方面面。不知道大家有沒觀察過,稍微有點規(guī)模的咖啡連鎖店,一般至少會有3位職員,分別負責(zé)收銀點單,制作咖啡,打掃。他們各司其職,高效配合,以保證快速滿足客戶的需求。規(guī)范操作讓其井井有條且高效運作,從日常工作規(guī)范到設(shè)計規(guī)范,都能起到相同的效用。
二. 規(guī)范的效益
規(guī)范的效益 = 提高效率 (內(nèi)容覆蓋率 × 適用性 × 使用人數(shù)) + 保障質(zhì)量 + 統(tǒng)一體驗
規(guī)范可以幫助個人、團隊以及整個企業(yè)提高效率和產(chǎn)出質(zhì)量,保障用戶體驗統(tǒng)一。
舉一個《網(wǎng)易移動端交互規(guī)范》中登錄流程的例子。一名資深設(shè)計師設(shè)計一套詳細完整的登錄流程需要16小時,如果沒有針對性指導(dǎo)或相關(guān)規(guī)范,設(shè)計新人很難考慮周全登錄流程中涉及的防刷機制、自動補全以及各種賬號的異常校驗等細節(jié)。但使用交互規(guī)范后,設(shè)計新人產(chǎn)出一套高質(zhì)量的登錄流程只需4小時,提高效率約75%,同時更保證了產(chǎn)出質(zhì)量。
當然以上僅針對設(shè)計師個人角度的效率提升。從整個企業(yè)而言,針對規(guī)范涉及的所有組件模塊,設(shè)計師以及上下游同學(xué)的每次使用都能解放重復(fù)工作,產(chǎn)生價值。
三. 優(yōu)秀的設(shè)計規(guī)范
有很多優(yōu)秀的例子:Google、Apple、Microsoft這些引領(lǐng)全球設(shè)計風(fēng)尚的公司,設(shè)計規(guī)范已經(jīng)上升為設(shè)計語言,指導(dǎo)旗下所有產(chǎn)品的設(shè)計。國內(nèi)做的優(yōu)秀的案例,比如Ant Design,Element等,像這類的產(chǎn)品已經(jīng)實現(xiàn)了端到端的體驗一致,把交互、前端和視覺的事情一并解決了,是值得學(xué)習(xí)的典范。這些優(yōu)秀的設(shè)計規(guī)范都包含以下幾個特點:
- 靈活 Flexible
- 可拓展 Expansive
- 系統(tǒng)的 Systematic
- 標準的 Standard
四. 規(guī)范制作
規(guī)范系統(tǒng)看似復(fù)雜,但將其大任務(wù)分成一個個小任務(wù),會發(fā)現(xiàn)其實也不是那么困難。以下會告訴大家如何制作交互規(guī)范,主要包含以下內(nèi)容:
- 制作時機
- 規(guī)范流程
- 設(shè)計方法
1. 制作時機
產(chǎn)品初期,從0-1階段。
框架層級
在這個階段,所有的模塊都是新的,所以要定最基礎(chǔ)的框架層級,如下所示:
△ 圖片來源《網(wǎng)易蜂巢交互文檔》
這是我們對web頁面的層級梳理,有底層、內(nèi)容層、導(dǎo)航層、全屏操作層、插件層和模態(tài)彈窗層。搭好基礎(chǔ)框架后,所有的控件組件都會在這個框架內(nèi)搭建,好比房子的框架。這樣做的好處除了方便設(shè)計師自己去清晰的理解系統(tǒng),在與前端開發(fā)交流的時候也十分高效。比如在做模態(tài)彈窗時,如果沒和開發(fā)交流好,開發(fā)同學(xué)將彈窗寫在了全屏操作的位置,那么就有可能出現(xiàn)問題。
柵格系統(tǒng)和常用分辨率
不論是Web端還是移動端,在早期要確定好常用屏幕的分辨率,屏幕尺寸的兼容性。
基礎(chǔ)交互控件
前期產(chǎn)品搭建速度很快,但都是基礎(chǔ)功能,所以在交互組件的選擇上可以和產(chǎn)品同步。如,刷新、Hover樣式、時間顯示、輸入框、對話框和基礎(chǔ)元件庫等。如下所示:
產(chǎn)品穩(wěn)定,成熟階段
當產(chǎn)品逐漸穩(wěn)定,發(fā)展到2.0版本時,我們交互組件庫也同樣隨著產(chǎn)品一步步的進化?;A(chǔ)交互控件會變成復(fù)合型組件和業(yè)務(wù)型組件,數(shù)量也會越來越多。此時需要對各種類型的控件進行分類,比如基礎(chǔ)類、導(dǎo)航類、選擇類等等。為了所有查看交互文檔的人查看方便,我們需要輸出《xx產(chǎn)品交互規(guī)范文檔》之類的指導(dǎo)型文檔。
2. 規(guī)范流程
一旦我們決定制作規(guī)范,就要把規(guī)范當成一個產(chǎn)品去做。去梳理一套高效合理、可復(fù)用的制作流程,去分析產(chǎn)出什么樣的「規(guī)范產(chǎn)品」才能產(chǎn)生最大的價值。
總的來說,可以在以下主流程的基礎(chǔ)上,綜合考慮規(guī)范效益模型的幾個影響因素,落實規(guī)范制作的設(shè)計方案,從而使規(guī)范價值最大化。
明確目的
首先要確立用戶目標和設(shè)計目標,在一條相對完整的產(chǎn)品線上,找出可以和交互設(shè)計規(guī)范有接觸的角色。
如下圖所示,列出來的角色都有可能是我們的目標用戶。比如當交互人力不足時,運營同學(xué)可以通過交互規(guī)范中的組件簡單的搭建出頁面,或者前端同學(xué)在寫頁面時遇到某個通用組件不清晰,直接去查看交互規(guī)范就能解決問題。交互規(guī)范就是為這些「利益相關(guān)者」準備的「設(shè)計說明書」。
不同的角色對于交互規(guī)范有不同的使用場景,可以根據(jù)規(guī)范當前的迭代逐步豐富。理想的狀態(tài)下可以進行較全面的覆蓋。
交互設(shè)計師:打開「交互模板」新建一份設(shè)計稿,設(shè)計過程中使用「組件庫」搭建一些自定義的設(shè)計方案;制作過程中發(fā)現(xiàn)規(guī)范中已有的模板,對照「線上規(guī)范」或「紙質(zhì)規(guī)范手冊」查閱;對于規(guī)范中已有的相似模塊,從「交互稿源文件」中復(fù)制一份到自己的設(shè)計稿進行修改;對于完全相同的模塊,直接標明線上模塊。 因此,要覆蓋交互設(shè)計師的使用場景,可以產(chǎn)出交互模板、組件庫、可使用的源文件、線上和紙質(zhì)手冊等產(chǎn)品,考慮到不同團隊使用的工具不一樣,可以做Axure、和Sketch兩套格式的規(guī)范。
視覺設(shè)計師、產(chǎn)品、運營等:用相同的方法去梳理這些角色的使用場景,主要包含規(guī)范源文件、線上和紙質(zhì)規(guī)范。
前端等:線上和紙質(zhì)規(guī)范、規(guī)范源代碼。
對設(shè)計目的心中有數(shù)之后,就可以開始規(guī)劃具體實施了。
規(guī)范內(nèi)容
規(guī)范具體包含哪些內(nèi)容,目錄要怎么設(shè)計,每項內(nèi)容要交給哪個設(shè)計師去執(zhí)行需要在項目的開始就確定好。
確定規(guī)范內(nèi)容主要分為兩個步驟:
- 根據(jù)產(chǎn)品階段初步判斷需要主要產(chǎn)出哪一類型的規(guī)范,基礎(chǔ)型、復(fù)合型還是業(yè)務(wù)型。
- 在初步規(guī)劃的基礎(chǔ)上明確具體制作哪些組件和模塊的規(guī)范。
明確具體組件時,我們可以通過統(tǒng)計相關(guān)已有產(chǎn)品的通用模塊;問卷或訪談設(shè)計師需求等;頭腦風(fēng)暴方法來收集素材作為規(guī)范的內(nèi)容池。每次迭代按價值和復(fù)雜度的平衡,從內(nèi)容池中篩選一部分模塊進行規(guī)范制作。
設(shè)計語言
為了輸出的統(tǒng)一性,規(guī)范應(yīng)該有自己的基本原則,并圍繞原則進行制作。有點校訓(xùn)、宣言、口號的感覺。以下是舉兩個案例,可供參考。
△ 《網(wǎng)易移動交互規(guī)范》
Aesthetic Integrity 整體美學(xué)、Consistency 一致性、Direct Manipulation 直接操作、Feedback反饋、Metaphors 隱喻 、User Control 用戶控制。──《iOS Design Principles》
規(guī)范的規(guī)范
我們在做規(guī)范,那在設(shè)計規(guī)范時候更應(yīng)該有自己的規(guī)范。每位設(shè)計師都有自己的設(shè)計風(fēng)格,但我們在做同一件事情,需要統(tǒng)一交互文檔內(nèi)的所有內(nèi)容形式,在文檔排版部分,需要統(tǒng)一標題字體、內(nèi)容字體、段落分部、流程鏈接;在交互說明部分,需要包含組件場景、交互流程、用戶行為、交互樣式、界面元素和樣式。下圖參考:
團隊協(xié)作
如果團隊內(nèi)有多個交互設(shè)計師去做設(shè)計規(guī)范,產(chǎn)出物質(zhì)量和統(tǒng)一性就至關(guān)重要。質(zhì)量可以通過加入審核環(huán)節(jié)達到目的,統(tǒng)一性則要依賴協(xié)同以確保各個設(shè)計師的信息以及手中資料同步。
現(xiàn)在的交互原型軟件都是有在線協(xié)同功能,設(shè)置在一個服務(wù)器中就可以。協(xié)同時需要注意,要保留每一次的修改記錄和設(shè)計聯(lián)系方式,修改完畢最好要告知其他設(shè)計師,如果是多個控件組件大改,則需要通知到所有人。如下圖參考:
持續(xù)迭代
在設(shè)計任何產(chǎn)品都不可能一次就完美,在設(shè)計交互規(guī)范時也需要按照優(yōu)先級排期?;A(chǔ)的、必要的放在第一期,復(fù)合型、復(fù)雜的向后放,隨著產(chǎn)品的逐漸完善,我們的交互規(guī)范也會越來越完整。
迭代的時候可以從三個方面入手:
- 每個模塊自身的優(yōu)化。在之前的版本投入使用后可以找用戶收集使用反饋,模塊是否有用,是否通用,能夠提高多少效率,能不能做到直接使用等等,針對反饋意見進行模塊優(yōu)化。
- 豐富模塊。將更多內(nèi)容池中的組件模塊規(guī)范化。
- 更多應(yīng)用場景。經(jīng)過一系列迭代后交互規(guī)范可能進入維護階段,更新頻次降低。這時候就需要將其「產(chǎn)品化」,可能是一本白皮書《交互設(shè)計規(guī)范》,可能是和視覺樣式、前端代碼封裝組合的前端設(shè)計指南,將自己的設(shè)計規(guī)范擴散到更多領(lǐng)域。
推廣使用
規(guī)范要真正有人用才能體現(xiàn)價值,從規(guī)范的效益模型中也能看出,對于團隊和企業(yè)來講,使用規(guī)范的人數(shù)是與規(guī)范帶來的效益是成直接正比的。使用的人越多,越能夠削弱制作規(guī)范的邊際成本。 推廣時(主要是企業(yè)內(nèi)推廣,企業(yè)外推廣就更復(fù)雜了)可以包含但不僅限于以下方法:
- 媒體渠道:宣講會、公司知識論壇、團隊公眾號、海報展架、EDM、手冊。
- 行政渠道:通過各個團隊負責(zé)人進行推廣。
- 個人渠道:規(guī)范使用過程中的口碑宣傳,尤其對于剛進團隊和企業(yè)的新人最為有效。
- 資源互換:與其他規(guī)范,如視覺設(shè)計規(guī)范、前端規(guī)范等綁定推廣,以及相關(guān)團隊內(nèi)部的互相推廣。
3. 設(shè)計方法
前面說了基本的設(shè)計流程,本章會介紹組件的設(shè)計。 在這里套用一個不算過時的方法論——Atomic Design 原子設(shè)計。概念很簡單,就是將復(fù)雜的組合拆解成最小的單元素,再將這些元素重新組合,變成新的分子。原子設(shè)計的五個階段分別是:
- 原子:為網(wǎng)頁構(gòu)成的基本元素。例如標簽、輸入,或是一個按鈕,也可以為抽象的概念,例如字體、色調(diào)等;與我們相對應(yīng)的是基礎(chǔ)元件。
- 分子:由原子構(gòu)成的簡單UI組件。例如,一個表單標簽,搜索框和按鈕共同打造了一個搜索表單分子;與我們相對應(yīng)的是基礎(chǔ)組合控件。
- 組織:由原子及分子組成的相對復(fù)雜的UI構(gòu)成物;與我們相對應(yīng)的是復(fù)合組件。
- 模版:將以上元素進行排版,顯示設(shè)計的底層內(nèi)容結(jié)構(gòu);與我們相對應(yīng)的是模式,各類功能模塊。
- 頁面:將實際內(nèi)容(圖片、文章等)套件在特定模板,頁面是模板的具體實例;最后是整體的頁面。
基礎(chǔ)元組件
以按鈕為例,在描述按鈕狀態(tài)時候按照默認狀態(tài)、觸發(fā)(激活態(tài))、操作反饋、異常狀態(tài)—禁用和報錯、其他樣式。
復(fù)合組件—通用組件
由元組件構(gòu)成的復(fù)合型組件,通用標準,可以在產(chǎn)品業(yè)務(wù)內(nèi)的大部分場景下使用。例如,含有多種內(nèi)容的模態(tài)彈窗。以下圖彈窗為例,屬于頁面層級的最上層,可能包含多個元控件,單行文本,多行文本,單選,復(fù)選等等。
復(fù)合組件—業(yè)務(wù)組件(場景組件)
隨著產(chǎn)品的功能變得越來越復(fù)雜和特殊或需要定制的業(yè)務(wù)需求,就產(chǎn)生了「業(yè)務(wù)專屬組件」這一類型,即通用組件在業(yè)務(wù)場景下的變形。如下圖例,一個下拉控件的進化史:一開始只是普通的下拉選擇控,下拉項增多后直接就添加了搜索功能。業(yè)務(wù)需要同時支持多選,就又添加了多選功能。
模式
此項英文叫Pattern,暫且將其翻譯成「模式」,就是將各種元素進行排版,顯示設(shè)計內(nèi)容結(jié)構(gòu),例如導(dǎo)航系統(tǒng),登錄注冊模塊等。
五. 對交互規(guī)范的反思
上面介紹了交互規(guī)范的主要設(shè)計流程和設(shè)計方法。但做出來只是一個剛剛開始,推廣,運營,維護,迭代等等全是事兒。可能設(shè)計師花了很大力氣做出來,但最終執(zhí)行使用依然不理想。結(jié)合自己參與的產(chǎn)品設(shè)計和后期執(zhí)行,總結(jié)有以下幾個坑:
- 每個設(shè)計師在工作中都有自己的方法習(xí)慣,如果堅持了很久,突然被新的方式代替,會很不適應(yīng)。
- 規(guī)范的維護成本較高,需要設(shè)計師花很多精力去跟進。
- 規(guī)范設(shè)計本身有問題,可能是某個控件的說明有異議,導(dǎo)致其他人不認同。
- 團隊整體溝通不到位,導(dǎo)致執(zhí)行不到位。需要內(nèi)部自上而下的推動。
應(yīng)對以上問題,可以通過以下方式去解決:
首先交互規(guī)范切入的時機要把控好,如果是產(chǎn)品初期,設(shè)計師剛產(chǎn)生對本產(chǎn)品的「認知」,使用度會更高。新人設(shè)計師在缺少經(jīng)驗的時候也十分愿意使用現(xiàn)有的規(guī)范。其次設(shè)計團隊認知高度統(tǒng)一,群策群力,首先要保證內(nèi)部認可,不能單個設(shè)計師「自嗨」。每一條新增或修改都要沒有異議。最后設(shè)計規(guī)范要與前端視覺一起封裝才能發(fā)揮它的終極價值,爭取資源做到最好。
最后要強調(diào)的是,規(guī)范是基礎(chǔ),并不能概括所有場景,隨著產(chǎn)品業(yè)務(wù)的變化,規(guī)范需要迭代更新的,所以在設(shè)計組件時,需要盡量通用和可拓展。設(shè)計師依然需要從業(yè)務(wù)場景出發(fā),在基礎(chǔ)組件上進行調(diào)整和設(shè)計,不能盲目「迷信」規(guī)范,即要以不變的基礎(chǔ)應(yīng)萬變的場景。
六. 總結(jié)
再來回顧一下交互規(guī)范的設(shè)計流程:
- 規(guī)范很重要,可以幫助個人、團隊以及整個企業(yè)提高效率和產(chǎn)出質(zhì)量,保障用戶體驗統(tǒng)一。優(yōu)秀規(guī)范具有靈活、可拓展、系統(tǒng)性、標準性等特點。
- 把控規(guī)范設(shè)計并切入產(chǎn)品的時機和各個階段需要做的事情。
- 規(guī)范設(shè)計流程、目標、設(shè)計內(nèi)容、制定規(guī)范的規(guī)定等注意要點。
- 規(guī)范內(nèi)容設(shè)計方法,運用「原子設(shè)計」的方法論去發(fā)散設(shè)計:基礎(chǔ)通用元件、復(fù)合場景組件、模式等。
- 對規(guī)范的反思,不僅僅是設(shè)計出爐,能落地更加重要。
設(shè)計規(guī)范是工具,提升效率是核心,同時也可以當做標尺,保證設(shè)計稿產(chǎn)出的質(zhì)量和產(chǎn)品統(tǒng)一性。
作者:網(wǎng)易UEDC – 朱子健、蔣蕊遙
全站高品質(zhì)素材免費下載!