大師級別的UE設計細節

當用戶第一次瀏覽一個網站或使用一個APP時,前5秒異常重要,使用者是關閉它還是繼續使用它也許就在這一瞬間做了決定,除了功能是否滿足外,頁面是否美觀、操作是否傻瓜順暢成爲重要因素。否則,一旦用戶形成了第一印象(沉錨效應),後面再想扭轉將會花費更多的成本。正如Jesse James Garrett所說:“在進行系統設計時,提供優質的用戶體驗是一種重要的、可持續的競爭優勢,往往決定產品的市場走向。”

每個時期都會有不同的設計風格盛行,比如隨着蘋果產品的熱銷,扁平化的注重細節設計的思想也在逐步影響和約束着各行各業的UE設計師,但是真正成爲Master不光要有靈感,還有不可小覷的細節操控能力。正如蘋果設計大師喬納森·伊夫一直秉承的蘋果設計理念:“在蘋果,創新已經是生活的一部分;除此之外,專注細節、遇見問題、決心要解決問題都是十分重要的,是逐日積累的經驗。”

下面就來看看一些大師級別的細節設計,我從國內外衆多優秀的網站案例中,按照不同的設計內容挑選了一些優秀的例子(請原諒我無法在有限的篇幅裏放置更多的優秀案例,只能按類別選取一些更有特點、且風格不一的案例),這些分類包括導航、框架、色彩、搜索、按鈕、視圖、標籤、分類、表單、編輯器、圖片、登錄和註冊、消息和購物車等14個方面。

Ø  1-導航 Navigator

導航是網站信息架構裏最爲重要的設計要素之一,是引導用戶需求的主要方法,也多爲網站的信息架構的頂層設計。比如下面的導航條設計就是一個典型的二級模式,其設計的亮點是在二級導航裏放入一些有價值的信息(LATEST ARTICLES),方便用戶及時瞭解最新的資訊。

這種設計也常常在政府機構的網站裏面可以見到,比如CIA的門戶,只不過二級導航裏添加的是導航分類的詳細解釋和插圖。

eBay的導航設計亮點在於:在顯著的位置添加了MyFeed和eBay Today兩塊內容,突出了對於信息的有效組織和對於用戶所關注內容的細節設計。另外,在二級導航區域,通過放置一些簡約直觀圖標讓商品類目更爲便於識別;在右側放置了大幅的圖片廣告區塊,吸引用戶點擊進入,以提升銷量。

對於企業網站而言導航設計相對簡單,主導航一級足夠了,在不需要多級導航的情況下,有時候需要一些快捷的信息分類引導作爲補充,比如Telefonica網站,就將Global Services放置在網站頂部,採用下拉式的導航設計。這種設計的理由是:一方面這類信息不是最爲核心的內容,但是用戶也會經常使用到;其次,這類信息往往數量繁多,在不常用的前提下不適合放置在頁面的主要顯著位置而影響用戶瀏覽體驗。

並非所有的主導航條都是千篇一律的設計模式,比如TESCO的導航設計,頂部的快捷導航條是功能性的所以被弱化了,而真正的主要導航採用了TAB的方式進行展現,每個TAB標籤頁內部通過左側的二級欄目進行細分引導,而主區域留給了圖片廣告。而TAB在設計上也採用了標題+圖片的方式方便識別。

再看看微軟的導航設計,微軟更注重的是內容引導,比如一級導航劃分爲Shop、Product、Downloads和Support,是非常清晰整潔的分類。在二級導航裏,Shop按照用戶羣體分爲了For Home和For Business,如此一目瞭然,不管從色調、信息架構設計還是軟文,都屬於毫無累贅的極簡設計典範。

當用戶進入Shop後,shop的導航按照產品的分類進行設計,並將主打產品的精美大幅圖片作爲分類的索引放置在頂端,下方是每個產品線的詳細產品細分。

我們再來看看另外一種導航的設計,有些網站純做內容,不願意犧牲頁面寶貴的篇幅去放置導航,因此就藏了起來,比如花瓣,他們將導航隱藏起來放置在頁面的最左上角,用一個小的圖標來示意用戶這裏可以點擊,而導航區域伸展開後,用戶會發現原來網站竟然有這麼多內容分類。

