從交通紅綠燈,看移動產(chǎn)品設(shè)計規(guī)范
![](http://image.woshipm.com/wp-files/img/61.jpg)
過馬路的時候突然注意到紅綠燈,恰好最近的新交通規(guī)則也熱火朝天,就順勢吐槽下關(guān)于“設(shè)計規(guī)范”的思考。
提到設(shè)計規(guī)范,很多人都覺得是個很虛、不務實的績效工程,很多企業(yè)為設(shè)計規(guī)范而設(shè)計規(guī)范,拍腦袋定規(guī)則,投了精力進去,面子起來了,最后死掉了。以前也很不情愿去制定設(shè)計規(guī)范,經(jīng)歷多個終端的設(shè)計痛苦后,漸漸明白了設(shè)計規(guī)范“存在即合理”的意義。
紅綠燈的啟示
扯淡之前,還是先回到紅綠燈這個事兒上:
這是再簡單不過的常識,但同樣的思維遷移到設(shè)計上來,會引發(fā)很多有趣的思考。
??吹疆a(chǎn)品設(shè)計團隊經(jīng)常對導航、反饋等交互問題進行激烈討論,雖然多元碰撞是好事,但一旦系統(tǒng)開始龐大,問題也將顯露水面:團隊成員各有創(chuàng)意追求,尤其是視創(chuàng)意如生命的設(shè)計師,對規(guī)則創(chuàng)新的追求更為突出,如果團隊缺少“紅燈停綠燈走”這樣的共識、缺少設(shè)計約束,將導致規(guī)則無序疊加,使得軟件的整體交互變凌亂復雜。
設(shè)計規(guī)范三宗罪
1. 規(guī)范制定時機過早/過遲
小村莊的道路是不需要紅綠燈的,因為壓根用不著,紅綠燈的存在反而限制了人們的自由走動。但卻有那么一類公司,在早期產(chǎn)品野蠻成長、規(guī)模還小的時候,早早制定設(shè)計規(guī)范,花大功夫,卻無人接受,難以執(zhí)行。與過早相對,太遲也不合適,大公司也會犯這樣的錯誤,如google,android在4.0之前出了個相當粗糙、有和沒有一個樣的規(guī)范,等到自家系統(tǒng)跑著很多長iPhone模樣的app時才發(fā)現(xiàn)問題的嚴重。
2. 規(guī)范過于詳盡
紅綠燈是一個特別簡單的“約束”,紅燈停,綠燈走,至于怎么停、怎么走,交給甲乙丙丁自行決定?!秈Phone Design Guideline》的制定者非常有先見之明,他們在撰寫規(guī)范的時候,選擇了一種寬泛的表述方式,沒有定義“點擊按鈕”應該多大、沒有定義“返回按鈕”必須長左上角、沒有定義刪除就非得有一個扔進垃圾桶的動畫…表述越細,限制越大,反而會成為設(shè)計團隊創(chuàng)新的枷鎖。
3. 規(guī)范一成不變
早期的紅綠燈就只有兩種顏色更替,但還是會遇到一定的危險,經(jīng)過不斷的改進才出現(xiàn)了由紅黃綠組成的三色信號燈并一直沿用至今(最近有人冒出來把黃燈給否定了)。紅綠燈也已經(jīng)不是簡單的顏色更替,而是一套完整的信號系統(tǒng),人行道的、車道的、帶方向指示的…設(shè)計規(guī)范同樣如此,當產(chǎn)品變復雜,大到像一只龐然大物如QQ、微信時,為了保證體驗的一致性,規(guī)范會逐漸完善和明晰。規(guī)范的建立是一個長期的過程,寬泛的設(shè)計指引應該與時俱進。
大指引,小規(guī)范
關(guān)于規(guī)范的討論,在這之前就已經(jīng)有很多前輩進行過各種思考激辯,至于執(zhí)行,也會因團隊因項目而各有差異。
以iPhone的產(chǎn)品設(shè)計為例,蘋果官方的《iOS Human Interface Guidelines》(以前叫《iPhone Human Interface Guidelines》)比較系統(tǒng),很多產(chǎn)品設(shè)計直接參考這份文檔去構(gòu)建自己的app,產(chǎn)品生命周期中唯一的設(shè)計規(guī)范也就是這份現(xiàn)成的參考。我們除了會以官方的設(shè)計指引為基本參考,還會根據(jù)項目的需要將設(shè)計規(guī)范細化,以1+1(平臺規(guī)范和應用規(guī)范)的方式整理軟件繁瑣的交互細節(jié)。
規(guī)范案例(一):信息提示系統(tǒng)
提示系統(tǒng)作為軟件設(shè)計中一個小點,很多團隊都不會在意,過去我們有一套比較完整的信息提示系統(tǒng),將提示分成了四類:
![02](https://image.woshipm.com/wp-files/2013/02/1a5ec27a97cf68f3a447cbe042bb402b.png)
![03](https://image.woshipm.com/wp-files/2013/02/f3b148dd48c79e85e1945d31273216d3.png)
菜單是軟件設(shè)計里中另外一種常見的交互系統(tǒng),我們第一個版本剛出來的時候使用了隱晦的方式(橫滑)設(shè)計菜單,經(jīng)過幾個版本的演進,菜單的出現(xiàn)更加直接、更容易擴展,并對不可操作的異常提供了解釋說明。
![04](https://image.woshipm.com/wp-files/2013/02/40ff01c499a4a244fd4004f5c6de2228.png)
除了上述的信息提示和菜單系統(tǒng),我們還對產(chǎn)品的幾個常見交互系統(tǒng)提供了一些簡單的指引,包括:
1. 導航:定義全局導航規(guī)則,包括普通的層級進入、臨態(tài)界面、界面內(nèi)互調(diào)、跨產(chǎn)品互調(diào)
2. 異常處理:如網(wǎng)絡(luò)中斷、內(nèi)容為空時的提醒及引導
3. 品牌傳達:在異常、邊緣情況、產(chǎn)品幻燈片展示方面對音樂品牌的視覺傳達
當然,如果出現(xiàn)某種不能滿足的情況,我們會再重新審視,及時調(diào)整。高效可控的交互體系是應需而變的。
最后,說回投入/產(chǎn)出比的問題,既然大部分自定義的規(guī)范意義都不大(平臺級的規(guī)范除外),何必投入大把精力?其實這種官方規(guī)范之外的小規(guī)范成本非常低,不需要整理成一個完整的樣式庫,只需要簡單地把規(guī)范羅列在一張大圖上,供團隊成員或中間接手的設(shè)計師參考即可。對于節(jié)奏非常敏捷的移動互聯(lián)網(wǎng)產(chǎn)品而言,簡單,才最具生命力。
來源:騰訊CDC
- 目前還沒評論,等你發(fā)揮!