中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

設(shè)計(jì)團(tuán)隊(duì)：內(nèi)部 Team。

設(shè)計(jì)評(píng)估并改進(jìn)：作者本人。

下面各圖為整個(gè)過(guò)程的終稿版：

接上，交互設(shè)計(jì)確定了，首頁(yè)視覺(jué)設(shè)計(jì)確定了，開(kāi)始產(chǎn)品頁(yè)的視覺(jué)設(shè)計(jì)。

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

第一版視覺(jué)設(shè)計(jì)稿

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

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

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

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

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

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

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

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

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

這頁(yè)，想法簡(jiǎn)單，但其實(shí)不錯(cuò)，需要更細(xì)致化，突出 “軟件大全”，顏色使用上要更多更多嘗試：

第二版視覺(jué)設(shè)計(jì)稿：

有很大的進(jìn)步，圖片精簡(jiǎn)、精致了不少，只是各元素的顏色對(duì)比度還是不夠，總感覺(jué)它們都弱弱的、弱弱的……

第三版視覺(jué)設(shè)計(jì)稿

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

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

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

總之，色彩對(duì)視覺(jué)設(shè)計(jì)來(lái)說(shuō)，很要命，又很基礎(chǔ)！

第四版視覺(jué)設(shè)計(jì)稿

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

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

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

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

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

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

這頁(yè)，主要把筆記本改為了臺(tái)式機(jī)，雖然都是裝在電腦上去，但都用筆記本來(lái)表示 “電腦” 就顯得呆板了，當(dāng)然電腦屏幕上的各圖標(biāo)顏色還得細(xì)調(diào)：

第五版視覺(jué)設(shè)計(jì)稿

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

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

這頁(yè)，因?yàn)槁?lián)想殺毒的?Splash 頁(yè)中有元素非常好，建議放在這里看看效果?；究磥?lái)，效果還不錯(cuò)，只是顏色對(duì)比度還是弱，需要調(diào)整。

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

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

第六版視覺(jué)設(shè)計(jì)稿

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

第七版視覺(jué)設(shè)計(jì)稿

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

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

第八版視覺(jué)設(shè)計(jì)稿

無(wú)限接近最終稿，其實(shí)是第11版或第12版，因?yàn)橹虚g任何時(shí)候看到一點(diǎn)瑕疵就馬上改進(jìn)，比如：

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

完結(jié)。

后記

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

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

謝謝大家！ ??

作者：Juner UX，微信公眾號(hào)：君樂(lè)UX

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

題圖作者提供