你的設(shè)計夠出類拔萃嗎?分享一些設(shè)計原理在網(wǎng)站的運(yùn)用案例

? ? ? ? ? 設(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)生新的期待。

圖片發(fā)自簡書App

? ? ? ? 萌購贮折,一個國內(nèi)日本亞馬遜的代購平臺裤翩。

? ? ? ? 上圖是它的商品不能購買提示頁,一般出現(xiàn)于已被頻繁購買導(dǎo)致不能代購的商品调榄,或因運(yùn)輸禁令踊赠,海關(guān)條例原因不能下單的商品。? ? ? 頁面除了文案說明商品不能購買每庆,配圖是個用虛線勾勒的萌購娘形象筐带,表情悲傷,跪地攙扶的動作缤灵。與商品不能購買時伦籍,用戶悲傷不快的心情一致。同時考慮到該平臺用戶大多都是買日本宅物的用戶腮出,采用動漫角色來傳遞信息帖鸦,也是投其所好的一個方式。角色形象只用虛線勾勒利诺,還有背后豎排漸隱漸現(xiàn)的代碼富蓄,告訴用戶是不可控原因?qū)е沦徺I行為不能在頁面實(shí)現(xiàn)下去,即使后臺程序員努力了慢逾,頁面也不能正常顯示立倍。

圖片發(fā)自簡書App

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)作用。文案下方貼心的加上回首頁按鈕和收藏此頁的鏈接按鈕棵磷。

圖片發(fā)自簡書App

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)站。

圖片發(fā)自簡書App

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)美。

圖片發(fā)自簡書App

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)在日本等國較為流行絮供。以下是一個黃金比例的例子。

圖片發(fā)自簡書App

http://808tokyo.com/

? ? ? 這是一家日本六本木日式餐廳的官網(wǎng)首頁茶敏。? ? ? 頁面內(nèi)容不多,左上角logo右上角小字文案萍肆。 圖片占據(jù)整個頁面包雀,輪播切換葡兑,而且圖片的重心都在右邊厨疙,為了平衡,在左側(cè)中部加了3行文案知允。

圖片發(fā)自簡書App

? ? ? ? 該圖是該店店內(nèi)裝飾墻的一部分涤垫。拍攝的裝飾花的擺放角度符合黃金分割的比例。一速光源由左側(cè)logo露出,使用戶在看到官網(wǎng)歧杏,就能從這一隅花枝感受到餐廳的高雅恬靜。

圖片發(fā)自簡書App

因為是販賣日本料理的餐廳礼华,展示菜式的美味是必須的圣絮。該圖拍攝的角度和食物擺放的角度剛好也是黃金分割比例祈惶,而且采用了邊緣虛化,焦點(diǎn)清晰的拍攝手法扮匠。該圖充分表現(xiàn)了魚生的新鮮捧请,美味和食物的精致。

圖片發(fā)自簡書App

? ? ? ? 該圖拍攝角度和食物擺放的角度的位置也剛好也是黃金分割比例棒搜,也采用了邊緣虛化疹蛉,焦點(diǎn)清晰的拍攝手法。鴨胸和配菜擺在右側(cè)力麸,那一列香料碎與鴨胸平衡可款,斜線的拍法剛好平衡了右側(cè)的重量育韩,整體看各物件的擺放都非常精致。該圖對焦在鴨胸上筑舅,肉紋細(xì)節(jié)清晰可見座慰,美味由屏幕溢出。

圖片發(fā)自簡書App

? ? ? ? 該圖手法和上面的圖片類似翠拣,重心點(diǎn)在黑魚子上版仔,構(gòu)圖上大蝦和面包的擺放邊緣剛好落到黃金分割的比例弧線上,同時误墓,蔬菜的新鮮和蝦肉的鮮美躍然圖上蛮粮,看上去使人食指大動。

? ? ? ? 設(shè)計理論其實(shí)還有許多谜慌,這里只列舉幾個然想,相信多學(xué)習(xí)參考相關(guān)設(shè)計理論,多實(shí)踐欣范,各位設(shè)計師同僚們变泄,你們定能創(chuàng)造出更優(yōu)秀的作品。








最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末恼琼,一起剝皮案震驚了整個濱河市妨蛹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌晴竞,老刑警劉巖蛙卤,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異噩死,居然都是意外死亡颤难,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進(jìn)店門已维,熙熙樓的掌柜王于貴愁眉苦臉地迎上來行嗤,“玉大人,你說我怎么就攤上這事垛耳“貉椋” “怎么了?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵艾扮,是天一觀的道長。 經(jīng)常有香客問我占婉,道長泡嘴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任逆济,我火速辦了婚禮酌予,結(jié)果婚禮上磺箕,老公的妹妹穿的比我還像新娘。我一直安慰自己抛虫,他們只是感情好松靡,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著建椰,像睡著了一般雕欺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上棉姐,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天屠列,我揣著相機(jī)與錄音,去河邊找鬼伞矩。 笑死笛洛,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的乃坤。 我是一名探鬼主播苛让,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼湿诊!你這毒婦竟也來了狱杰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤枫吧,失蹤者是張志新(化名)和其女友劉穎浦旱,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體九杂,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡颁湖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了例隆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甥捺。...
    茶點(diǎn)故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖镀层,靈堂內(nèi)的尸體忽然破棺而出镰禾,到底是詐尸還是另有隱情,我是刑警寧澤唱逢,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布吴侦,位于F島的核電站,受9級特大地震影響坞古,放射性物質(zhì)發(fā)生泄漏备韧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一痪枫、第九天 我趴在偏房一處隱蔽的房頂上張望织堂。 院中可真熱鬧叠艳,春花似錦、人聲如沸易阳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽潦俺。三九已至拒课,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間黑竞,已是汗流浹背捕发。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留很魂,地道東北人扎酷。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像遏匆,于是被迫代替她去往敵國和親法挨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容