視覺設計師關於扁平化表單的想法

當表單趕上扁平化---表單扁平化弊端以及解決辦法

發佈於2013-10-29 15:31閱讀數595

雖然一些人不贊同把扁平化當成一種純粹的時尚但也很多設計師已經擁抱了這種設計風格他們以爲漸變、陰影以及邊框等視覺風格的減小讓整個界面看起來更爲簡潔和清晰。 問題是大部

「 」

閱讀器

扁平化

雖然一些人不贊同把扁平化當成一種純粹的時尚但也很多設計師已經擁抱了這種設計風格他們以爲漸變、陰影以及邊框等視覺風格的減小讓整個界面看起來更爲簡潔和清晰。

問題是大部分扁平化UI構建的重點是內容並不怎麼關注執行的控件。那麼當扁平化遇到表格會是怎麼樣的情形呢

表格相關的事情

說到表格個人意思是說任何交互好比接受產品或者服務時信息的變動包括任何事情好比從網上銀行到移動電子商務從註冊使用新app到運行一個web 搜索。

從用戶需求方面考慮表格設計和內容設計有着很大的不一樣歸納以下

首先表格是關於完成任務的。不少人只是想填完表格來完成註冊或者購買一雙漂亮的鞋子。內容方面有時候完成任務不是咱們優先考慮的咱們也會漫無目的的瀏覽而沒有特定的目的。

用戶完成任務的方式不一樣於瀏覽。咱們觀察一個正在填表格的人發現他們會放大這個區域會查看指南和技巧甚至文字段的標籤和常見問題。這有一個順序從一個地方開始到一個地方結束。用戶會在結束點知道他們是完成了任務仍是失敗了。

另外一方面--內容經常能夠經過多種方法或來源訪問而且人們也會從多種方式關注內容存在着使用的差別性和多樣性。

關注任務完成也意味着用戶可能會只有一次機會填寫你的表格但會屢次查看相關的內容所以用戶不多有機會了解表格的視覺語言好比沒有按鈕只有連接。

扁平化=更少信息

形式和內容是有區別的這和扁平化的UI有什麼關係呢

問題是爲了追求簡單簡潔扁平化UI作的有點過了。對於內容陰影、漸變以及邊框只不過是一些無用的 裝飾品。當閱讀一個多頁新聞時咱們並不在意是經過按鈕仍是連接進入下一頁。但說到表格/形式按鈕和連接之間的區別就重要的多了。

好比表格的「提交」和「取消」操做。這兩個操做的結果顯然是不同的而且咱們想讓用戶快速簡單地使用它來知足本身的需求。這是爲何我和其餘人包括讓人尊敬的設計師Luke Wroblewski)推薦主要的操做提交使用按鈕次要操做取消使用連接。視覺設計並非僅僅涉及美學還跟不一樣功能和相對優先權有關。

下邊是 Klout表單示範了扁平化UI常常遇到的信息遺失問題。把「取消」按鈕放在「提交」以前是個使人討厭的模式但如今先把這個放一邊不談。扁平化UI風格把主要操做和次要操做同時設計爲連接--相同的文本顏色和背景--這會減慢用戶的操做進程他們不得不在執行操做前給予更多關注。

假象一下若是經過視覺設計來傳遞不一樣操做之間的差別效果會如何呢

扁平化表格失敗的三大方式

Klout的例子闡釋了扁平化UI表格在友好型用戶體驗方面的三大失敗之處。

1.功能可見性缺失功能可見性能夠向用戶傳遞對象使用方法的信息好比椅子會傳達邀請你坐下的信息

2.表格元素間的區別不明顯好比字段vs標籤vs說明vs按鈕。

3.表單元素類別的層次結構不足主要按鈕vs次要按鈕。

因爲忽略了合適的交互性所以Klout的「取消」和「提交」操做功能可見性不足。若是「取消」和「提交」操做是有形的按鈕或者至少有下劃線在web上下劃線符合可點擊的慣例那麼它們看起來應該是可點擊的。

