? ? ? ? ? 設(shè)計是在滿足用戶基本需求的前提下塑荒,再在設(shè)計過程中使用戶產(chǎn)生共同感受和在用戶使用過程中提升用戶體驗的行為熄赡。以此推導(dǎo),設(shè)計是源于生活的再優(yōu)化技能齿税。原研哉大師也認(rèn)為彼硫,設(shè)計不僅僅是制造技術(shù),而是從生活中發(fā)現(xiàn)新問題的行為凌箕。再由此探尋下去拧篮,所謂的設(shè)計之美,其實(shí)質(zhì)也是在平凡的日常生活中牵舱,擦出令人眼前一亮的創(chuàng)意火花串绩。許多設(shè)計師都在想,如何才能使自己的設(shè)計能免于俗套芜壁,在眾多的同類設(shè)計中脫穎而出礁凡。以下將根據(jù)一部分設(shè)計原理來分享一些案例。
友好的設(shè)計
? ? ? ? 設(shè)計既然是提升用戶體驗的行為慧妄,那首先必須是友好的顷牌。所謂友好,就是在用戶使用過程中有更好的引導(dǎo)塞淹,又或是近年討論火熱的情感化窟蓝,與用戶產(chǎn)生共情。
? ? ? ? 當(dāng)點(diǎn)擊一個無效或不存在的鏈接時窖铡,網(wǎng)站通常會彈出一個404頁面疗锐,用戶一般會直接點(diǎn)擊關(guān)閉離開坊谁。大多數(shù)時候,用戶看到這個頁面都是不快的滑臊,但對于網(wǎng)站的運(yùn)行來說口芍,這個頁面也是必須存在的。若頁面在做好行為引導(dǎo)的同時雇卷,和用戶產(chǎn)生情感共鳴鬓椭,或創(chuàng)造一些巧妙的視覺變化,令用戶喜出望外关划,這將區(qū)別于普通的404頁面小染,甚至令用戶對404頁面產(chǎn)生新的期待。
? ? ? ? 萌購贮折,一個國內(nèi)日本亞馬遜的代購平臺裤翩。
? ? ? ? 上圖是它的商品不能購買提示頁,一般出現(xiàn)于已被頻繁購買導(dǎo)致不能代購的商品调榄,或因運(yùn)輸禁令踊赠,海關(guān)條例原因不能下單的商品。? ? ? 頁面除了文案說明商品不能購買每庆,配圖是個用虛線勾勒的萌購娘形象筐带,表情悲傷,跪地攙扶的動作缤灵。與商品不能購買時伦籍,用戶悲傷不快的心情一致。同時考慮到該平臺用戶大多都是買日本宅物的用戶腮出,采用動漫角色來傳遞信息帖鸦,也是投其所好的一個方式。角色形象只用虛線勾勒利诺,還有背后豎排漸隱漸現(xiàn)的代碼富蓄,告訴用戶是不可控原因?qū)е沦徺I行為不能在頁面實(shí)現(xiàn)下去,即使后臺程序員努力了慢逾,頁面也不能正常顯示立倍。
Weirdsgn,一個國外設(shè)計公司的網(wǎng)站
http://www.weirdsgn.com/404/
? ? ? ? 這個團(tuán)隊偏歐美動漫風(fēng)格侣滩,業(yè)務(wù)范圍囊括大多數(shù)互聯(lián)網(wǎng)設(shè)計口注。他們的404頁面秉承了他們的設(shè)計風(fēng)格,用了3個動漫形象在密謀做試驗的動態(tài)場景君珠。他們?nèi)藥еo(hù)目鏡寝志,在燈光下反著光,特別是正中的女士,眼睛透露一抹兇光材部。以此場景玩笑式暗示用戶不應(yīng)點(diǎn)入該頁面毫缆,暗示此頁面不能正常繼續(xù)瀏覽。而且隨著用戶移動鼠標(biāo)乐导,該場景能實(shí)現(xiàn)3D動效般左右空間透視式移動苦丁。配合右側(cè)404文案“哎呀!你要找的怪物不在這里”物臂,更顯設(shè)計師的幽默感旺拉。Oops這個單詞也玩笑式的在中間加好幾個o來起滑稽的強(qiáng)調(diào)作用。文案下方貼心的加上回首頁按鈕和收藏此頁的鏈接按鈕棵磷。
Illucolor蛾狗,這是一個法國的設(shè)計團(tuán)隊的展示網(wǎng)站
http://www.illucolor.fr/illucolor404.html
? ? ? ? ? 他們的404頁面是以網(wǎng)站首頁為基礎(chǔ)做了頁面裂開的效果,大大的404字體和失衡掉落的夸張人物充分體現(xiàn)了頁面出現(xiàn)錯誤后的不可控效果仪媒。為了不影響頁面效果沉桌,按鈕設(shè)置在左上方。該按鈕深色底色反白字规丽,應(yīng)用網(wǎng)站底部的配色蒲牧,在白色底色上明顯凸出,且做成類似鑲嵌在頁面上的質(zhì)感效果赌莺,使用戶尋找起來并不困難。
設(shè)計的色彩
? ? ? ? 正如喬布斯所說松嘶,世界是由色彩組成的艘狭。設(shè)計時自然的色彩搭配對產(chǎn)品呈現(xiàn)有一定的參考價值。現(xiàn)在影響世界且用色豐富的大品牌案例數(shù)之不盡翠订,最出名的要數(shù)谷歌的logo和奧運(yùn)五環(huán)巢音。以下分享的案例是個有趣的網(wǎng)站。
http://www.ktk-hd.com/recruit/
? ? ? ? 這是日本的一個文具企業(yè)KATOKEN的官網(wǎng)首頁尽超。? ? ? 首屏的文案和配圖采用色彩斑斕的扁平化文具與色塊組成官撼,與其產(chǎn)品品類豐富,色彩多樣相一致似谁。文案下是一個游樂場傲绣,讓用戶感覺到用文具也是一件快樂的事。而且頁面很多地方都是可動的巩踏,可以關(guān)注的點(diǎn)很多秃诵,整個頁面每一個角落都可以細(xì)細(xì)品味好久。為了與主圖適應(yīng)塞琼,頁底分割線也是不同顏色線段組成菠净。整個配色和動畫效果使用戶感受到該品牌的年輕與活力。
簡約的設(shè)計
? ? ? ? 引用《簡約之美》,在設(shè)計方面毅往,簡約不是簡單的堆砌和隨意的擺放牵咙,而是在設(shè)計上更強(qiáng)調(diào)功能,強(qiáng)調(diào)結(jié)構(gòu)和形式的完整攀唯。簡約而不簡單洁桌,甚至比隨意堆砌更難控制。要突出簡約的美革答,需要反復(fù)推敲战坤,認(rèn)真思考,剔除那些可有可無的残拐,非本質(zhì)的東西途茫,使設(shè)計以高度凝練的色彩和極致簡約的結(jié)構(gòu)呈現(xiàn)美。
https://amix-design.com/
? ? ? ? 這是日本的一個設(shè)計公司官網(wǎng)首頁溪食。? ? ? 頁面內(nèi)容不多囊卜,問句式主文案,兩句輔助語句错沃,模糊動效背景栅组,底部引導(dǎo)icon。主要文案一屏居中枢析,說出了用戶的心聲——需要做一個設(shè)計玉掸,該文案底部是若隱若現(xiàn)的公司logo,引導(dǎo)出用戶需要的答案醒叁。副標(biāo)題描述了公司的定位和服務(wù)意向司浪,“讓設(shè)計更加貼近身邊,在日本的話可以隨時接受委托”把沼。背景的圖案是一些相連的三維白線啊易,節(jié)點(diǎn)是圓。這些圖案被模糊并緩慢向前移動饮睬,產(chǎn)生了中部文案沖破各種思緒租谈,充滿力量向屏幕內(nèi)部移動的效果。底部正中一個鼠標(biāo)的小icon捆愁,配以下拉文案(scroll down)割去,引導(dǎo)用戶向下拉動,了解更多牙瓢。頂部左邊是公司logo劫拗,右邊是菜單欄,相互平衡矾克。
設(shè)計中的比例
? ? ? ? 在設(shè)計中運(yùn)用合適的比例页慷,使設(shè)計的效果更美觀的同時憔足,也使設(shè)計排布有據(jù)可依【品保縱觀以往很多大師的設(shè)計滓彰,即使設(shè)計時沒有刻意使用比例,但因為對美的追求州袒,對合適比例的內(nèi)在認(rèn)同揭绑,最終都被發(fā)現(xiàn)其作品與設(shè)計比例原理相一致。常用的設(shè)計比例是對稱郎哭,其次是黃金比例和白銀比例他匪。黃金比例指的是把一條線段分割為兩部分,較短部分與較長部分長度之比等于較長部分與整體長度之比夸研,其比值是一個無理數(shù)邦蜜,取其前三位數(shù)字的近似值是0.618。白銀比例是指事物各部分間一定的數(shù)學(xué)比例關(guān)系亥至,其比值為1.414 :1悼沈,其精確值為√2:1。白銀比例較黃金比例不為人所熟知姐扮,現(xiàn)在日本等國較為流行絮供。以下是一個黃金比例的例子。
http://808tokyo.com/
? ? ? 這是一家日本六本木日式餐廳的官網(wǎng)首頁茶敏。? ? ? 頁面內(nèi)容不多,左上角logo右上角小字文案萍肆。 圖片占據(jù)整個頁面包雀,輪播切換葡兑,而且圖片的重心都在右邊厨疙,為了平衡,在左側(cè)中部加了3行文案知允。
? ? ? ? 該圖是該店店內(nèi)裝飾墻的一部分涤垫。拍攝的裝飾花的擺放角度符合黃金分割的比例。一速光源由左側(cè)logo露出,使用戶在看到官網(wǎng)歧杏,就能從這一隅花枝感受到餐廳的高雅恬靜。
因為是販賣日本料理的餐廳礼华,展示菜式的美味是必須的圣絮。該圖拍攝的角度和食物擺放的角度剛好也是黃金分割比例祈惶,而且采用了邊緣虛化,焦點(diǎn)清晰的拍攝手法扮匠。該圖充分表現(xiàn)了魚生的新鮮捧请,美味和食物的精致。
? ? ? ? 該圖拍攝角度和食物擺放的角度的位置也剛好也是黃金分割比例棒搜,也采用了邊緣虛化疹蛉,焦點(diǎn)清晰的拍攝手法。鴨胸和配菜擺在右側(cè)力麸,那一列香料碎與鴨胸平衡可款,斜線的拍法剛好平衡了右側(cè)的重量育韩,整體看各物件的擺放都非常精致。該圖對焦在鴨胸上筑舅,肉紋細(xì)節(jié)清晰可見座慰,美味由屏幕溢出。
? ? ? ? 該圖手法和上面的圖片類似翠拣,重心點(diǎn)在黑魚子上版仔,構(gòu)圖上大蝦和面包的擺放邊緣剛好落到黃金分割的比例弧線上,同時误墓,蔬菜的新鮮和蝦肉的鮮美躍然圖上蛮粮,看上去使人食指大動。
? ? ? ? 設(shè)計理論其實(shí)還有許多谜慌,這里只列舉幾個然想,相信多學(xué)習(xí)參考相關(guān)設(shè)計理論,多實(shí)踐欣范,各位設(shè)計師同僚們变泄,你們定能創(chuàng)造出更優(yōu)秀的作品。