終極指南:如何成為一名優秀設計師?(上篇)
成為優秀的設計師,并不是你有扎實的設計基本功就可以實現的。要成為優秀的設計師,你至少需要在專業基礎功、設計資源與技巧以及宏觀戰略理念等方面超群出眾。
特別提示:本系列文章是持工具不可知論態度,即無論你使用Sketch,Figma,Adobe XD,Inkscape或者是Microsoft Paint等任何工具,這些建議都對你有幫助。
開啟任何職業生涯,都非常像第一次去吃自助餐的感覺。擺在你面前的,有無數種可能的選擇。
熱食、冷食、沙拉、飲料、甜點……新鮮的熏肉、蔬菜湯、大盤子、小碟子還有些很可愛的餐具器皿……天?。∵€有軟冰淇淋!
總之,你會發現大量的食物。而如果是第一次去吃自助餐的話,可能還會做出錯誤的選擇。我該吃什么?能不能吃回本?這些食物干不干凈?
吃自助餐的訣竅在于,每挑選一輪食物,就可以從中學會新的技巧,從而在數次以后,你的技巧就會不斷提高。你可以總結出一套經驗,知道該拿什么食物,不該拿什么食物,到底一次能吃下多少個芝士漢堡。
其實,學習設計的過程,也是如此的體驗。第一次上手設計,你可能會覺得摸不著頭腦,或者做出錯誤的抉擇,甚至把時間浪費在無關緊要的方面。
因此,我希望通過本系列文章,結合自己多年的設計經驗和教訓,跟大家分享成為優秀設計師的捷徑方法和建議。
1. 從學會使用網格開始
間隔設計,可以說是設計行業中最重要也是最基礎的技能之一。
當我發現可以通過Adobe Illustrator里面的標尺功能畫出輔助線時,我頓時喜極而泣,就像個得到心愛玩具的小孩一樣。
間隔設計本來就不簡單,而且要保持連貫一致的間隔設計,就更加難了。而網格不僅可以幫你對其參照物,同時在你處理上百個圖層時還可以幫你減少腦力勞動。
本著以教學的目的,我們以設計網頁為例,并且最好從簡單的12欄網格開始。
為什么是12欄?因為12這個數字可以方便地被多個數字整除,從而可以輕松地設計不同的布局架構。比如1欄、2欄、3欄、4欄、6欄以及12欄布局等。
那么,12欄網格的寬度又該怎么設置呢?接下來我想給你推薦一個我自己經常使用的公式(寬度單位為像素):(12 * 每欄寬度)+(11 * 間隔寬度)= 總寬度
我自己的所有設計,都是基于8像素網格來設計的。所謂8像素網格,即界面所有的填充、邊距以及元素尺寸均為8像素(的倍數)。在12欄網格中,這個規則也是適用的。
以下,是我日常設計作品中常用的總寬度參數:(12 * 64px)+(11 * 24px)=?1032px?寬
這即是說,設計網格中的每一欄寬度都為64px,而中間的間距寬度都是24px。而因為所有的文本間距和元素邊距都是基于8像素網格來設計的,整體的視覺效果看起來就會非常和諧。
借助于網格,我可以輕松地對齊設計中的所有元素,從而也避免了手動對齊不同圖層等額外工作。對開發者而言,這也可以被看作是相互之間都認可的連貫一致的系統語言,從而提高工作效率。
總的來說,借助網格的設計,真個界面看起來都會非常清爽。
- 為什么要從網格設計開始:界面所有的元素都整齊地對齊。簡而言之,它可以最大程度地減少設計排版方面的思考。
- 延伸閱讀:8像素網格系統導論
2. 堅持使用固定的字體系統
我發現,在設計過程中,許多初級設計師總是在字體大小上猶豫不決,遲遲無法下決定。說他們經驗不足,倒不如說是他們不知道設計的參考架構罷了,所以才導致他們的設計作品通常要不是太大,要不就是太小。
在設計過程中,應該建立一套簡單的字體系統,并一直堅持使用這套系統。
即便是非常復雜的界面,其文本字體字號大小也不會超過10種不同。畢竟,字體大小只不過是區分不同內容之間的多個標準之一罷了。而其它的標準包括字重、色彩以及間距等其他變量。借助于這些變量,你都可以讓用戶清楚地認識和了解你所設計的架構信息。
為了讓自己的設計保持統一連貫性,你可以在設計過程中保存常用的文字設計格式。通過這種方式,你可以在設計界面頂端或界面主題文字時,直接調用已經保存的設計風格,從而節省大量時間。
在確定相應元素的模版風格后,你只需要將這個風格重命名,然后就可以在以后的設計中重復調用。但這其中真正的技巧在于,你真的要在后續的設計過程中使用它們。
如果你在模版風格中修改或更新相關設計的話,大多數設計工具可以直接將這些更新應用到使用該設計風格的界面元素中。而視你的設計工作量而定,通常你都可以節省數個小時的時間。
- 為什么要堅持使用固定的字體系統:實際上,大多數字體特性都是固定的。相比于無限排列組合,倒不如給自己列一份可選字體清單,從而讓設計變得更簡單。
- 延伸閱讀1:8像素網格:網頁設計中的字體
- 延伸閱讀2:如何在Sketch中自動化設計文字和圖層風格
3. 色彩選用嚴格謹慎
我非常喜歡優衣庫的衣服,因為這個品牌的衣服價格比較親民,而且也符合我個人認知中有時候顯得非常高端的中端品牌。
但優衣庫的問題在于,他們同一款式的T恤可能會推出多達93種不同顏色的選擇。紅色、綠色、藍色、藍綠色、青綠色、淺藍色、蔚藍色、深藍色、淺青色……
實際上,這么多顏色選擇并沒有真正的意義。對我而言,面對多種選擇時,我是無法堅決地做出抉擇的。如果真的有上千種顏色選擇,那最終獲益的可能也只有彩通色卡(Pantone)的年度代表色了。
為了應對色彩選擇困難的問題,我參考了許多百萬富翁的“衣櫥”,并從中嚴格篩選出了自己喜歡的選擇。相比于滿衣櫥的各種顏色,我把自己的“衣櫥”顏色限制在幾個特定的色彩范圍之內。
色彩,永遠都有其存在的意義。如果你只是為了增加顏色而增加顏色,那你其實根本不需要那么多顏色。
除了黑色和白色之外,我一般常用的色彩主要有五種。而在運用這五個色彩的過程中,我還可以借助透明程度(即100%透明度、50%透明度、25%透明度……)。這樣一來,基于這五種色彩,我可以創造出更多的色彩,而且我也不需要再去選用某個顏色代碼,從而節約了我的時間。
另外,如果涉及到圖表或相關可視化圖像的設計時,我還有另一套專屬的色彩庫。
- 品牌主色調:比如,電郵營銷平臺Mailchimp,其主色調就是黃色。
- 品牌次色調:即相對主色調而言稍次要的重要色調。對Mailchimp而言,其次色調是稍微帶藍綠色的。
- 成功/順利:通常都采用的綠色。這即意味著“做得不錯!”或者“一切都是按計劃行事的!”
- 警告:通常都采用的黃色。這即意味著“注意!”或者“這里可能會出現問題。”
- 錯誤:通常都采用的紅色。這即意味著“你搞砸了。”或者“系統嚴重癱瘓。”
- 黑色:黑即是黑,這是一種有點厚重感的顏色。
- 白色:主要用于背景顏色等領域。
在色彩選用方面,其實很容易找不到方向。也正是因為你在選色過程中容易在大量選擇面前不知所措,所以你才應該限制你的“個人色板”數量,并且在你的所有設計作品中堅持使用自己選用的主色調。
為什么要嚴格謹慎選用色彩:如果在用色方面足夠謹慎的話,整體的設計也會顯得更有聚合力。如果有自己的常用主色調,那針對“這個地方該用什么顏色?”這個問題時,你的反應速度就會相對較快。
- 延伸閱讀1:創建個人色板快速入門技巧
- 延伸閱讀2:網頁端設計推薦色板
- 延伸閱讀3:如何構建個人色板體系?
4. 要對自己的設計工具“知根知底”
實際上,你具體使用的是什么設計工具并無關緊要。而真正重要的是,你要“沉下去”認可自己的工具,并且最好做到對工具的各種功能了如指掌。
雖然我自己常用的是Adobe Illustrator軟件,但不可否認的是,我仍然有一些我不是很了解的功能。之前我并不知道消失點網格的主要功能和使用方法,但由于曾經不小心啟用了這個功能,而不得不通過谷歌查詢去尋找撤銷方法。
一定要多研究自己的工具。你可以多看看各種視頻教程,也可以加入某個群組,甚至在Meetup(譯者注:全球最大的用戶自發組織活動的社區)上尋找相關社群組織。
多接觸行業內的人,多了解有關資源,從而可以在這個過程中不斷地深入了解和學習使用你的設計工具,然后再不斷地付諸實踐。
我們招聘初級用戶體驗設計師后,通常都會讓他們在入職后花幾個月時間學會熟練使用Sketch。通過這幾個月時間,不斷地學習和了解快捷鍵、格式風格、最佳實踐以及高效設計技巧等。
在那之后,當他們開始嘗試去設計登錄界面時,他們就會有一種“彈鋼琴”的感覺。手指觸碰到鋼琴鍵盤時,會讓他們有一種似曾相識的感覺。
在你還沒有對設計工具知根知底之前,你可能都需要不斷地花時間去熟悉了解。
很多情況下,工具中的某項內置功能可以直接完成你一直在嘗試實現的設計,耗時短效率高,但你就是不知道。
所以,一定要先多花時間在投入方面,要不停地問自己“還有沒有更好更便捷的方法?”
- 為什么要對設計工具知根知底:工具是用來幫助我們的,而不是起阻撓作用的。然后,我們就可以專注于設計解決方案,而不再對如何使用這個工具感到焦慮。
- 延伸閱讀1:設計師快速上手的5個技巧
- 延伸閱讀2:Sketch終于迎來了期待已久的更新
小結
不積小流無以成江河,不積跬步無以至千里。要成為優秀的設計師,你的設計基本功一定要扎實才行。
如果在設計過程中,總是面對各種選擇而遲遲無法下定主意,那你的設計過程注定是一個漫長而艱苦的過程。完善和提升自己的設計基本功時,一定要真正掌握好某項基本功后,再去學習和熟練使用下一項功能。
世界上所有的優秀設計師在間距設計、字體排版以及色彩運用等方面都有扎實的基本功。而一旦你能夠在這些方面做到游刃有余的時候,你會發現,原來設計是如此地輕松。
在本系列文章的中篇中,我將向大家介紹有關技巧,讓你的設計工具真正地幫助你設計。
中篇內容預告:
- 拓展延伸設計工具的潛能
- 創建專屬的重復利用工具
- 不要嘗試重新設計常用的設計模式
- 利用輔助設計資源
原文鏈接:https://modus.medium.com/the-ultimate-guide-to-becoming-a-great-designer-part-1-of-3-88f627233f48
譯者:神譯局,神譯局是36氪旗下編譯團隊,關注科技、商業、職場、生活等領域,重點介紹國外的新技術、新觀點、新風向。
來源:https://36kr.com/p/5220691
本文由 @36氪 授權發布于人人都是產品經理,未經作者許可,禁止轉載
題圖來自Unsplash,基于CC0協議
- 目前還沒評論,等你發揮!