表單元素也沒有很好地區分開來惟一在視覺上區分可點擊連接和非可點擊連接文本的是文本的顏色。

涉及到連接的層次方面Klout的例子很是有趣。首先「取消」操做比「提交」操做更明顯既定的規範和固有的心理學認爲用戶但願首先出現的是最多見的選項。但除了這個微妙的區分這兩個連接風格和類型相同但他們的重要性並不同不論是從Klout的角度仍是用戶的角度。

因此當你維護一個扁平化UI時該如何避免這些陷阱呢方法是添加足夠的視覺效果來傳達功能可見性表單元素以及層級。你能夠專一於表單上最重要的元素好比字段和按鈕它們是表格交互性的核心所在。

調整字段和按鈕的設計

若是你把文字段設置成空心的並讓按鈕突出那麼這個扁平化的表格就是可用的。這樣的設計爲元素凸顯了元素的功能可見性並很好地區分了元素。

下面的截圖是 Lowdi speaker購買過程的截圖數量字段和購買按鈕的設計都是扁平化的沒有加入適當的交互若是不仔細查看需鼠標滑過購買數量才能發現用戶不會意識到他們能夠改變購買數量也不會輕易知道點擊哪裏進行下一步。

如下是關於「如何區分展現字段和按鈕的功能可見性」

字段設置

下邊第一幅圖是Hipstamatic的 Oggl 的首屏--註冊表單你得像找復活節彩蛋那樣尋找可鍵入郵箱地址的地方。第二個設計方案在字段周邊添加了邊框把它變成了一個清晰的元素。第三個包含邊框並移除了文本字段的頁面背景。這三個都是扁平化設計風格但很顯然第二個和第三個的功能可見性要好於第一個--尤爲是第三個版本。

當Facebook發佈圖形搜索時也是多番折騰才找到了合適的方法。最初檢索字段沒有任何背景顏色和header bar同樣的藍色結果是用戶沒法找到這項功能。在測試過四個版本後Facebook選擇使用白色背景和輕微內置陰影的設計效果。

平衡按鈕before and after

如下是房地產移動搜索應用左圖是舊版本右邊是可替代的版本但我猜測右邊的設計方式更可用。在舊版本中扁平化的按鈕很容易與標題、頁腳以及其餘內容塊混淆。右圖的設計減小了按鈕的寬度並增長了圓角總體上提高了按鈕的功能可見性。

主要操做vs次要操做

最後不要忘記設計主要操做不一樣於設計次要操做推薦兩個方法

1.主要操做使用按鈕次要操做使用連接。

2.相對於次要操做按鈕在主要操做按鈕上使用更顯著的樣式。

最佳案例實踐方法Fiverr註冊表單上次要操做使用了連接。

Riki Tanone在 Dribbble上的博客中闡釋瞭如何區分主要按鈕和次要按鈕。

更多信息須要更好的可訪問性

你可能注意到一個更實用的直觀的扁平化UI表格會有某種程度的信息冗餘這每每不止是一個視覺設計組件好比顏色信息傳達的差別。相反它多是顏色和形狀或者是顏色和尺寸。

好比顏色 大約12%的人口並不能很好地區分顏色。若是顏色是惟一能夠用來區別不可點擊文本和可點擊連接的「工具」那麼就像上文Klout的表格展現的那樣12%的用戶以爲事情變得很困難。

推薦一種方法就是給必答題/必填選項標記上紅色星號以下圖這樣顏色和形狀共同向用戶傳達了某種信息這樣那些在顏色識別上有缺陷的用戶也能知曉其中的意義。

總結

做爲設計師咱們但願憑藉簡潔清晰建立偉大的用戶體驗。那麼什麼是簡潔清晰它就是用戶準確知道該作什麼以及如何經過最少的努力如何去作。實現這種用戶體驗意味着找到正確的平衡--並僅是爲了扁平化而扁平化。

當說到表格--它意味着減小≠簡單。