? ? ? ? ? 設(shè)計(jì)是在滿足用戶基本需求的前提下焚刚，再在設(shè)計(jì)過程中使用戶產(chǎn)生共同感受和在用戶使用過程中提升用戶體驗(yàn)的行為。以此推導(dǎo)扇调，設(shè)計(jì)是源于生活的再優(yōu)化技能矿咕。原研哉大師也認(rèn)為，設(shè)計(jì)不僅僅是制造技術(shù)狼钮，而是從生活中發(fā)現(xiàn)新問題的行為碳柱。再由此探尋下去，所謂的設(shè)計(jì)之美熬芜，其實(shí)質(zhì)也是在平凡的日常生活中莲镣，擦出令人眼前一亮的創(chuàng)意火花。許多設(shè)計(jì)師都在想涎拉，如何才能使自己的設(shè)計(jì)能免于俗套瑞侮，在眾多的同類設(shè)計(jì)中脫穎而出的圆。以下將根據(jù)一部分設(shè)計(jì)原理來分享一些案例。

01 友好的設(shè)計(jì)

? ? ? ? 設(shè)計(jì)既然是提升用戶體驗(yàn)的行為半火，那首先必須是友好的越妈。所謂友好，就是在用戶使用過程中有更好的引導(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)生新的期待怒炸。

萌購404頁面

? ? ? ? 萌購带饱，一個國內(nèi)日本亞馬遜的代購平臺。

? ? ? ? 上圖是它的商品不能購買提示頁阅羹，一般出現(xiàn)于已被頻繁購買導(dǎo)致不能代購的商品勺疼，或因運(yùn)輸禁令，海關(guān)條例原因不能下單的商品捏鱼。頁面除了文案說明商品不能購買执庐，配圖是個用虛線勾勒的萌購娘形象，表情悲傷导梆，跪地?cái)v扶的動作轨淌。與商品不能購買時，用戶悲傷不快的心情一致看尼。同時考慮到該平臺用戶大多都是買日本宅物的用戶递鹉，采用動漫角色來傳遞信息，也是投其所好的一個方式藏斩。角色形象只用虛線勾勒梳虽，還有背后豎排漸隱漸現(xiàn)的代碼，告訴用戶是不可控原因?qū)е沦徺I行為不能在頁面實(shí)現(xiàn)下去灾茁，即使后臺程序員努力了窜觉，頁面也不能正常顯示。

Weirdsgn的404頁面

Weirdsgn北专，一個國外設(shè)計(jì)公司的網(wǎng)站 禀挫。

http://www.weirdsgn.com/404/

? ? ? ? 這個團(tuán)隊(duì)偏歐美動漫風(fēng)格，業(yè)務(wù)范圍囊括大多數(shù)互聯(lián)網(wǎng)設(shè)計(jì)拓颓。他們的404頁面秉承了他們的設(shè)計(jì)風(fēng)格语婴，用了3個動漫形象在密謀做試驗(yàn)的動態(tài)場景。他們?nèi)藥еo(hù)目鏡驶睦，在燈光下反著光砰左，特別是正中的女士，眼睛透露一抹兇光场航。以此場景玩笑式暗示用戶不應(yīng)點(diǎn)入該頁面缠导，暗示此頁面不能正常繼續(xù)瀏覽。而且隨著用戶移動鼠標(biāo)溉痢，該場景能實(shí)現(xiàn)3D動效般左右空間透視式移動僻造。配合右側(cè)404文案“哎呀！你要找的怪物不在這里”孩饼，更顯設(shè)計(jì)師的幽默感髓削。Oops這個單詞也玩笑式的在中間加好幾個o來起滑稽的強(qiáng)調(diào)作用。文案下方貼心的加上回首頁按鈕和收藏此頁的鏈接按鈕镀娶。

Illucolor的404頁面

Illucolor立膛，這是一個法國設(shè)計(jì)團(tuán)隊(duì)的作品展示網(wǎng)站。

http://www.illucolor.fr/illucolor404.html

? ? ? ? ? 他們的404頁面是以網(wǎng)站首頁為基礎(chǔ)做了頁面裂開的效果梯码，大大的404字體和失衡掉落的夸張人物充分體現(xiàn)了頁面出現(xiàn)錯誤后的不可控效果宝泵。為了不影響頁面效果，按鈕設(shè)置在左上方忍些。該按鈕深色底色反白字鲁猩，應(yīng)用網(wǎng)站底部的配色，在白色底色上明顯凸出罢坝，且做成類似鑲嵌在頁面上的質(zhì)感效果廓握，使用戶尋找起來并不困難。

02 設(shè)計(jì)的色彩

? ? ? ? 正如喬布斯所說嘁酿，世界是由色彩組成的隙券。設(shè)計(jì)時自然的色彩搭配對產(chǎn)品呈現(xiàn)有一定的參考價(jià)值。現(xiàn)在影響世界且用色豐富的大品牌案例數(shù)之不盡闹司，最出名的要數(shù)谷歌的logo和奧運(yùn)五環(huán)娱仔。以下分享的案例是個有趣的網(wǎng)站。

KATOKEN首頁

http://www.ktk-hd.com/recruit/

