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

       實例

淘寶商品頁

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

有啊商品頁

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

京東商品頁

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

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

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