有些網站就不像花瓣那麼隱晦,他們更希望用戶進入網站後就立刻找到要去的地方,比如yoho,採用了電商網站比較流行的主輔導航並行設計模式,頁面頂端是頻道導航(業務線導航),左側按照商品類目(Catalog)或特性(Feature)提供導航。Yoho的導航設計不同在於,在左側同時提供了Photo、市集、STYLEBOOK三類不同的導航匯聚方式,可以說將信息做了深入的挖掘和提煉,這也讓用戶的瀏覽體驗變得更簡單。

AOL的郵箱產品在設計導航時,圍繞功能展開並從用戶的操作體驗上下了不少功夫。在左側是主體的功能導航,比較好的是將搜索放置在導航頂端,第一個不是常用的INBOX功能而是Today on AOL,這是爲AOL的內容服務做推廣。在頂端是常用的二級功能導航條,這些是跟隨左側的主導航而變化的。右側還有一個隱藏的功能導航菜單,將一些不常用到的功能收起並組織在一起,當用戶有需要並點擊後纔會展開。

有些網站喜歡用大幅的圖片作爲背景,這類網站往往希望突出輕鬆休閒的自然或人文氣息,比如Travel+,他們的網站導航是浮在圖片背景上的,這種設計也挺有意思,文字內容很少,但絲毫不缺少讓人嚮往的元素。當然,他們的背景圖片可以是經常變化的,比如配合營銷需要,換上不同地方的旅遊風景圖片。

再看看一些另類的導航設計,比如下面網站就充分的利用了導航的區域,將豐富的推薦內容放置在導航裏面,與其說是導航到不如說更像是一種精彩內容推薦。

下面的網站將導航設計的較爲複雜,包括一級導航,二級導航和分類導航。分類導航MAGAZINE\LIBRARY\SUBSCRIBE和一級導航之間並無邏輯聯繫。而在二級導航裏面,會有一個經典的FIND信息推薦功能。

CFO的網站導航更爲複雜,我理解主要是因爲數據信息量過大而導致分類繁多,作爲該領域的垂直信息門戶,其導航設計按照了信息的類型和專業領域分類來設計多維導航。按照Conferences、Webcasts、Research、Benchmarks、WhitePapers、Video、Blogs、Jobs Training、Newsletters、Magazine等不同信息類型作爲分類依據之一;另外,按照學術範疇劃分了另外一個導航緯度,按照ACCOUNTING&TAX,BANKING&CAPITAL MARKETS,RISK COMPLIANCE等專業域設計了另外一套導航,而且每個具體的業務領域都有一個二級的聚合頁面來歸集並展現這些信息。從設計上看,專業導航是網站的主導航,在其二級導航裏面也放入了LATEST STORIES導讀推薦內容。

下面是Disney的網站,其導航設計的最大亮點是將主導航的具體分類內容做了一個明細的頁面並隱藏起來,在用戶需要的精確瀏覽的時候,點擊導航按鈕Disney.com即可展現這個導航全局視圖,而全局導航視圖和主導航目錄是一一對應的,也是相輔相成的。


還有一些導航的設計重在佈局,比如POPPHOTO,其導航和網站LOGO及搜索框擠在一塊,而且LOGO如此搶鏡,但你絲毫不覺得導航被弱化了。這是因爲在設計時,除了在色彩上的反差處理得當外,字體的大小和間距拿捏的很好,很值得借鑑。

國家地理雜誌的網站導航設計比較有意思的是它右側的SHOP導航,這個應該是網站希望推薦的一個內容,雖然加上了一些劣質的雪花效果,但是展開後還是比較有特點的。比如,他們充分的考慮到用戶的操作習慣,當點擊SHOP時鼠標已經在網頁的右側,則二級導航分類也放置在右側,以減少用戶的鼠標移動距離;主打的產品放置在中間,BestSellers放置在最左側。

麥當勞網站的設計是比較清新和精細的,其主導航和M的Logo相映成輝,這種設計大氣而穩重,二級導航更多的使用圖片來刺激用戶的選購慾望,在圖片中配以醒目的按鈕來提示用戶點擊。還有一個更讚的細節,其導航的顏色是採用的漸變色,上面的主要功能顯得更爲醒目,下面的非主要功能則略顯灰暗,也讓網站顯得層次分明。

還有的導航設計直接使用了字母順序表,這種方式適用於二級導航分類較多的情況。

關於導航,最後看看一些電商網站的經典設計。

天貓的設計突出了商品分類是如何分層展現、如何利用有效空間來配合營銷的複雜設計理念。