? ? ? ? 這是日本的一個文具企業(yè)KATOKEN的官網(wǎng)首頁游桩。首屏的文案和配圖采用色彩斑斕的扁平化文具與色塊組成牲迫，與其產(chǎn)品品類豐富耐朴，色彩多樣相一致。文案下是一個游樂場盹憎，讓用戶感覺到用文具也是一件快樂的事筛峭。而且頁面很多地方都是可動的，可以關(guān)注的點(diǎn)很多陪每，整個頁面每一個角落都可以細(xì)細(xì)品味好久影晓。為了與主圖適應(yīng)，頁底分割線也是不同顏色線段組成檩禾。整個配色和動畫效果使用戶感受到該品牌的年輕與活力挂签。

03 簡約的設(shè)計(jì)

? ? ? ? 引用《簡約之美》，在設(shè)計(jì)方面盼产，簡約不是簡單的堆砌和隨意的擺放饵婆，而是在設(shè)計(jì)上更強(qiáng)調(diào)功能闯狱，強(qiáng)調(diào)結(jié)構(gòu)和形式的完整生逸。簡約而不簡單，甚至比隨意堆砌更難控制慷暂。要突出簡約的美蜈项，需要反復(fù)推敲芹关，認(rèn)真思考，剔除那些可有可無的紧卒，非本質(zhì)的東西侥衬，使設(shè)計(jì)以高度凝練的色彩和極致簡約的結(jié)構(gòu)呈現(xiàn)美。

AMIX首頁

https://amix-design.com/

? ? ? ? 這是日本的一個設(shè)計(jì)公司官網(wǎng)首頁跑芳。頁面內(nèi)容不多轴总，問句式主文案，兩句輔助語句博个，模糊動效背景怀樟，底部引導(dǎo)icon。主要文案一屏居中盆佣，說出了用戶的心聲——需要做一個設(shè)計(jì)往堡，該文案底部是若隱若現(xiàn)的公司logo，引導(dǎo)出用戶需要的答案共耍。副標(biāo)題描述了公司的定位和服務(wù)意向虑灰，“讓設(shè)計(jì)更加貼近身邊，在日本的話可以隨時接受委托”痹兜。背景的圖案是一些相連的三維白線穆咐，節(jié)點(diǎn)是圓。這些圖案被模糊并緩慢向前移動，產(chǎn)生了中部文案沖破各種思緒对湃，充滿力量向屏幕內(nèi)部移動的效果崖叫。底部正中一個鼠標(biāo)的小icon，配以下拉文案（scroll down）熟尉，引導(dǎo)用戶向下拉動归露，了解更多。頂部左邊是公司logo斤儿，右邊是菜單欄，相互平衡恐锦。

04 設(shè)計(jì)中的比例

? ? ? ? 在設(shè)計(jì)中運(yùn)用合適的比例往果，使設(shè)計(jì)的效果更美觀的同時，也使設(shè)計(jì)排布有據(jù)可依一铅∩轮縱觀以往很多大師的設(shè)計(jì)，即使設(shè)計(jì)時沒有刻意使用比例潘飘，但因?yàn)閷γ赖淖非蟀怪瑢线m比例的內(nèi)在認(rèn)同，最終都被發(fā)現(xiàn)其作品與設(shè)計(jì)比例原理相一致卜录。常用的設(shè)計(jì)比例是對稱戈擒，其次是黃金比例和白銀比例。黃金比例指的是把一條線段分割為兩部分艰毒，較短部分與較長部分長度之比等于較長部分與整體長度之比筐高，其比值是一個無理數(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)，就能從這一隅花枝感受到餐廳的高雅恬靜蜓斧。

圖二

? ? ? ? 因?yàn)槭秦溬u日本料理的餐廳仓蛆，展示菜式的美味是必須的。該圖拍攝的角度和食物擺放的角度剛好也是黃金分割比例挎春，而且采用了邊緣虛化看疙，焦點(diǎn)清晰的拍攝手法。該圖充分表現(xiàn)了魚生的新鮮直奋，美味和食物的精致能庆。

圖三

? ? ? ? 該圖拍攝角度和食物擺放的角度的位置也剛好也是黃金分割比例，也采用了邊緣虛化脚线，焦點(diǎn)清晰的拍攝手法搁胆。鴨胸和配菜擺在右側(cè)，那一列香料碎與鴨胸平衡邮绿，斜線的拍法剛好平衡了右側(cè)的重量渠旁，整體看各物件的擺放都非常精致。該圖對焦在鴨胸上船逮，肉紋細(xì)節(jié)清晰可見顾腊，美味由屏幕溢出。

圖四

? ? ? ? 該圖手法和上面的圖片類似傻唾，重心點(diǎn)在黑魚子上投慈，構(gòu)圖上大蝦和面包的擺放邊緣剛好落到黃金分割的比例弧線上，同時冠骄，蔬菜的新鮮和蝦肉的鮮美躍然圖上伪煤，看上去使人食指大動。

? ? ? ? 設(shè)計(jì)理論其實(shí)還有許多凛辣，這里只列舉幾個抱既，相信多學(xué)習(xí)參考相關(guān)設(shè)計(jì)理論，多實(shí)踐扁誓，各位設(shè)計(jì)師同僚們防泵，你們定能創(chuàng)造出更優(yōu)秀的作品。

? ? ? ? ? ? ? ? ? ? ? —— Yuly.Qiu ——

? ? ? ? ? ? ? ? ? 偶爾撩設(shè)計(jì)的射雞濕

? ? ? ? ? ? ? 畫畫兒蝗敢，玩手辦的怪阿姨

? ? ? ? ? ? ? ? ? ? ? ? ┗( ′,_ゝ`)┛