目前比較流行的規(guī)范是Google的Material Design和Apple的ios設(shè)計規(guī)范。相信很多人在產(chǎn)品落地的過程中也參考了這兩個大平臺的設(shè)計規(guī)范,但卻依然發(fā)現(xiàn)很難落地到自己的產(chǎn)品上,我們這里就規(guī)范與落地的內(nèi)容做一些探討。
首先我們來說下Material Design/ios設(shè)計規(guī)范是如何落地到產(chǎn)品上的,這里我整理了一個結(jié)構(gòu)圖用于講解:

這個圖來源于我們平常工作中的產(chǎn)品設(shè)計落地的流程,產(chǎn)品設(shè)計落地過程中可以分為兩塊,一塊是產(chǎn)品層,一塊是設(shè)計層如下:

我們將產(chǎn)品層的流程與設(shè)計層的流程梳理清晰之后,可以清晰的了解到我們制定的規(guī)范是到了哪個環(huán)節(jié),然后便可以在Material Design或Apple的ios設(shè)計規(guī)范中挑選出我們需要內(nèi)容,進行合適產(chǎn)品自身的優(yōu)化設(shè)計。
接下來我們研究個例子,看看大家熟知的產(chǎn)品-Airbnb。它在2016年初摒棄了ios設(shè)計規(guī)范,投向了Material design。

我們按照之前梳理的邏輯來分析一次,按規(guī)范落地結(jié)構(gòu)圖從上至下的分析:
1.首先分析產(chǎn)品的理念:
Google對Airbnb的設(shè)計理念的評價原話是這樣的:
“One of Google’s Ten things we know to be true is “Fast is better than slow.” Airbnb clearly relates to this philosophy, and acts on it by showing respect for their users’ time. Essential tasks are satisfied through precise design, routing users clearly and briskly from sign in, to browsing, to booking a reservation. By neatly segmenting larger goals into smaller steps, Airbnb is able to sidestep the appearance of complexity, making the overall experience feel comfortable.”
簡單的說就是產(chǎn)品要清晰高效的讓用戶達到目的,所以我們接下來將Airbnb的設(shè)計理念定義為“清晰高效”。(這并不是Airbnb的官方定義,僅作為示例用于講解)
2.梳理產(chǎn)品功能
這里大致列舉Airbnb的產(chǎn)品的主要功能:房源列表,按地理位置、入住時間、入住人數(shù)、評價等條件篩選房源、房源詳情、預(yù)定房源、付費、評價。
根據(jù)這些功能,我們就可以提取出功能中常用的控件與模態(tài)視圖,例如房源列表、時間選擇器、人數(shù)輸入框等。
3.根據(jù)規(guī)范進行合適的調(diào)整。
如時間控件,airbnb在material design的基礎(chǔ)上,按照清晰高效的設(shè)計理念做出了調(diào)整。如下:

Airbnb延續(xù)了自己產(chǎn)品的設(shè)計理念,采用了更大的內(nèi)容來提升用戶選擇日期的效率,也采用了更大的字體將信息清晰的呈現(xiàn)給用戶。同時在關(guān)閉日歷選擇控件的操作上,保持了與返回按鈕相同的位置,與APP內(nèi)返回操作都在左上角的認知設(shè)計保持了良好的一致性。
在月份翻頁操作上,Airbnb也追隨了高效清晰的設(shè)計理念,將點擊的操作改為了上下滑動屏幕的操作,更好的適配了移動端的操作習慣,將日期前后更清晰的連接起來。
在確定按鈕的設(shè)計上依舊體現(xiàn)了高效清晰的設(shè)計理念,將按鈕做的更大更易點擊。
在選擇控件上也做了對應(yīng)的調(diào)整,將控件視覺設(shè)計的更大、文字更加明顯,突出選擇結(jié)果的呈現(xiàn),在開關(guān)按鈕上也做了更清晰的反饋。如下:

---------------------------------------
最后做些總結(jié):
規(guī)范落地的流程和方法大致如上所述,其中整理出設(shè)計理念非常重要,需要清晰的了解用戶需求后才可以準確得出。
后續(xù)的界面布局與控件設(shè)計都可以根據(jù)設(shè)計理念對Material Design / ios基本的規(guī)范進行優(yōu)化設(shè)計,設(shè)計出更合適本身產(chǎn)品的界面與控件,最終就可以總結(jié)成一整套合適自己產(chǎn)品的設(shè)計規(guī)范。
以上僅列舉了規(guī)范如何落地到產(chǎn)品的方法與流程,若有更多疑惑或建議,歡迎探討。
謝謝讀到這里 :)