網(wǎng)站設計

Website development

快速提高設計稿質(zhì)感的實用方法

發(fā)布時間：2016-08-30 10:25:17

　　為什么別人的作品看上去很有質(zhì)感，細節(jié)到位，自己的就平淡無奇，談不上滿意。問題到底出在哪?如何給設計作品后”定妝”，讓終的設計脫穎而出?下面這幾條經(jīng)驗之談(層次、色彩......幫你搞定這個問題。

　　后一公里？后一公里！

快速提高設計稿質(zhì)感的實用方法.jpg

　　后一公里「Last Kilometer」這個概念，早是拿來形容公共交通末梢的問題。后來各個行業(yè)都開始用，就逐漸引申為完成一件事后且關鍵性的一步。(通常很棘手，但如果解決得當就能為整件事形成完美的閉環(huán))而在設計領域里，云智認為這「后一公里」的問題，恰恰就落在終項目的呈現(xiàn)上。

　　你可曾想過這么一個問題：自己設計書看的不少，”設計大?！钡奈恼乱黄宦?，工作幾年經(jīng)手的項目不說多有難度，至少數(shù)量上也很足夠了，照理說”設計經(jīng)驗”很豐富?？蔀槭裁垂?dribbble、behance、FWA 時，總能明顯感覺到，明明風格相近，別人的作品看上去很有質(zhì)感，細節(jié)到位，自己的就平淡無奇，談不上滿意。問題到底出在哪?

　　不光是剛?cè)腴T的設計師會有這樣的困惑，就連”身經(jīng)百戰(zhàn)”的資深設計師，也會面臨類似的瓶頸，只是深度不同。

　　所以，如何settle、如何給設計作品后”定妝”，讓終的設計脫穎而出?

　　下面這幾條經(jīng)驗之談能幫你搞定這個問題。

　　一、層次

　　層次分平面和縱深。任何一個設計師，都應該充分意識到，有節(jié)奏的層次變化，能在用戶內(nèi)心產(chǎn)生微妙的化學反應。

　　我們來舉個栗子。

　　這是一個簡單的底圖+文字(背景是卡塔爾航空)，沒有任何特別之處。然而卻問題多多，不趕緊補救一下，根本拿不出手。首當其沖的是平面版式的層次，全部內(nèi)容堆到一起，丟失視覺重心;其次是畫面沒有縱深感，稍作停留就覺得乏味。

　　「Before」

　　理一下思路，我們可以從這幾個地方入手：

　　一級標題、二級標題、正文的強弱層次區(qū)分開;

　　沿著左側(cè)的機翼割裂方形框，形成縱深感;

　　來看看效果：

　　「After」

　　看出區(qū)別了嗎。按照剛才的思路稍作修改，是不是立刻煥然一新。

　　原理很簡單：

　　通過后期將畫面中的元素突出或弱化，人為的制造出視覺差，大大增強畫面的立體感。

　　「畫面元素在人眼中呈現(xiàn)的先后次序」

　　在設計中多多運用這樣的技巧，給自己的設計制造富有節(jié)奏的層次感，結果可能就大有不同。

　　是為「設計后一公里」之層次。

　　二、色彩

　　色彩一定要花功夫調(diào)整，否則可能原本不錯的設計稿因為顏色用的不夠“正”，就被可憐的打入冷宮。

　　我們來看這幅圖：

　　毫無疑問，肯定是后者更舒服?可是凡事要多問為什么，我們把畫面的顏色提取出來看看：

　　左側(cè)的色樣超過10種，右側(cè)的色樣不過3種。

　　永遠記住，在絕大多數(shù)沒有把握的情況下，要嚴格控制畫面中顏色的數(shù)量，否則很容易擦槍走火。

　　再來看另外一個栗子：

　　同樣的，將顏色提取出來，對應至色輪：

　　發(fā)現(xiàn)癥結所在了嗎?

　　什么樣的產(chǎn)品，就運用什么樣的顏色組合。

在設計選色上，自己總結了4種辦法，效率非常高(也曾在公司內(nèi)分享過)：

　　近似色

　　互補色

　　同色系

　　自然(圖片中)尋找

　　拿近似色來說，有現(xiàn)成的工具比如 Adobe Color，以及 Apple 設計師也在用的Color Schemer Studio 2 幫忙，在色輪上取正負30°的顏色，通常就是非常好的近似色組合。

　　「Adobe Color」

　　「Color Schemer Studio」

　　我們將上圖Color Schemer取的顏色來一次現(xiàn)場配色，是不是毫無違和感：

　　「作品風格，按近似色重新組合」

　　再說互補色，色輪上對應的兩個顏色就是視覺沖擊強的顏色組合。

　　但是千萬不要拿來就要，先敲定一個主色和若干輔色：

　　再確定色塊的比例：

　　「比較常用的做法」

　　接著說同色系，這個比較簡單，通過加深或減淡基本色，就可以定義一組可用的顏色出來：

　　基本上是選定一種顏色后，分別疊加20%透明度的白色和20%透明度的黑色，得到了想要的同類色組合。

　　后說說從自然中取色，拿一張大表姐的照片舉例，放入Adobe Color 自動識別出圖片中的主要顏色：

　　「Adobe Color 識別顏色」

　　根據(jù)這幾個顏色以及主輔色的比例，我們可以在短短幾分鐘就完成一個可用的版式設計：

　　「這里稍微提升了畫面的亮度和飽和度」

　　如果在設計中發(fā)現(xiàn)作品不合心意，沒準問題就出在顏色上。

　　上述幾個技巧在任何場景下都可以靈活運用，這下知道該怎么做了吧。

原創(chuàng)不易，未經(jīng)授權，嚴禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,6776,0.html

上一篇：未來十年內(nèi)，社交網(wǎng)絡將與搜索引擎全面整合

下一篇：來看看，這些大佬完成“小目標”都用了多少年？

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風
格設計
程序設
計研發(fā)
資料錄
入優(yōu)化
確認交
付使用
后續(xù)跟
蹤服務
+86 10 64758810
18510861135

熱門標簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤
我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務態(tài)度好。值得你的信賴！

譚嬌
技術好，設計精良，操作便利，很專業(yè)！配套的服務和后續(xù)的服務都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理