目前比較流行的規(guī)范是Google的Material Design和Apple的ios設(shè)計(jì)規(guī)范。相信很多人在產(chǎn)品落地的過(guò)程中也參考了這兩個(gè)大平臺(tái)的設(shè)計(jì)規(guī)范，但卻依然發(fā)現(xiàn)很難落地到自己的產(chǎn)品上，我們這里就規(guī)范與落地的內(nèi)容做一些探討。
首先我們來(lái)說(shuō)下Material Design/ios設(shè)計(jì)規(guī)范是如何落地到產(chǎn)品上的，這里我整理了一個(gè)結(jié)構(gòu)圖用于講解:
這個(gè)圖來(lái)源于我們平常工作中的產(chǎn)品設(shè)計(jì)落地的流程，產(chǎn)品設(shè)計(jì)落地過(guò)程中可以分為兩塊，一塊是產(chǎn)品層，一塊是設(shè)計(jì)層如下：
我們將產(chǎn)品層的流程與設(shè)計(jì)層的流程梳理清晰之后，可以清晰的了解到我們制定的規(guī)范是到了哪個(gè)環(huán)節(jié)，然后便可以在Material Design或Apple的ios設(shè)計(jì)規(guī)范中挑選出我們需要內(nèi)容，進(jìn)行合適產(chǎn)品自身的優(yōu)化設(shè)計(jì)。
接下來(lái)我們研究個(gè)例子，看看大家熟知的產(chǎn)品－Airbnb。它在2016年初摒棄了ios設(shè)計(jì)規(guī)范，投向了Material design。
我們按照之前梳理的邏輯來(lái)分析一次，按規(guī)范落地結(jié)構(gòu)圖從上至下的分析：
1.首先分析產(chǎn)品的理念：
Google對(duì)Airbnb的設(shè)計(jì)理念的評(píng)價(jià)原話(huà)是這樣的：
“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.”
簡(jiǎn)單的說(shuō)就是產(chǎn)品要清晰高效的讓用戶(hù)達(dá)到目的，所以我們接下來(lái)將Airbnb的設(shè)計(jì)理念定義為“清晰高效”。（這并不是Airbnb的官方定義，僅作為示例用于講解）
2.梳理產(chǎn)品功能
這里大致列舉Airbnb的產(chǎn)品的主要功能：房源列表，按地理位置、入住時(shí)間、入住人數(shù)、評(píng)價(jià)等條件篩選房源、房源詳情、預(yù)定房源、付費(fèi)、評(píng)價(jià)。
根據(jù)這些功能，我們就可以提取出功能中常用的控件與模態(tài)視圖，例如房源列表、時(shí)間選擇器、人數(shù)輸入框等。
3.根據(jù)規(guī)范進(jìn)行合適的調(diào)整。
如時(shí)間控件，airbnb在material design的基礎(chǔ)上，按照清晰高效的設(shè)計(jì)理念做出了調(diào)整。如下：
Airbnb延續(xù)了自己產(chǎn)品的設(shè)計(jì)理念，采用了更大的內(nèi)容來(lái)提升用戶(hù)選擇日期的效率，也采用了更大的字體將信息清晰的呈現(xiàn)給用戶(hù)。同時(shí)在關(guān)閉日歷選擇控件的操作上，保持了與返回按鈕相同的位置，與APP內(nèi)返回操作都在左上角的認(rèn)知設(shè)計(jì)保持了良好的一致性。
在月份翻頁(yè)操作上，Airbnb也追隨了高效清晰的設(shè)計(jì)理念，將點(diǎn)擊的操作改為了上下滑動(dòng)屏幕的操作，更好的適配了移動(dòng)端的操作習(xí)慣，將日期前后更清晰的連接起來(lái)。
在確定按鈕的設(shè)計(jì)上依舊體現(xiàn)了高效清晰的設(shè)計(jì)理念，將按鈕做的更大更易點(diǎn)擊。
在選擇控件上也做了對(duì)應(yīng)的調(diào)整，將控件視覺(jué)設(shè)計(jì)的更大、文字更加明顯，突出選擇結(jié)果的呈現(xiàn)，在開(kāi)關(guān)按鈕上也做了更清晰的反饋。如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
最后做些總結(jié)：
規(guī)范落地的流程和方法大致如上所述，其中整理出設(shè)計(jì)理念非常重要，需要清晰的了解用戶(hù)需求后才可以準(zhǔn)確得出。
后續(xù)的界面布局與控件設(shè)計(jì)都可以根據(jù)設(shè)計(jì)理念對(duì)Material Design / ios基本的規(guī)范進(jìn)行優(yōu)化設(shè)計(jì)，設(shè)計(jì)出更合適本身產(chǎn)品的界面與控件，最終就可以總結(jié)成一整套合適自己產(chǎn)品的設(shè)計(jì)規(guī)范。
以上僅列舉了規(guī)范如何落地到產(chǎn)品的方法與流程，若有更多疑惑或建議，歡迎探討。
謝謝讀到這里 ：）