新蛋的導航設計中規中矩,但是導航頂部醒目的“BLACKFRIDAY”容易讓用戶找到重點。

亞馬遜的導航設計突出了宣傳的意味,分類下面的軟文都是字字珠璣。

而亞馬遜導航最下方提供了Full StoreDirectory頁面導航鏈接,不管是做商品細分研究還是做類似的交互設計,這個頁面都值得好好的學習。

京東的導航嚴格遵循從左至右,從上至下的習慣約束,也不失爲一種合規的設計。

另外,在站內二級或更低級別的頁面設計時,這類電商網站都會將導航默認收起,在鼠標懸停時展開商品分類導航。

Lightinthebox的導航設計將商品的數量統計出來並顯示在分類名稱的後面。

 

Ø  2-框架 Framework

頁面框架是五層用戶體驗要素模型的核心內容之一,頁面框架的設計決定着信息展現邏輯、設計師的設計思維以及網站的戰略運營需要。

先來看看比較典型的也是較爲流行的一種簡約框架設計,比如SalesForce的企業網站首頁面採用平鋪直敘的單列模式,包括1-頭部(導航、搜索、Logo、註冊登錄等);2-廣告;3-採用TAB方式呈現重要業務信息介紹;4-採用slide左右滑動方式呈現次要的信息內容;5-Footer。

這種垂直的設計被很多設計師所推崇,比如Billboard的網站,1-簡約的頭部設計;2-滾動的圖片頭條;3-最新的滾動文字信息;4-歌曲或歌手的推薦或得獎信息;5-榜單榜首信息;6-相關視頻;7-News and Features。還有WEBPOP網站的設計也是當下較爲流行的一種簡約+灰色調+圖文設計風格。

 

對於交互性更強的頁面,其框架的設計也更爲複雜一些,比如Yammer,其頁面爲三列框架結構,左側是功能導航,中間是信息展現區域,右側是輔助的多個小信息展現區塊。

而對於政府機構的門戶網站,其設計的核心是面向服務和信息公開。比如,首爾市政府的門戶,其頁面框架看起來就非常直觀和溫馨。其採用了兩列的頁面框架佈局,頂層最顯著的是導航和搜索,主體區域左側頂部是圖片新聞,以展現最重要的信息公示,下面是分欄目的最新信息的匯聚,右側上部是常用的服務快捷鏈接,右側下方是重要的視頻信息、服務窗口鏈接,快捷聯繫方式,社交媒體服務帳號等;最下方是相關聯的機構站點的服務地址。

有些網站會採用頭部吸附懸浮的方案,比如當用戶滾動頁面,屏幕下移後,頭部會變窄並吸附在頂部,以懸浮的方式一直存在,有時也會用一些透視效果來處理。以突出頁面的主體內容區域,提升用戶的瀏覽體驗。

下面是懸浮的頭部效果。

採用這種效果的網站還有很多,比如EBONY。



頁面向下滾動後,頭部會懸浮,並將LOGO,日期,廣告等內容做了簡化設計。


還有一些比較cool的頁面框架設計,比如下面的站點就用了橫向的頁面框架,除了左側的信息展現區域固定外,其它整個頁面內容都採用橫向拉伸方式並形成一個整體,需要拖動滾動條進行向右瀏覽,這種體驗讓用戶有翻書或看一部電影的享受。

下面的例子採用左側固定,右側向下滾動的框架設計。

頁面框架的設計主要還是爲內容服務的,這一點BIO設計體現了亮點,其中間的信息廣播條設計採用了抽屜的交互設計框架,當用戶點擊右側的展開按鈕時,TONIGHT的內容會隨即展開。

這些內容如果配上精緻的設計,效果相當的驚豔。當用戶點擊CLOSE SCHEDULE時,此消息面板將被收起。


Ø  3-色彩

UI設計師最顯功力的就是色調搭配,既需要符合企業文化,襯托信息內容,又要高端上檔次,還不能刻意抄襲模仿。所以,這個活做的好真不容易。

這裏舉一些經典的範例,比如綠色的典範BETTERHOMES。

TIME的紅色和簡單的頁面設計風格搭配和諧。

Disney的多彩文化做到了極致。


Parents的紅綠藍三色系色調搭配的有理有條,看起來很個性也很溫暖。

TasteofHome的紅色不僅僅是Logo,包括廣告圖片都做了過渡色的處理,讓網站看起來很統一。

