從交通紅綠燈,看移動產(chǎn)品設(shè)計規(guī)范

0 評論 5421 瀏覽 9 收藏 8 分鐘

過馬路的時候突然注意到紅綠燈,恰好最近的新交通規(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
  3.0設(shè)計過程中我們對整套提示系統(tǒng)再次進行了優(yōu)化,徹底去掉Toast提示,并且將Banner Tips統(tǒng)一為一種樣式,直接挨著導航欄下方。

03
  規(guī)范案例(二):菜單系統(tǒng)

菜單是軟件設(shè)計里中另外一種常見的交互系統(tǒng),我們第一個版本剛出來的時候使用了隱晦的方式(橫滑)設(shè)計菜單,經(jīng)過幾個版本的演進,菜單的出現(xiàn)更加直接、更容易擴展,并對不可操作的異常提供了解釋說明。

04
  iPhoneQQ音樂發(fā)展到現(xiàn)在,儼然是個龐大的產(chǎn)品,有海量樂庫的信息組織、個人音樂資產(chǎn)的管理,基礎(chǔ)的播放操作體驗….

除了上述的信息提示和菜單系統(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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!