你的設計夠出類拔萃嗎?分享一些設計原理在網站的運用案例

? ? ? ? ? 設計是在滿足用戶基本需求的前提下,再在設計過程中使用戶產生共同感受和在用戶使用過程中提升用戶體驗的行為。以此推導,設計是源于生活的再優化技能。原研哉大師也認為,設計不僅僅是制造技術,而是從生活中發現新問題的行為。再由此探尋下去,所謂的設計之美,其實質也是在平凡的日常生活中,擦出令人眼前一亮的創意火花。許多設計師都在想,如何才能使自己的設計能免于俗套,在眾多的同類設計中脫穎而出。以下將根據一部分設計原理來分享一些案例。

友好的設計

? ? ? ? 設計既然是提升用戶體驗的行為,那首先必須是友好的。所謂友好,就是在用戶使用過程中有更好的引導,又或是近年討論火熱的情感化,與用戶產生共情。

? ? ? ? 當點擊一個無效或不存在的鏈接時,網站通常會彈出一個404頁面,用戶一般會直接點擊關閉離開。大多數時候,用戶看到這個頁面都是不快的,但對于網站的運行來說,這個頁面也是必須存在的。若頁面在做好行為引導的同時,和用戶產生情感共鳴,或創造一些巧妙的視覺變化,令用戶喜出望外,這將區別于普通的404頁面,甚至令用戶對404頁面產生新的期待。

圖片發自簡書App

? ? ? ? 萌購,一個國內日本亞馬遜的代購平臺。

? ? ? ? 上圖是它的商品不能購買提示頁,一般出現于已被頻繁購買導致不能代購的商品,或因運輸禁令,海關條例原因不能下單的商品。? ? ? 頁面除了文案說明商品不能購買,配圖是個用虛線勾勒的萌購娘形象,表情悲傷,跪地攙扶的動作。與商品不能購買時,用戶悲傷不快的心情一致。同時考慮到該平臺用戶大多都是買日本宅物的用戶,采用動漫角色來傳遞信息,也是投其所好的一個方式。角色形象只用虛線勾勒,還有背后豎排漸隱漸現的代碼,告訴用戶是不可控原因導致購買行為不能在頁面實現下去,即使后臺程序員努力了,頁面也不能正常顯示。

圖片發自簡書App

Weirdsgn,一個國外設計公司的網站

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

? ? ? ? 這個團隊偏歐美動漫風格,業務范圍囊括大多數互聯網設計。他們的404頁面秉承了他們的設計風格,用了3個動漫形象在密謀做試驗的動態場景。他們三人帶著護目鏡,在燈光下反著光,特別是正中的女士,眼睛透露一抹兇光。以此場景玩笑式暗示用戶不應點入該頁面,暗示此頁面不能正常繼續瀏覽。而且隨著用戶移動鼠標,該場景能實現3D動效般左右空間透視式移動。配合右側404文案“哎呀!你要找的怪物不在這里”,更顯設計師的幽默感。Oops這個單詞也玩笑式的在中間加好幾個o來起滑稽的強調作用。文案下方貼心的加上回首頁按鈕和收藏此頁的鏈接按鈕。

圖片發自簡書App

Illucolor,這是一個法國的設計團隊的展示網站

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

? ? ? ? ? 他們的404頁面是以網站首頁為基礎做了頁面裂開的效果,大大的404字體和失衡掉落的夸張人物充分體現了頁面出現錯誤后的不可控效果。為了不影響頁面效果,按鈕設置在左上方。該按鈕深色底色反白字,應用網站底部的配色,在白色底色上明顯凸出,且做成類似鑲嵌在頁面上的質感效果,使用戶尋找起來并不困難。

設計的色彩

? ? ? ? 正如喬布斯所說,世界是由色彩組成的。設計時自然的色彩搭配對產品呈現有一定的參考價值。現在影響世界且用色豐富的大品牌案例數之不盡,最出名的要數谷歌的logo和奧運五環。以下分享的案例是個有趣的網站。

圖片發自簡書App

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