ESSENCE是一個以黑人爲主題的網站,其色調也以黑色爲主色調,當黑色搭配上紫色時,看起來就不那麼單調了。

Shape也是紅色系爲主色調,其搭配的是黑色,看上去也很精緻,符合大部分女性受衆羣體的需要。

VEDA的色調搭配的很有想法,當然他們主推的咖喱風味濃郁的印度菜。

藍色搭上綠色系的設計也很清新。

 

Ø  4-搜索

搜索是網站提供信息導航導航非常有效的一種工具,特別是當網站信息容量比較大時,能夠幫助用戶更好的找到所需要內容。但是,搜索的界面入口設計是看起來簡單其實並不簡單,比如既要設計的醒目,又要符合整體頁面的佈局要求,既要方便用戶輸入又要有良好的交互響應。當然,搜索的準確命中率也是交互體驗的一個硬性標準,只是不放在本文中討論。

這裏推薦一些不同風格的搜索框設計。

先看看簡潔的搜索框設計,微軟的設計總是毫無累贅。

Digg的搜索是隱藏的,點擊後才向左側伸展出輸入框。


SHAPE也是這種設計模式。


YOHO的搜索框支持語音識別輸入。

Linkedin的搜索框設計的比較好,主要是其對搜索內容進行了分類,並提供Advanced搜索功能。

知乎的搜索框設計的最大優勢就是醒目,緊靠LOGO,是最爲聚焦的位置。

當然如果說醒目,知乎和Desina比較,則小巫見大巫了。

滬江英語搜索的特定是雙按鈕,除了搜索按鈕外,添加一個最爲常用的查詞按鈕。

Billboard的搜索框採用的是無框設計,當獲得輸入焦點後會出現搜索的邊框。

 

Ø  5-按鈕

按鈕的設計就像一塊pizza上灑下的配料,可以很無序,也可以讓食者食慾大增。

比如,下面的按鈕設計看起來非常的協調,無疑增加用戶點擊的可能。

還有麥當勞的按鈕和頁面整體設計渾然一體,顯得自然和醒目。

還有下面的這些按鈕設計,也值得推薦。

視圖中的按鈕設計:

   

 

整頁中的按鈕設計:





 

Ø  6-視圖

視圖是頁面中佈局的重要組成部分,視圖設計的風格需要和整體網站風格保持一致,同時有需要體現獨有的性質,比如表格,排行,信息,圖片,分欄,文字,嵌入,調查,焦點,輸入,視頻,表單,人物等。下面就每個不同的風格特性推薦一些優秀的案例。

1-表格:

表格的視圖設計最爲考究,網站看起來是否專業,表格設計是檢驗標準之一。看看下面的兩個經典設計案例。


 

2-排行:

排行視圖是很多內容網站的必須項,設計時如果不拿捏好分寸,會讓視圖失去該有的效果,比如數據量過大顯得臃腫不堪,或信息顯示不完整讓排行失去了該有的價值。下面的幾個排行視圖風格不一,但都是設計的可參考範例。

 

3-信息:

信息列表視圖要求的是文字設計合理,內容條目數量適中,標題和輔助信息項的配合協調。比如下面的視圖設計就非常的簡介清晰,讓讀者看起來體驗良好。


4-圖片:

包含圖片的視圖設計要求圖文搭配協調,讀懂圖片的內容比圖片花哨更重要。

5-分欄:

分欄設計最突出的要求是整潔而不散亂,下面的設計方案可以被借鑑。



分欄還有一些設計細節,包括VIEW MORE和BACKTOTOP的設計。

 

6-文字:

文字放在頁面上,可以很乾癟,也可以很鮮活,比如下面的例子就是正面積極的案例。

7-嵌入:

下面是嵌入Twitter視圖的例子。

8-調查:

這類視圖往往採用最爲簡單直接設計方式,這樣會讓用戶不受干擾而願意參與調查,簡單當然也是最有效的。

 

 

9-輸入:

如果視圖中有需要用戶輸入的內容,可以參考下面的案例設計,細節設計真心不錯。


10-視頻:

下面的兩種視頻視圖設計,配上文字後會讓頁面顯得異常豐滿。

 

11-表單:

表單視圖設計的好不好要看細節,下面的例子設計就非常的細膩,大家可以慢慢的品味。

12-人物:

