国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

• [5a] Lenovo Welcome，交互設計；
• [5c] Lenovo Welcome，首頁視覺設計；
• [5c] Lenovo Welcome，產品頁視覺設計。

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

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

設計團隊：內部 Team。

設計評估并改進：作者本人。

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

接上，交互設計確定了，首頁視覺設計確定了，開始產品頁的視覺設計。

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

第一版視覺設計稿

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

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

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

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

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

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

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

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

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

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

第二版視覺設計稿：

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

第三版視覺設計稿

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

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

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

總之，色彩對視覺設計來說，很要命，又很基礎！

第四版視覺設計稿

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

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

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

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

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

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

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

第五版視覺設計稿

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

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

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

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

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

第六版視覺設計稿

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

第七版視覺設計稿

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

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

第八版視覺設計稿

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

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

完結。

后記

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

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

謝謝大家！ ??

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

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

題圖作者提供