DIV CSS 佈局教程網

《用戶研究角度看設計》系列是淘寶的用戶研究團隊在可用性測試之後的點滴思考。在每次與淘寶用戶的直接接觸、觀察用戶的操作之後，作為體驗分析師的我們總是會感慨：“為什麼有些細節設計看似已經很顯眼了，用戶就是沒有注意到？”、“為什麼用戶偏偏要那樣去理解？”、“用戶在那個流程中為什麼陷入困惑，甚至不能完成任務了？”，然後，我們會思考這界面背後的原因，分析用戶當時具體說了什麼，是什麼原因導致用戶那樣理解……這個過程需要非常嚴謹的思考，因為向設計師反饋的任何一個詞語都會導致不同的設計。同時，這個過程也令我們非常享受，如果說設計就是解決問題，在可用性測試之後的分析時間就是分析師的“設計”時光。

我們冀望通過用戶研究角度的思考，帶給設計師一點點啟發，並且將我們在研究中發現的問題，固化在設計模式庫中，以便今後不再出現同樣的問題。當然，作為體驗分析師，我們對交互設計和視覺設計了解得不夠精深，還不能像設計師一樣把握項目中的種種約束，所以，這個系列的內容可能還比較粗淺，更偏重於“商業-技術-用戶”三者中“用戶”這個角色的直接想法。

另外，我們的思考來源於淘寶或其他網站各位設計師的設計，所以，有時可能會拿來作為反例，還請各位設計師見諒。我們盡可能拿自己網站的例子作為反面教材，如果在反例中涉及了您的網站，還請多多包涵。

讓我們開始第一個故事吧——

有一個網頁上典型的細節，它如此細微以至有時設計師在項目的最後時刻才記得擠一個位置給它，但它又如此常見，在不少網站的詳情頁面不經意就出現了；我們在軟件中不常見到它，但在超文本世界裡，在互聯了朋友的世界裡，它卻時而閃現——它就是“復制鏈接”，英文別名是Tell a friend、send to a friend、tip a friend、share、email to a friend或者直接就是URL（如圖1）。作為設計師，你曾經注意過它嗎？

（圖1：youtube ）

它什麼時候出現更合適？

當你想將一個網頁（或網頁中的主體內容)分享給別人的時候，這時它的出現可以節約用戶的時間。

通常，它出現在一個網站的內容詳情頁面，比如視頻網站的播放視頻頁面、博客網站的博客文章頁面、照片網站的照片詳情頁面、購物網站的商品頁面等等。就拿博客網站為例，它的出現似乎在說，“也許你的朋友會對這篇文章感興趣哦，點擊我，然後分享給朋友看看吧！”

使用它時注意什麼

1.不必在一個頁面多次出現

設計師既要在設計過程記著它，但也別太惦念它了。只在需要的時候提供它，即使頁面很長，也沒有必要像“立刻購買”按鈕那樣在頁面的第一屏和最後一屏出現兩次，因為“立刻購買”可以讓用戶進入到下一個步驟完成購買，而“復制鏈接”只是一個次要的任務，大部分為對它感興趣的人使用。

2.相類似的功能具有相同的視覺權重

翻翻看你的網站人物角色（或是網站的點擊日志），他們常用什麼分享給朋友——是通過IM、Email還是其它，那麼請突出最主要的那一個，如果將多個相似的功能平鋪在一起，恐怕會違背“別讓我思考”的原則。看圖2中播放器下面第二排前幾個鏈接：“站外引用”、“發送聊友”、“轉發”，三個功能都具有分享的含義，並混雜在9個鏈接中，我不得不停下來想想，“我要點擊哪一個呢？”

（圖2：某視頻網站 ）

3.不要讓它本身顯得太喧囂

設計它的過程，要記得讓用戶注意得到，或者是在用戶想尋找的時候知道在哪裡尋找，這一點很重要。舉個例子，假如是一篇blog頁面，不要讓“復制鏈接”的 文字大小超過blog正文內容，也不要讓復制鏈接區域太明顯，以至於干擾了最核心的文章內容。

圖3是淘寶社區的一個反例，輸入框和按鈕多在表單中出現，這個組件總是比普通文字要明顯的，它出現在社區內容的底部，可能會干擾用戶對後幾段文字的閱讀。

（圖3：淘寶社區）

另外，在使用輸入框復制的設計中，是不是可以考慮當用戶點擊了輸入框，用腳本自動全選了整個輸入框的內容（例1），而不是讓用戶從左至右按住左鍵拖動鼠標，進行全選。

<input type=”text” id=”foo” />

<script type=”text/javascript”>
document.getElementById(’foo’).onfocus = function() {this.select();}
</script>

（例1）

它出現在頁面的哪個位置？

在可用性測試的准備階段，我們這麼帶著這樣的問題去觀察：“用戶對某個東西感興趣的時候，他知道去哪裡找它嗎？”和“用戶點擊了它之後，他清楚在做（復制或分享）什麼嗎？”，前一個問題意味著它的可尋性（findability）是否足夠好，後一個問題意味著這個位置能不能與他想做的事情聯系起來。

舉個例子，如果用戶想把文章分享給朋友看，那麼將這個功能放置在文章的附近而不是評論的附近更合適。可能這麼說，有些人會想&ldquo

12下一頁