黑色素描線條的漫畫式人物形象給讀者多了幾分親近感,另外與邊框的色彩及樣式配合看非常搭。

下面這種人物介紹視圖樣式比較流行,大頭白底清新風格照+動態的交互效果,配上信息提示框,很好的設計。

 

Ø  7-標籤

標籤設計也是網站導航的工具之一,特別是以UGC存活的網站和產品,用戶自定義的標籤體系能有效的幫助網站對信息進行組織。

在設計標籤時,需要考慮標籤的輸入和展現兩個方面。

標籤的輸入大都如下面的設計方式,可以自由輸入多個標籤,採用逗號或空格分隔。(注意,標籤的圖標是有行業標準的,可不能亂用)

而標籤的展現則各式各樣,比如:


還有一些較爲個性化的標籤雲設計,比如

除了標籤,這裏特別推薦和標籤意義類似也被常用的一種工具:分享快捷方式。下面的例子設計如果分開看大同小異,但放到網站中卻有着那麼一些點綴的意味。

下面這個案例我認爲設計的很有特點,簡單直觀、看起來很舒適,。


 

Ø  8-分類

當網站存在大量信息條目需要展現時,如何讓用戶擁有良好的瀏覽體驗,就需要用到信息分類設計了。比如常見的電商網站,信息分類網站,信息服務類網站等都避免不了有這類設計,以幫助用戶能逐步漸進的精確找到目標。

先來看看通常的設計模式:搜索框+分類導航+信息過濾和排序工具

有些網站採用了TAB分類設計方式:

還有下面的這種按照銷量和特性來進行二次分類的設計。

當然最爲成熟和複雜的分類設計還要屬電商網站,在商品標準化的基礎上,將各種屬性提煉並作爲信息分類和過濾的依據,在用戶與商品之間搭建了更爲精確的關係橋樑。


 

Ø  9-表單

如果網站需要用戶一次性輸入較多的內容,一般採用分欄、分步驟或情景式的表單設計模式,比如下面的兩個例子分別採用了分欄和分步驟的設計模式。

 


有些表單較爲簡單,但設計師處理細節時很認真,比如下面的表單就設計的比較考究。


還有一些扁平化的表單設計,比如下面的大家可以經常看到的Comments設計。

 

Ø  10-編輯器

富文本編輯器是web2.0網站的必要輸入工具。

比如,知乎的編輯器設計的就非常簡單,除了簡要的格式設置和圖片等多媒體上傳功能外並無其它繁雜特性,這和其網站的內容性質有關係,畢竟提問和回答並不需要太多的輸入特性。

而百度百科的輸入則顯得非常專業,這也和其屬於WIKI這種專業性知識內容的特性有關。

而社交類型的騰訊,其日誌編輯器則加入更多娛樂互動元素,比如信紙、頭像,圖片,音樂等。

而在企業應用中,很多產品都使用了下面的開源編輯器(KINDSOFT和TinyMCE),這類編輯器中規中矩,功能齊全可定製,關鍵還是開源的,所以得到了大量應用。


 

Ø  11-圖片

如何讓用戶在瀏覽圖片時擁有更好的體驗,除了圖片本身的內容和顯示質量外,也需要交互上的精細設計。一般會採用類似下面案例的實現方式,將多組圖片和文字搭配,文字作爲圖片的介紹和導航,採用圖片翻動(用戶也可自由瀏覽)交互方式進行展現。

有些設計更爲細膩,比如下面的例子中,從視圖邊框設計、文字色彩、“ALL”設計、到左右按鈕的設計都非常精緻,讓用戶在進行圖片瀏覽體驗時感覺愉悅。

還有下面的這個Disney例子,如此優質的圖片已經非常吸引人了,再配上圓形的邊框設計,及文字搭配效果,讓人印象深刻。

對於單張圖片的交互設計上,Disney提供了精緻的案例。當鼠標懸停在圖片上,圖片會向右滑動出一個QuickLook的藍色條出來,提示用戶點擊進行快速瀏覽。

還有一些更爲宏大的圖片處理方式,比如下面的MidWestLiving網站,最顯眼的就是中間的大幅圖片瀏覽區域,其設計方式是5張圖片順序排列,當顯示其中一張圖片時,其它四張圖片以半透明方式僅顯示該圖片左側四分之一小區域,就好像不管你看哪張圖片,其它四張都會以背景的方式起到襯托的功效,這的確是非常靚麗的設計。


