[譯]怎樣在不犧牲可用性的狀況下轉向扁平化？

2013年12月18號

曾經，網站是各類擬物紋理，各類反光效果，字體各類凹版風格，各類陰影。按鈕看起來就像真的按鈕，菜單就像真的分割的標籤。從那種審美到如今的更自足解析（resolution independent）的界面須要作不少事情。這也是一種由於科技更加多地進入咱們的生活，而使咱們的審美進化。它們比之前任什麼時候候都更加開放，去學習新的功能和交互。做爲設計師，這給了咱們更多自由去探索新的審美，好比扁平化。

可是由於自足解析（resolution independence）和扁平化設計以其崇尚簡約，可拓展的矢量形狀超越光柵圖形，但這並非說你的網站能夠設計爛一點，或者可用性差一點（簡約而不簡單～）。如下這些建議會幫助提升扁平化的審美，而不會被認爲是粗製濫造的設計。

精煉信息架構

我如此之愛扁平化設計是由於它讓我知道了內容的重點在哪裏。有一段時間，咱們一直專一於內容位居其次的現實主義。在扁平化設計裏，界面上沒有那麼多噪音在重要的信息上分散用戶的注意力。可是若是你的信息架構不是很好，這是把雙刃劍。

在首次轉向扁平化充實內容層級的時候要確保可用性。這經常在網站規劃的時候和畫線框圖階段就應該作了。你的網站內容能夠順暢地瀏覽嗎？用戶在網頁中能夠按照他們的方式快速找到下一個動做嗎？一個網站的審美 --- 和是否扁平或者擬物沒有關係，而是和堅實的信息結構相關。

Tweet
Jeffrey Zeldman
@zeldman
Content precedes design. Design in the absence of content is not design, it's decoration.
4:48 AM - 6 May 2008

---

685 RETWEETS 571 FAVORITES

強調可執行的元素

在實施扁平化設計審美的時候一個很重要的可用性強調的是，確保可執行的元素依然看起來能夠點擊。扁平化設計意味這更少的維度，因此在按鈕上粗糙的梯度和濃郁陰影已死。

以上所說的並非，咱們簡單的去掉擬物化設計上的維度而後就收工。擬物化和扁平化解決了不一樣的設計問題，爲了方便設計師和視覺問題解決者，咱們要看看扁平化設計的不一樣點，而且以新的方式指出特殊的可用性重點。

在扁平化設計中經過強調對比，來確保可執行的元素仍然可用。這和顏色，尺寸或者和可執行的元素與不可執行元素的相對位置。在網站中，提供可視的線條關於哪一個元素是用戶能夠與之交互的，當用戶把光標放到該元素上，點擊該元素得時候提供可視的反饋。此次點擊是否成功？或者它正在加載中？這就是一個簡單的hover狀態，或者 CSS3 中細微的動畫。

Exposure uses only a thin border to differentiate actionable elements, but provides strong visual feedback on hover.

Focus Labs‘ new website uses color, contrast, and positioning to differentiate clickable elements, and provide visual feedback on hover with CSS transitions.

Treehouse reserves bright, saturated colors as a way to distinguish actionable elements from non-actionable elements throughout the grayscale user interface.

人性化你的扁平化設計

褪去用戶界面中那些在真實生活中殘留的冰冷的和不招人喜歡的全部衣裳，即使是再名牌的衣裳。雖然這對於可用性來講沒有直接的影響，但它卻會使用戶體驗大打折扣。

經過邀請與你產品相關的還不是本身人的用戶，來確保你的扁平化設計能喚起積極的用戶體驗。要作到這點，就須要大量有內容組織的圖片支撐，來提高扁平化界面設計。這些圖片---不管是圖標，插圖或者照片---都會幫助創造出在別的扁平化環境中有深度的設計。

Mailchimp uses icons, illustrations, and photography to create depth and evoke brand personality.

Squarespace leverages photography as an opportunity to relate to the user.

ohbaby uses blurred imagery in the background to add depth to an otherwise flat environment.

Treehouse uses photography to add depth and personality to their flat design.

前進一步

當你轉向了扁平化設計的審美，不管是否是爲了自足解析（resolution independence）或者僅僅是風格變了一下，必定要一直注意到用戶體驗。這不是簡單地像去除當前有維度的用戶界面元素，也不該該是這樣。經過精煉信息架構，強調可執行的元素，人性化扁平設計，扁平化設計引入了完整的新的一套可用性興趣點。

Source: http://blog.teamtreehouse.com/go-flat-without-sacrificing-usability