? ? ? ? 這是日本的一個文具企業KATOKEN的官網首頁。? ? ? 首屏的文案和配圖采用色彩斑斕的扁平化文具與色塊組成,與其產品品類豐富,色彩多樣相一致。文案下是一個游樂場,讓用戶感覺到用文具也是一件快樂的事。而且頁面很多地方都是可動的,可以關注的點很多,整個頁面每一個角落都可以細細品味好久。為了與主圖適應,頁底分割線也是不同顏色線段組成。整個配色和動畫效果使用戶感受到該品牌的年輕與活力。

簡約的設計

? ? ? ? 引用《簡約之美》,在設計方面,簡約不是簡單的堆砌和隨意的擺放,而是在設計上更強調功能,強調結構和形式的完整。簡約而不簡單,甚至比隨意堆砌更難控制。要突出簡約的美,需要反復推敲,認真思考,剔除那些可有可無的,非本質的東西,使設計以高度凝練的色彩和極致簡約的結構呈現美。

圖片發自簡書App

https://amix-design.com/

? ? ? ? 這是日本的一個設計公司官網首頁。? ? ? 頁面內容不多,問句式主文案,兩句輔助語句,模糊動效背景,底部引導icon。主要文案一屏居中,說出了用戶的心聲——需要做一個設計,該文案底部是若隱若現的公司logo,引導出用戶需要的答案。副標題描述了公司的定位和服務意向,“讓設計更加貼近身邊,在日本的話可以隨時接受委托”。背景的圖案是一些相連的三維白線,節點是圓。這些圖案被模糊并緩慢向前移動,產生了中部文案沖破各種思緒,充滿力量向屏幕內部移動的效果。底部正中一個鼠標的小icon,配以下拉文案(scroll down),引導用戶向下拉動,了解更多。頂部左邊是公司logo,右邊是菜單欄,相互平衡。

設計中的比例

? ? ? ? 在設計中運用合適的比例,使設計的效果更美觀的同時,也使設計排布有據可依。縱觀以往很多大師的設計,即使設計時沒有刻意使用比例,但因為對美的追求,對合適比例的內在認同,最終都被發現其作品與設計比例原理相一致。常用的設計比例是對稱,其次是黃金比例和白銀比例。黃金比例指的是把一條線段分割為兩部分,較短部分與較長部分長度之比等于較長部分與整體長度之比,其比值是一個無理數,取其前三位數字的近似值是0.618。白銀比例是指事物各部分間一定的數學比例關系,其比值為1.414 :1,其精確值為√2:1。白銀比例較黃金比例不為人所熟知,現在日本等國較為流行。以下是一個黃金比例的例子。

圖片發自簡書App

http://808tokyo.com/

? ? ? 這是一家日本六本木日式餐廳的官網首頁。? ? ? 頁面內容不多,左上角logo右上角小字文案。 圖片占據整個頁面,輪播切換,而且圖片的重心都在右邊,為了平衡,在左側中部加了3行文案。

圖片發自簡書App

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

圖片發自簡書App

因為是販賣日本料理的餐廳,展示菜式的美味是必須的。該圖拍攝的角度和食物擺放的角度剛好也是黃金分割比例,而且采用了邊緣虛化,焦點清晰的拍攝手法。該圖充分表現了魚生的新鮮,美味和食物的精致。

圖片發自簡書App

? ? ? ? 該圖拍攝角度和食物擺放的角度的位置也剛好也是黃金分割比例,也采用了邊緣虛化,焦點清晰的拍攝手法。鴨胸和配菜擺在右側,那一列香料碎與鴨胸平衡,斜線的拍法剛好平衡了右側的重量,整體看各物件的擺放都非常精致。該圖對焦在鴨胸上,肉紋細節清晰可見,美味由屏幕溢出。

圖片發自簡書App

? ? ? ? 該圖手法和上面的圖片類似,重心點在黑魚子上,構圖上大蝦和面包的擺放邊緣剛好落到黃金分割的比例弧線上,同時,蔬菜的新鮮和蝦肉的鮮美躍然圖上,看上去使人食指大動。

? ? ? ? 設計理論其實還有許多,這里只列舉幾個,相信多學習參考相關設計理論,多實踐,各位設計師同僚們,你們定能創造出更優秀的作品。








最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容