用一個個實際的、活生生的案例來說明 & 展現(xiàn) —— 設(shè)計細節(jié)拆分，還原真實的產(chǎn)品設(shè)計、開發(fā)等場景。

這一系列文章，好的設(shè)計，如何一步一步來的，從開始的 “呃～” 到最后的 “哇～”，相信作為教學(xué)例子，也實不為過。

• [5a] Lenovo Welcome，交互設(shè)計；
• [5c] Lenovo Welcome，首頁視覺設(shè)計；
• [5c] Lenovo Welcome，產(chǎn)品頁視覺設(shè)計。

用 PC 端軟件為例子，因為這是我最近做的，記憶尤新，各種小細節(jié)、各種選擇原因都還歷歷在目，講述起來更通俗易懂，并且 UX Design 的本質(zhì)是一樣的，設(shè)計流程也大同小異，無論在電腦端、移動端、還是別的設(shè)備上。

目的：介紹 Lenovo 產(chǎn)品，好看、好用，以吸引用戶成為會員。

設(shè)計團隊：內(nèi)部 Team。

設(shè)計評估并改進：作者本人。

下面各圖為整個過程的終稿版：

接上，交互設(shè)計確定了，首頁視覺設(shè)計確定了，開始產(chǎn)品頁的視覺設(shè)計。

回顧一下首頁視覺設(shè)計的元素：多彩的、精致的，背景是淺淺藍白帶形狀。那么產(chǎn)品頁的視覺設(shè)計，首先要背景圖同中有小異，比如淺淺的形狀位置應(yīng)該不變，兩者“多彩的、精致的”特點要體現(xiàn)。

第一版視覺設(shè)計稿

產(chǎn)品頁下部的所有文字方案交互已經(jīng)設(shè)計好，樣式維持 1.0 版的（夠精致，也符合需求，如下清白背景），要設(shè)計的部分是上部體現(xiàn)產(chǎn)品特性的圖片，以及細調(diào)背景圖。

初稿 —— 不給任何 reference，設(shè)計師先盡情發(fā)揮及想象。

體現(xiàn)產(chǎn)品特性的圖片設(shè)計，很粗糙、元素多、元素拼湊奇怪、元素散亂不成章法、元素的顏色對比偏低、二維與三維體現(xiàn)同時存在、低質(zhì)量的插畫感強烈、圖片占位偏大因而整個界面的留白不夠。

幾何形狀背景圖，在首頁透明度高的情況下不明顯，現(xiàn)在一看，幾何形狀及其顏色都需要微調(diào)，比如：右上角一大片白，幾何形狀不太看得出來，下部顏色偏白偏亮，整體顏色有漸變當然是非常好了，但是若太的太亮?xí)e奪主，反而吸引了用戶視線。

中間內(nèi)容淺白背景有一圈半透明的邊，應(yīng)屬于重復(fù)多余，因為整個界面外圍像首頁一樣就有半透明的邊，而且讓畫面有 “虛” 了的感覺，建議去掉突出重點。

右上角的 “收起” 圖標非常好！大小、顏色、寓意都很贊！

這頁，建議人物去掉，電腦精致化，電腦屏幕上出現(xiàn)的元素可以是管家的主要功能的圖標。

這頁，建議從三維立體改成二維的，否則其它幾頁全都要改成三維的，難度很大。圖片給出的寓意不太能表現(xiàn) “云盤” 的特性，是否有全球、云、快速、電腦、網(wǎng)絡(luò)等等名詞的元素出現(xiàn)？

這頁，寓意和想法是好的，只是各個元素需要精細化，也需有個設(shè)計能把這些元素串聯(lián)起來，讓其看起來是一個整體：

這頁，想法簡單，但其實不錯，需要更細致化，突出 “軟件大全”，顏色使用上要更多更多嘗試：

第二版視覺設(shè)計稿：

有很大的進步，圖片精簡、精致了不少，只是各元素的顏色對比度還是不夠，總感覺它們都弱弱的、弱弱的……

第三版視覺設(shè)計稿

調(diào)整了各元素的顏色，這個過程看似只是挑顏色，但其實很痛苦，而且非常需要時間！同時為了增加對比度及細節(jié)，只要出現(xiàn) “屏幕” 時，都有右斜的高亮，更生動，也統(tǒng)一。

元素間的色彩是互相影響的，能協(xié)調(diào)地搭配在一起，需要很好的審美及感覺，以及大量時間去調(diào)試。

