轉載：2014年流行的手機App小表徵圖介面設計欣賞(1)

標籤：

http://mobile.51cto.com/design-449791.htm

 

2014年前端介面設計流行了很多小元素，其中小表徵圖一定是最受歡迎的元素之一。表徵圖古來有之，但通過設計師的不斷努力和適應時代需求，表徵圖視覺已經發生了重大改變。

      最近，空心表徵圖和實心表徵圖的討論變得激烈起來，有言論指出空心表徵圖在視覺上比實心表徵圖看起來更複雜，更容易讓使用者差生疲勞感和倦怠感。對此，設計師們都各抒己見，一部分人表示贊同這種說法，而另一部分人則表示這樣的言論將問題過分了放大化了，並且在證據方面有所欠缺。

      表徵圖也可以理解為是網站中的一種指引，是每個新使用者都會涉及到的元素，所以無論空心或實心，一個能夠令人一目瞭然，並且記憶深刻的表徵圖才是使用者真正喜歡的表徵圖。

看看下邊一些空心或實心的表徵圖案例，看看你更傾心於哪一款呢？

      1.模糊背景上覆蓋著由簡單線條、字型和單一的顏色組成的空心表徵圖，這會讓整個介面看起來很優雅。不僅如此，這種簡易的設計手法也讓設計師輕鬆不少，在效果和操作上都令大家很滿意。

      2.純色的背景似乎搭配任何元素都能達到令人意想不到的效果，下面這個案例也不例外。正紅色與白色之間的經典配搭，加以可愛的造型，成就了一個俏皮的實心表徵圖設計。介面底部的實心按鈕與幽靈按鈕也與表徵圖地區前後呼應。

      3.APP底部的表徵圖隨著使用者的任意切換，在空心和實心之間自由轉變。實心的表徵圖相比較空心的而言，給人一種更突出和明顯的視覺效果，讓使用者更容易的抓到重點。而主內容左邊的卡通小圖案同時採用了空心的設定，盡顯極簡主義。

      4.Line的介面似乎代表了大多數APP的表徵圖設計方式。頭部和底部的表徵圖選用兩種顏色的實心設計，下拉式功能表部分使用空心表徵圖。這樣的設計雖然比較福士化，但不可否認的是，這樣的做法的確讓整個介面看起來格外整潔。

      5.幽靈按鈕雖然簡潔大方，但是過多的使用會另介面很單調無味，但如果使用全部實心的表徵圖設計又會覺得很突兀。下面這個案例就想出了一個好方法。既然空心實心都不合適，那不如嘗試一下讓兩者結合在一起吧。

      6.兩種色差明顯的顏色搭配在一起會體現出一種自然而然的時尚感，黑色背景和亮黃色的表徵圖元素就是很典型的例子。強烈的對比色會讓空心表徵圖看起來也像實心表徵圖一樣，具有突出重點的效果。

      7.Metro風格的介面設計也能運用在APP的表徵圖模組中，案例中將各種第三方分享平台的實心表徵圖都用方塊元素串連在一起，讓原本單調的表徵圖瞬間活躍了起來，給使用者一種煥然一新的感覺。

     8.傳統的互動中心圖示大多會集中在一個地區內，而SevenEleven的APP在此做了很大的突破，將4個部分分別分布在介面的上下左右，簡單的介面突然有了運動場的氛圍，讓APP充滿了生命力。

     9.天氣類應用的看點中總會有氣候表徵圖的一席之地，正如這個案例中所表現的，這又是一個空心與實心相結合的表徵圖設計。

     10.這也是一個純色塊與實心表徵圖搭配的案例，這個APP的介面設計其實很普通，但正因為表徵圖的設計讓網站變得可愛起來。

轉載：2014年流行的手機App小表徵圖介面設計欣賞(1)