今天，就談談電子商務類網站的單個產品（商品）內容頁。關于內容是說UE，設計是UI；
　　對于一般視覺設計師來講對專業的UE不能很好的去建造，但是不會不怕，怕的就是不會還不去問會的人。至少要學會去理解與比較；理解有不對的地方經由專業的人予以指點，那么就會變的好起來了；就象不要求你會造馬桶，也沒有人要求你會拉粑粑一樣結果不是你也會用馬桶了嗎。這樣才有助于視覺表現的有效性；
　　俺是怎么理解這個頁的？這個頁面是進行交易并產生結果的重要一步，里面會出現較為重要的信息，以促成交易的成功（在有需求的前提下）；諸如：價格運費銷售情況： 售出X 件（查看條評價）、剩 件數、商品類型、所 在 地、瀏 覽 量：xxx等。
　　在產生了較多產品相關信息以后，時候必然存在先后、重次要之分；這里就要看我們首先要了解用戶最需要的是什么，然后要對用戶強調并提供什么最有效的信息，因此就要在布局，顏色，文本排版以及鏈接樣式做一個協調性的配合設計。信息大部分也就是文本排版與設計。
　　1.怎么排版？通常的設計是把展示圖片放在左邊（整體兩攔布局的情況下）產品相關信息放在右邊，在價格表述以后位置出現“立即購買”或者“添加到購物車”的按鈕，在按鈕下面是交易情況。。。而是在整個銷售信息下面才是產品相關的描述。為什么，其實到達這個頁面的人已經有了購買的需求了，一旦有了沖動，選擇購買的機會就會在瞬間產生，這樣的話，我們是有效的利用了沖動和抓住了時機，所以在這里，我們就想辦法盡量縮短給用戶傳達購買理由信息的時間。那就是突出理由，理由的第一位就是價格，然后是運費、銷售情況等。
2.強調誰？怎么強調？在視覺設計上，我們是強調價格、運費、銷售情況這些關鍵詞本身呢？還是強調這些情況的結果或指數？從書寫習慣的邏輯上，如，價格：290 元，我們如果做強調示意的話會可能會這樣做，價格：290元或價格：290元，其實在視覺瀏覽上的信息接受效果可能還不如沒有加粗放大價格：290的效果好（文本以黑色為論），因為它已經占據首要的位置了；而對價格：290元，就不一樣，哪怕我們沒有寫價格兩個字大家也會知道，哦，這個是價格。以次效果為引導的情況下，下面的相關信息都會節約一定的閱覽時間，也就是加速了點擊立即購買、立即預訂按鈕的進程。以此思路延伸的話，其實就是要研究用戶心理的一個過程，在基于這種消費心理的基礎上作為我們，是要強調過程還是結果，結果顯然是強調結果。
3.文本信息內容怎么設計？我們要把用戶閱覽用的描述性文字（有色字除外）的顏色盡量灰一些，這樣可以給單純的文本樣式提供更好的強調空間，如：我么的描述性文本用＃000的黑(大面積得黑色文本與白色背景會產生強對比，特別是液晶顯示器尤其刺眼。)，那么在不改變顏色、 字號、背景樣式的情況下只有加粗火加大字號兩種選擇。而如果是＃666就不一樣了，我們會多出至少4種有效的樣式，會獲得具有節奏感也就是美感的權利。
4.按放在什么位置? 接著就是購買按鈕放在哪兒的？如上述思路，比較贊同有啊和淘寶的做法，為什么？節約時間，促成交易完成。
其實整個設計的結果就是想要達到一個目的：以最快的速度促使交易的完成。至于怎么達到也就是我們要思考與設計的問題。以上分析理解難免偏差，但至少可以作為一個視覺設計師應有具備的，應該多了解一些產品方面的。
此時，我們還要留意到另外幾個問題，產品相關描述信息分類怎么處理？要不要給分類標題加背景？信息分類標題

實例

淘寶商品頁

　　看得出來吧，1.強調價格結果；2.較灰的文本描述，但沒有用加粗的樣式；3.按鈕在價格與促銷下面；
　　按鈕下邊是其它相關信息。對于愿意了解的用戶來說他會更詳盡的了解，這部分其實是老客戶愿意去具體了解，而對于新客戶來說基本是不怎么了解的；因為我第一次在淘寶上買東西的時候就是直接點“立即購買”按鈕，所以這種按鈕的布局，對新用戶尤其有效，而對于電子商務來說，“抓住第一個，就是抓住一大把！！”要不怎么有的人感嘆，我在淘寶上買東西，一不小心怎么怎么了。。。。不光光是價格何物品本身吸引了你哦，哈哈。

有啊商品頁

　　這小子夠陰的吧，他不僅讓你立即購買，還讓你先加入購物車，一賣一大堆啊還想？好像是是比淘寶聰明哦。但是俺覺得設計是好的設計，但在有啊目前來說效果不佳的多好；就像我在沃爾瑪會推個購物車，但在樓下的蘇果俺就不會。不過，好東西還是好東西，以后用得著。

京東商品頁

　　這孩子家蠻有錢的好像，但好像就弱了一點，最讓我不理解的是，干嘛把編號放在最上面？市場價是不是放在京東價下面呢？就像俺們去超市買東西一樣，也是先看到優惠打折的數字，再去翻翻原來的價格比較下，哦，便宜了這么多。 添加到購物車按鈕你看看，我要從一樓跑到二樓在找到，累的氣喘吁吁的，而且看起來還沒有鍋大怎么裝鍋啊？（當然不是大小問題，而是位置）

　　易趣好像也存在類似問題，俺就不多說啦。言多必失。估計以上也有說失的地方啊。但至少俺敢說，呵呵，不怕，有這么多牛人指點。

　　原文：http://gengxipeng.com/?p=392