Material Design/ios設計規范如何完美落地

目前比較流行的規范是Google的Material Design和Apple的ios設計規范。相信很多人在產品落地的過程中也參考了這兩個大平臺的設計規范,但卻依然發現很難落地到自己的產品上,我們這里就規范與落地的內容做一些探討。

首先我們來說下Material Design/ios設計規范是如何落地到產品上的,這里我整理了一個結構圖用于講解:

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

產品設計落地過程

我們將產品層的流程與設計層的流程梳理清晰之后,可以清晰的了解到我們制定的規范是到了哪個環節,然后便可以在Material Design或Apple的ios設計規范中挑選出我們需要內容,進行合適產品自身的優化設計。

接下來我們研究個例子,看看大家熟知的產品-Airbnb。它在2016年初摒棄了ios設計規范,投向了Material design。

Airbnb界面截圖

我們按照之前梳理的邏輯來分析一次,按規范落地結構圖從上至下的分析:

1.首先分析產品的理念:

Google對Airbnb的設計理念的評價原話是這樣的:

“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.”

簡單的說就是產品要清晰高效的讓用戶達到目的,所以我們接下來將Airbnb的設計理念定義為“清晰高效”。(這并不是Airbnb的官方定義,僅作為示例用于講解)


2.梳理產品功能

這里大致列舉Airbnb的產品的主要功能:房源列表,按地理位置、入住時間、入住人數、評價等條件篩選房源、房源詳情、預定房源、付費、評價。

根據這些功能,我們就可以提取出功能中常用的控件與模態視圖,例如房源列表、時間選擇器、人數輸入框等。


3.根據規范進行合適的調整。

如時間控件,airbnb在material design的基礎上,按照清晰高效的設計理念做出了調整。如下:

Airbnb延續了自己產品的設計理念,采用了更大的內容來提升用戶選擇日期的效率,也采用了更大的字體將信息清晰的呈現給用戶。同時在關閉日歷選擇控件的操作上,保持了與返回按鈕相同的位置,與APP內返回操作都在左上角的認知設計保持了良好的一致性。

在月份翻頁操作上,Airbnb也追隨了高效清晰的設計理念,將點擊的操作改為了上下滑動屏幕的操作,更好的適配了移動端的操作習慣,將日期前后更清晰的連接起來。

在確定按鈕的設計上依舊體現了高效清晰的設計理念,將按鈕做的更大更易點擊。

在選擇控件上也做了對應的調整,將控件視覺設計的更大、文字更加明顯,突出選擇結果的呈現,在開關按鈕上也做了更清晰的反饋。如下:

---------------------------------------

最后做些總結:

規范落地的流程和方法大致如上所述,其中整理出設計理念非常重要,需要清晰的了解用戶需求后才可以準確得出。

后續的界面布局與控件設計都可以根據設計理念對Material Design / ios基本的規范進行優化設計,設計出更合適本身產品的界面與控件,最終就可以總結成一整套合適自己產品的設計規范。

以上僅列舉了規范如何落地到產品的方法與流程,若有更多疑惑或建議,歡迎探討。

謝謝讀到這里 :)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容