? ? ? ? ? 設計是在滿足用戶基本需求的前提下,再在設計過程中使用戶產生共同感受和在用戶使用過程中提升用戶體驗的行為。以此推導,設計是源于生活的再優化技能。原研哉大師也認為,設計不僅僅是制造技術,而是從生活中發現新問題的行為。再由此探尋下去,所謂的設計之美,其實質也是在平凡的日常生活中,擦出令人眼前一亮的創意火花。許多設計師都在想,如何才能使自己的設計能免于俗套,在眾多的同類設計中脫穎而出。以下將根據一部分設計原理來分享一些案例。
友好的設計
? ? ? ? 設計既然是提升用戶體驗的行為,那首先必須是友好的。所謂友好,就是在用戶使用過程中有更好的引導,又或是近年討論火熱的情感化,與用戶產生共情。
? ? ? ? 當點擊一個無效或不存在的鏈接時,網站通常會彈出一個404頁面,用戶一般會直接點擊關閉離開。大多數時候,用戶看到這個頁面都是不快的,但對于網站的運行來說,這個頁面也是必須存在的。若頁面在做好行為引導的同時,和用戶產生情感共鳴,或創造一些巧妙的視覺變化,令用戶喜出望外,這將區別于普通的404頁面,甚至令用戶對404頁面產生新的期待。
? ? ? ? 萌購,一個國內日本亞馬遜的代購平臺。
? ? ? ? 上圖是它的商品不能購買提示頁,一般出現于已被頻繁購買導致不能代購的商品,或因運輸禁令,海關條例原因不能下單的商品。? ? ? 頁面除了文案說明商品不能購買,配圖是個用虛線勾勒的萌購娘形象,表情悲傷,跪地攙扶的動作。與商品不能購買時,用戶悲傷不快的心情一致。同時考慮到該平臺用戶大多都是買日本宅物的用戶,采用動漫角色來傳遞信息,也是投其所好的一個方式。角色形象只用虛線勾勒,還有背后豎排漸隱漸現的代碼,告訴用戶是不可控原因導致購買行為不能在頁面實現下去,即使后臺程序員努力了,頁面也不能正常顯示。
Weirdsgn,一個國外設計公司的網站
http://www.weirdsgn.com/404/
? ? ? ? 這個團隊偏歐美動漫風格,業務范圍囊括大多數互聯網設計。他們的404頁面秉承了他們的設計風格,用了3個動漫形象在密謀做試驗的動態場景。他們三人帶著護目鏡,在燈光下反著光,特別是正中的女士,眼睛透露一抹兇光。以此場景玩笑式暗示用戶不應點入該頁面,暗示此頁面不能正常繼續瀏覽。而且隨著用戶移動鼠標,該場景能實現3D動效般左右空間透視式移動。配合右側404文案“哎呀!你要找的怪物不在這里”,更顯設計師的幽默感。Oops這個單詞也玩笑式的在中間加好幾個o來起滑稽的強調作用。文案下方貼心的加上回首頁按鈕和收藏此頁的鏈接按鈕。
Illucolor,這是一個法國的設計團隊的展示網站
http://www.illucolor.fr/illucolor404.html
? ? ? ? ? 他們的404頁面是以網站首頁為基礎做了頁面裂開的效果,大大的404字體和失衡掉落的夸張人物充分體現了頁面出現錯誤后的不可控效果。為了不影響頁面效果,按鈕設置在左上方。該按鈕深色底色反白字,應用網站底部的配色,在白色底色上明顯凸出,且做成類似鑲嵌在頁面上的質感效果,使用戶尋找起來并不困難。
設計的色彩
? ? ? ? 正如喬布斯所說,世界是由色彩組成的。設計時自然的色彩搭配對產品呈現有一定的參考價值。現在影響世界且用色豐富的大品牌案例數之不盡,最出名的要數谷歌的logo和奧運五環。以下分享的案例是個有趣的網站。
http://www.ktk-hd.com/recruit/
? ? ? ? 這是日本的一個文具企業KATOKEN的官網首頁。? ? ? 首屏的文案和配圖采用色彩斑斕的扁平化文具與色塊組成,與其產品品類豐富,色彩多樣相一致。文案下是一個游樂場,讓用戶感覺到用文具也是一件快樂的事。而且頁面很多地方都是可動的,可以關注的點很多,整個頁面每一個角落都可以細細品味好久。為了與主圖適應,頁底分割線也是不同顏色線段組成。整個配色和動畫效果使用戶感受到該品牌的年輕與活力。
簡約的設計
? ? ? ? 引用《簡約之美》,在設計方面,簡約不是簡單的堆砌和隨意的擺放,而是在設計上更強調功能,強調結構和形式的完整。簡約而不簡單,甚至比隨意堆砌更難控制。要突出簡約的美,需要反復推敲,認真思考,剔除那些可有可無的,非本質的東西,使設計以高度凝練的色彩和極致簡約的結構呈現美。
https://amix-design.com/
? ? ? ? 這是日本的一個設計公司官網首頁。? ? ? 頁面內容不多,問句式主文案,兩句輔助語句,模糊動效背景,底部引導icon。主要文案一屏居中,說出了用戶的心聲——需要做一個設計,該文案底部是若隱若現的公司logo,引導出用戶需要的答案。副標題描述了公司的定位和服務意向,“讓設計更加貼近身邊,在日本的話可以隨時接受委托”。背景的圖案是一些相連的三維白線,節點是圓。這些圖案被模糊并緩慢向前移動,產生了中部文案沖破各種思緒,充滿力量向屏幕內部移動的效果。底部正中一個鼠標的小icon,配以下拉文案(scroll down),引導用戶向下拉動,了解更多。頂部左邊是公司logo,右邊是菜單欄,相互平衡。
設計中的比例
? ? ? ? 在設計中運用合適的比例,使設計的效果更美觀的同時,也使設計排布有據可依。縱觀以往很多大師的設計,即使設計時沒有刻意使用比例,但因為對美的追求,對合適比例的內在認同,最終都被發現其作品與設計比例原理相一致。常用的設計比例是對稱,其次是黃金比例和白銀比例。黃金比例指的是把一條線段分割為兩部分,較短部分與較長部分長度之比等于較長部分與整體長度之比,其比值是一個無理數,取其前三位數字的近似值是0.618。白銀比例是指事物各部分間一定的數學比例關系,其比值為1.414 :1,其精確值為√2:1。白銀比例較黃金比例不為人所熟知,現在日本等國較為流行。以下是一個黃金比例的例子。
http://808tokyo.com/
? ? ? 這是一家日本六本木日式餐廳的官網首頁。? ? ? 頁面內容不多,左上角logo右上角小字文案。 圖片占據整個頁面,輪播切換,而且圖片的重心都在右邊,為了平衡,在左側中部加了3行文案。
? ? ? ? 該圖是該店店內裝飾墻的一部分。拍攝的裝飾花的擺放角度符合黃金分割的比例。一速光源由左側logo露出,使用戶在看到官網,就能從這一隅花枝感受到餐廳的高雅恬靜。
因為是販賣日本料理的餐廳,展示菜式的美味是必須的。該圖拍攝的角度和食物擺放的角度剛好也是黃金分割比例,而且采用了邊緣虛化,焦點清晰的拍攝手法。該圖充分表現了魚生的新鮮,美味和食物的精致。
? ? ? ? 該圖拍攝角度和食物擺放的角度的位置也剛好也是黃金分割比例,也采用了邊緣虛化,焦點清晰的拍攝手法。鴨胸和配菜擺在右側,那一列香料碎與鴨胸平衡,斜線的拍法剛好平衡了右側的重量,整體看各物件的擺放都非常精致。該圖對焦在鴨胸上,肉紋細節清晰可見,美味由屏幕溢出。
? ? ? ? 該圖手法和上面的圖片類似,重心點在黑魚子上,構圖上大蝦和面包的擺放邊緣剛好落到黃金分割的比例弧線上,同時,蔬菜的新鮮和蝦肉的鮮美躍然圖上,看上去使人食指大動。
? ? ? ? 設計理論其實還有許多,這里只列舉幾個,相信多學習參考相關設計理論,多實踐,各位設計師同僚們,你們定能創造出更優秀的作品。