有些圖片需要作爲商品的展示或介紹用途,這時就需要有一些細節處理,比如,局部放大功能。類似下面的例子,這裏除了需要選擇好背景圖片外,還需關注一些細節,比如右側的放大顯示框的位置在設計時最好不要遮擋商品的主要屬性(商品名稱、價格、打折信息就屬於主要屬性)。

對於社交類網站的圖片處理,除了圖片加載效率要求非常嚴格,在設計時也需要考慮操作便捷,比如騰訊在這方面就做的非常好。圖片瀏覽區域夠大,對於圖片的主要操作放置在顯目的位置,右側一小半空間留給了瀏覽者,可以對圖片發表意見或和作者進行交流。

 

Ø  12-登錄和註冊

我一直認爲登錄和註冊是最反人類的體驗,如果每個網站都要註冊才能登錄,你想想用戶一輩子得浪費多少時間在輸入密碼,記憶密碼、忘記密碼和修改密碼的過程中度過。更何況,用戶還要擔心信息隱私被泄漏,所以需要至少3-5個不同組的註冊帳號和密碼,這太費事了。

回頭來看,雖然反感,且登錄和註冊功能已經毫無新意,但是在交互設計上還是可以精益求精,有一些精彩的例子值得推薦。

比如,at&t的網站,登錄框整體設計看起來顯得很安全。特點在於用了黑色的Title配上黑色的鎖圖標;有着細緻的文字說明提示;對忘記用戶名和忘記密碼都有相應的處理通道。

當你第一次註冊時,at&t會讓你一目瞭然註冊的環節和步驟,並配以詳盡文字和視頻說明鏈接,方便用戶學習如何註冊。

我們再看看salesforce,網站的登錄頁面做的並無大多新意,更吸引我的是登錄後的體驗。

當註冊後第一次登錄時,salesforce會提供多種角色讓用戶選擇,基於不同的角色,系統會提供適合的功能和操作模式,這的確很人性化。

再看看AOL的登錄框設計的很簡約清新,試想一下,不管背景廣告換成什麼色調的圖片,這個輸入框都會搭配的很好。

再看看下面的註冊頁面,設計的中規中矩,看起來很專業。讓註冊的人也更放心。特別是輸入框前面的小圖標,讓整個頁面顯得更爲鮮活和大氣。

還有一些網站允許使用第三方的公共帳號進行本站訪問驗證,比如較爲普遍的facebook帳號,下面就是這種場景的登錄設計。

如果是彈出式的登錄或註冊框,該如何設計,下面是很好的例子。

簡約彈出設計:

精細彈出設計:

簡約和精緻相結合的設計風格:

情景式的註冊頁面,也是很好的設計方法。

還有一些靚麗的設計風格,比如,下面的登錄框就和廣告設計爲一個整體,也非常協調。

還有的網站將登錄框直接放在了頁面頭部,不過一般很少這麼設計。

 

Ø  13-消息

網站上的消息一般可歸於兩種功效:提醒和推廣。

先看看提醒類消息設計,一般包括用戶間的互動類提醒,關注的內容更提醒等等。知乎將提醒消息分作了三類:評論或回答,關注,贊同。

還有一種是推廣性質的消息,比如下面的設計就非常典型,在頁面的頂部搜索框邊上放置一個消息欄,循環滾動網站的推廣信息,讓用戶更容易聚焦。

這種消息欄也可以設計的更獨立,比如下面的例子,在導航和頁面內容之間塞了一個橫向的消息欄。

如果消息是爲了展現一些數據,也可以參考下面的兩個例子。,

 


 

Ø  14-購物車

最後,我們看看購物車的經典設計。

Desina的設計亮點在於圖標設計和醒目的購物數量及價格,並在購物車可以直接刪除不要的商品,並沒有那些隱晦的設計思維干擾,的確是面向用戶的設計。

下面的購物車設計將shipping信息直接顯示出來。

下面購物車設計案例將商品的信息羅列的很詳細,便於用戶在不用點擊查看商品詳情也可以決定是否繼續付款。

當用戶的購物車空無一物時,也許看看有什麼新貨是很好的推薦方法,類似下面的設計。

 

很遺憾還有很多好的設計案例沒有來得及摘入和分析,不過我相信在日後會有更多更好的網站涌現,有一批新的Master設計師出現,讓後來者在設計網站或產品時有更好的設計靈感和借鑑。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章