常常會出現(xiàn)：調(diào)了元素 A 覺得好驚艷就它了，然而發(fā)現(xiàn)旁邊之前確定了的元素 B 與 A 配實在糟糕，于是只好再調(diào)整 B，各種嘗試，直到覺得 “誒，這個顏色很不錯”；又或者實在難以為 B 難找到好的顏色，還得返回去調(diào) A 的，或者將 A 與 B 分離得遠點。就是這樣來回、反復(fù)嘗試……

總之，色彩對視覺設(shè)計來說，很要命，又很基礎(chǔ)！

第四版視覺設(shè)計稿

這次的設(shè)計稿并非全部頁面都改進，很多時候一部分一部分來改，作為 Review 者通常會邊看效果邊做決策。

比如：是否這個 style 是想的，如果是，剩下部分就繼續(xù)按這個思維改進，如果不是，那么需要都重新設(shè)計，也許需要其他設(shè)計師的力量加入；

比如：這個 style 改進一些后，效果是否值得再投入更多時間精力去繼續(xù)改進等等。

這頁，全球地圖是白色，好似有點單調(diào)，同時太不突出，因而建議看看有什么別的辦法讓它明顯些。這個改進稿的效果不盡如人意，反而讓全球地圖一眼看過去都不是 “全球地圖” 了……

既然全球地圖不動為好，那么是否地圖上的元素可以變化一下？

這頁，體現(xiàn)殺毒的圖片，有大 logo 是好事，只是聯(lián)想的平板不會預(yù)裝這款殺毒軟件，此處的設(shè)備用平板很不合適，放大鏡的元素也稍稍有點奇怪：

這頁，主要把筆記本改為了臺式機，雖然都是裝在電腦上去，但都用筆記本來表示 “電腦” 就顯得呆板了，當然電腦屏幕上的各圖標顏色還得細調(diào)：

第五版視覺設(shè)計稿

細微調(diào)整，幾何形狀的背景圖也有了大的改進，幾何形狀、顏色、銜接緊密度，等等。

這頁，上版的嘗試效果不好，但設(shè)計師一時沒有更好的方案，只好回復(fù)到第三版設(shè)計稿，同時思索新的設(shè)計。

這頁，因為聯(lián)想殺毒的?Splash 頁中有元素非常好，建議放在這里看看效果。基本看來，效果還不錯，只是顏色對比度還是弱，需要調(diào)整。

但同時發(fā)現(xiàn) “電腦” 的線框用這個顏色樣式非常好看，于是建議圖中有電腦的，都換成此類。

這頁，細化了 “電腦” 的邊框，讓它看起來更細致精致有質(zhì)感。

第六版視覺設(shè)計稿

還是主要調(diào)整了顏色及一些小細節(jié)，比如：殺毒產(chǎn)品頁兩個 “電腦” 對比變化強烈起來，該簡化的簡化，去掉一些繁瑣的邊邊角角；比如：所有 “電腦屏幕” 都是藍色，沒有識別度，是否把其中一些的顏色變化；比如： “電腦” 邊框是一個像素還是兩個像素，顏色有深不淺，不能有虛邊，等等。

第七版視覺設(shè)計稿

主要重新設(shè)計云盤產(chǎn)品頁，讓它生動起來，而不是每個產(chǎn)品頁都有 “電腦” 的重復(fù)元素，亦是讓它更體現(xiàn) “全球、連接、快速、海量” 的特性。

同時加強 logo 在用戶心中的重復(fù)記憶，塑造品牌。

第八版視覺設(shè)計稿

無限接近最終稿，其實是第11版或第12版，因為中間任何時候看到一點瑕疵就馬上改進，比如：

1. 藍色漸變幾何背景圖，出現(xiàn)的每個幾何形狀都經(jīng)過了嚴格的顏色位置調(diào)整。
2. 背景圖由好幾層組成，每層的透明度調(diào)了又調(diào)。
3. 每個兩像素或一像素的邊框都細細查看，是否虛邊，是否倒角圓滑，“電腦” 是否各有特色，等等。
4. 各元素顏色亦是微調(diào)了又微調(diào)，讓其相互搭配又突出重點。

完結(jié)。

后記

寫這樣的文章，一是想還原真實產(chǎn)品的設(shè)計，與開發(fā)的合作，現(xiàn)在重憶，也是一份美好；二是想表達，一個好設(shè)計不是隨便一做就有的，有無數(shù)版的改進，花費無數(shù)時間與精力，結(jié)合了團隊大家的智慧。

請看到文章的人們尊重設(shè)計師，及他們的勞動成果，“隨便幫忙設(shè)計一個界面，設(shè)計一個 Logo” —— 這樣的請求還須慎重。

謝謝大家！ ??

作者：Juner UX，微信公眾號：君樂UX

本文由 @Juner UX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供