電子商務搜尋引擎的細節設計

版權歸作者Alite所有，轉載文章請注明作者與文章出處：http://alite.aliued.cn
最近在使用Apple.com/Ebay.com/Amazon.com/shopping.yahoo.com的時候,發現一些用戶使用細節的小問題.針對這些問題,我體驗了前面四個網站的處理方式,覺得還是有可以借鑒的東西.
針對suggestion的情感化設計細節處理
EBAY.COM：
當用戶覺得不想使用suggestion,或認為suggestion會給他帶來干擾的時候,用戶可以選擇關閉suggestion.( suggestion有的時候可能會切斷用戶的心流,對使用者的心智模型造成影響)
當用戶想重新使用suggestion的時候,仍然可以通過搜索框內右邊的按鈕還原suggestion功能.此時,當滑鼠移到還原按鈕上面時候,為避免使用者不理解按鈕的意義會有一個TIP來顯示按鈕的作用.
YAHOO SHOPPING：
在YAHOO SHOPPING橘黃色框內,我也發現了suggestion可自由關閉的功能.
小結:表面上看,貌似這些功能是錦上添花,但是從用戶情感化設計上考慮,這些功能也能為用戶建立更多的信心,去大膽嘗試並頻繁使用搜索的新功能.
搜索框內容的一鍵清空細節處理
APPLE.COM：
蘋果公司不愧是一家很關注用戶體驗設計的公司,在他們官網搜索功能的細節處理上,真是可見一斑!
當使用者在搜索框輸入關鍵字的同時,會在搜索框的下方出現產品分類的suggestion ,並且在搜索框內部右邊(圖中橘黃色框內) 出現清空搜索關鍵字的按鈕.當使用者輸入關鍵字出錯或對原有已經輸入的關鍵字進行刪除, 重新搜索的時候,都要用(backspace鍵).但如果增加了” 一鍵清空”功能.只要用滑鼠輕輕一點.就解決了反復使用鍵盤backspace鍵的煩瑣操作.對用戶來說這個小小的細節設計,給用戶帶來了很大的方便.
圖中綠色框的內容讓我覺得,蘋果公司的設計師們獨特的設計.使用者會發現搜索框附近沒有確定的按鈕(為了視覺的美觀性與平衡性) , 但用戶可以使用回車鍵,或點擊綠色框的文字鏈一樣可以達到搜索按鈕的作用,這種設計既滿足了視覺的平衡,又滿足了功能的需要.真是Perfect!
原文：http://alite.aliued.cn/archives/590
文章來自BLUEIDEA文章提供BAYSTARS DESIGN網頁設計公司

設計技巧雜談 1

為什麼一張圖片比三張圖片更有力量？如何設計產品使用指南？如何在設計中通過各種對比產生層次感？如何使設計內外統一協調？如何設計一個獨一無二的簽名式 LOGO ？本文繼續發揚實用主義，對這些問題給出了解決辦法。五個設計技巧，開拓你的設計視野。

封面設計：小即是多

當你在設計時手頭上有三張照片，你會如何處理？你會將這三張照片都用上，對吧？其實沒必要！一張照片就已經能夠使設計資訊有效傳達。在這個例子中，校區裡的塔樓就已經能夠傳達出這所學校的本質，比用上三張效果更好！標題單獨一行，文字中的背景顏色區域靜靜地傳達出有關資訊。

設計師有三張照片，但如果在版面上都用上這些照片，那你還要對這三張照片進行剪切，然後將它們擠進版面裡。但出來的效果卻是，這三張照片在版面中的樣式很相似（相似的圖片元素及圖案），文字閱讀起來很費力。所以，設計師又不得不將字體變得很粗，字體變粗後，又要找個地方放置學校的名字，所以在最下方設計師又加上一個紫色區域來突出學校名稱。設計師越“設計”，封面就越虛弱。無論是學校資訊還是所要傳達的文字資訊都在這些複雜的、太多人工痕跡的元素中消失得一乾二淨。封面可以說是成為“被侮辱及被損害”的對象。為什麼會這樣？因為設計師做過頭了！解決辦法：只讓一張圖片來說話！

記住，在設計中，小即是多。學校的塔樓已經可以傳達很多資訊。簡單的居中設計，就是直接讓這張照片“說話”，然後加上文字就行了。注意在上圖中，文字的背景區域並沒有橫跨整個版面，因為我們要讓圖片由上至下都可以流動。而上圖右，學校的主色（紫色）及褐色與樹的綠色形成吸引人的視覺效果，留意這三種顏色在色輪中的位置關係，綠色及褐色是紫色的補色的鄰近色，聽起來很複雜？紫色的補色是色輪中相隔 180 度的草綠色，而草綠色的兩邊鄰近色就是綠色及褐色（留意色輪中的線條）。我們將這種顏色關係稱之為“補色分割”（ Split complementary ）。

文章來自BLUEIDEA
文章提供BAYSTARS DESIGN網頁設計公司