UI設(shè)計(jì)師需要突破的四個(gè)瓶頸期—技法
(知道哪里做的不好，卻不知道如何修改）
首先不可否定，軟件只是一個(gè)工具，是一個(gè)發(fā)揮和實(shí)現(xiàn)自己想法的工具，有想法比多少軟件都重要這一點(diǎn)也可以這么去說。然而軟件也真真切切的可以影響一個(gè)設(shè)計(jì)師靈感的實(shí)現(xiàn)，和效率的快慢。
設(shè)計(jì)的迭代往往跟隨軟件的更新迭代，Sketch能做頁面，Ps同樣能做頁面，然而不可否認(rèn)的是Sketch的工作效率確實(shí)比Ps高的多。
Ps同樣可以畫出3d 效果，只要有足夠的耐心與時(shí)間，然而C4d建一個(gè)場(chǎng)景或許只需花費(fèi)用Ps十分之一不到的時(shí)間而且效果更真實(shí)。
所以說，軟件也是阻礙設(shè)計(jì)者突破的一個(gè)不可忽視的點(diǎn)，當(dāng)然我不建議瘋狂學(xué)習(xí)各種新潮的軟件，當(dāng)自己在平面上已經(jīng)到達(dá)一個(gè)高度并且很難突破時(shí)，這時(shí)可以嘗試3d去更立體的體現(xiàn)自己創(chuàng)意。
當(dāng)周圍的朋友同事都在用sketch并且效率明顯比自己要高時(shí)，就要勇敢的去嘗試新的東西了。軟件革新一定程度上也帶來了設(shè)計(jì)革新。
主要分析設(shè)計(jì)者在設(shè)計(jì)中經(jīng)常犯的一些通用性的錯(cuò)誤，以及應(yīng)該如何去做。
調(diào)色盤中告別純黑色
什么？不使用純黑色？你聽到這個(gè)技巧，感覺可能會(huì)非?；闹?，但實(shí)際上，這確實(shí)是個(gè)中 肯的建議。主要問題就在于，我們通常會(huì)把較深的顏色看成是黑色。實(shí)際上，很難找到頁 正的純黑。
馬路不是純黑色，辦公椅也不是純黑色，網(wǎng)頁上的字體，其實(shí)也不是純黑色。
這張照片盡管修過圖色調(diào)很暗，但仍然沒有出 現(xiàn)純黑色。
純黑色是空洞的不存在任何感情的顏色，在視覺上會(huì)讓頁面中其他所有的顏色失去競(jìng)爭(zhēng) 力，并且變的毫無意義。
在我們?cè)O(shè)計(jì)頁面時(shí)，推薦使用產(chǎn)品主色中調(diào)色盤左下角的顏色，具體深到什么程度就看自 己的把控。
慎用襯線字體
在扁平化互聯(lián)網(wǎng)沒有興起之前，甶于襯線體每個(gè)字的筆劃有粗有細(xì)，在連續(xù)閱讀時(shí)流暢性 更好，所以非常被親睞。
然而扁平化互聯(lián)網(wǎng)時(shí)代到來之后，一切裝飾都變的謹(jǐn)憤起來，尤 其大篇幅的文字在寸土寸金的屏幕內(nèi)襯線體變得反而不利于閱讀了，所以如今的互聯(lián)網(wǎng)產(chǎn) 品極少去使用襯線體，而很多新手往往喜歡在該簡(jiǎn)潔的地方強(qiáng)加設(shè)計(jì)感，大面積的使用襯 線字體不僅無法增加設(shè)計(jì)感反而會(huì)讓頁面“負(fù)重“。
當(dāng)然特殊的頁面和H5頁面可以考慮 襯線體的使用符合頁面的氣氛，然而設(shè)計(jì)常規(guī)頁面時(shí)盡呈不要使用襯線體為好。
彩色背景別用黑色字
這一點(diǎn)很簡(jiǎn)單，然而也很容易被很多設(shè)計(jì)者忽略。深色在視覺上有后退感，如果在一個(gè)彩 色的背景上敲入黑色的字符就會(huì)導(dǎo)致視覺上非常不適，當(dāng)然黃色與黑色是一組特別的搭 配，然而大部分的彩色與黑色對(duì)于色彩把控力不足的情況下是很容易造成違和感的。
分即分合即合，不要含糊
“我不喜歡在一個(gè)列表內(nèi)的兩行字只有一個(gè)字號(hào)的差距”這句話與大家共勉。頁面中的元 素一定要有大中小之分，元素的大小不明確是導(dǎo)致頁面不夠干凈清晰的首要原因。
所有元 素都優(yōu)先相當(dāng)于所有元素都不優(yōu)先。另外頁面兩個(gè)不相關(guān)的板塊就明確的分開，同板塊內(nèi) 容就不要那么多的分割線，這就是頁面的秩序。當(dāng)然這一點(diǎn)在平面設(shè)計(jì)中也受用，元素的對(duì)比本來就可以產(chǎn)生美感。
憤用毛玻璃效果
iOS7之后毛玻璃這個(gè)概念開始被設(shè)計(jì)者熟知，利用虛實(shí)對(duì)比可以很好的襯托出毛玻璃上 方的元素。
然而這個(gè)效果也是很冒險(xiǎn)的，大家應(yīng)該知道人的視覺對(duì)于模糊的東西會(huì)下意識(shí) 的給出“低質(zhì)S”的評(píng)判，而一些基本功不扎實(shí)的設(shè)計(jì)者很難去權(quán)衡這個(gè)虛實(shí)對(duì)比的度， 容易造成頁面的臟與低品質(zhì)，并且技術(shù)對(duì)于“毛玻璃”效果的實(shí)現(xiàn)也比較復(fù)雜，所以此效 果效果在頁面處理時(shí)非必要情況盡不要去碰它。
字盡量不要壓圖
在幾年之前的網(wǎng)頁設(shè)計(jì)中，字壓圖的排版方式很常見，然而目前的設(shè)計(jì)趨勢(shì)一直在往直 觀，簡(jiǎn)潔的調(diào)性發(fā)展，字壓圖的處理方式就顯得過于老套了，尤其在界面設(shè)計(jì)中，字壓圖 的設(shè)計(jì)巷實(shí)對(duì)于文本的閱讀有阻礙，并且對(duì)于選圖的限制更高了，所以如今遇到圖文混排 時(shí)一般都如下處理
而在設(shè)計(jì)banner時(shí)有時(shí)候似乎避免不了圖文的相交，可以參考網(wǎng)易云音樂banner的設(shè) 計(jì)語言。當(dāng)然還可以通過給圖片添加漸變蒙版，或者降低圖片亮度透明度，以及修剪圖片 留出空白的方法來處理。?
投影的使用技巧
在我的上一篇文章中寫過，產(chǎn)品設(shè)計(jì)中盡呈少用投影，因?yàn)殚_發(fā)對(duì)于投影的處理由于可調(diào) 數(shù)值的限制，落地的效果往往與設(shè)計(jì)稿相差甚遠(yuǎn)，然而很多設(shè)計(jì)者在做概念練習(xí)稿時(shí)也很 喜歡加入一些投影元素給畫面加入一些空間感與活潑的元素，技術(shù)會(huì)進(jìn)步，這么做也無可 厚非。
然而投影同樣是把雙刃劍，用的好會(huì)讓畫面更生動(dòng)活潑，用不好就會(huì)讓畫面臟亂。
這里我分享給大家一個(gè)技巧，軟件中默認(rèn)的投影大多是黑色50%不透明度，我們直接調(diào)整 透明度確實(shí)會(huì)讓投影變的淡些但是沒有色彩傾向的投影是沒有感情在里面的，會(huì)顯得很生 硬。
所以我們可以把不透明度調(diào)整為100%,模式調(diào)整為正常，然后吸取當(dāng)前元素下的背 景色，并且在當(dāng)前調(diào)色板選取顏色較深的部分，然后調(diào)整到合適的大小就可以了。
還有一種處理手法是手動(dòng)制造投影而不用系統(tǒng)的圖層樣式，方法是復(fù)制一層當(dāng)前元素然后 同樣吸取背景色在當(dāng)前調(diào)色盤選取顏色較深部分，選擇高斯模糊，根據(jù)需要選擇數(shù)值，然 后罝于當(dāng)前元素的圖層之下就可以了。
這樣處理的優(yōu)點(diǎn)是比系統(tǒng)自帶的圖層樣式更自然， 當(dāng)做一些忌浮效果時(shí)推薦這種處理方式。
投影推薦使用兩種扱端的處理方式，一種是大小調(diào)整數(shù)值較大，要若隱若現(xiàn)彌散的效果， 另一種是需要設(shè)計(jì)感時(shí)，投影大小調(diào)整為零，直接的讓投影投在畫面上。
兩種方式根據(jù)不 同場(chǎng)景需求去選擇，睢一不推薦使用系統(tǒng)默認(rèn)的較重彌散效果，扱容易造成畫面臟亂。
憤用復(fù)雜圖標(biāo)
這一點(diǎn)不用過多的去解釋，復(fù)雜的圖標(biāo)在如今的時(shí)代已經(jīng)被漸漸拋棄了，簡(jiǎn)練的線條能說 明的東西就不要去用復(fù)雜的東西呈現(xiàn)，并且剪影形式的面性圖標(biāo)比線性圖標(biāo)更具識(shí)別性， 所以憤用復(fù)雜圖標(biāo)，讓畫面更簡(jiǎn)潔。
字號(hào)控制在11?28PT之間
平面設(shè)計(jì)有最小字號(hào)的限制，產(chǎn)品中同樣有，字號(hào)的扱限不可小于iipt，因?yàn)樾∮趇ipt 在視覺上會(huì)非常不適，并且識(shí)別性受到挑戰(zhàn)，當(dāng)然字號(hào)的極限大沒有一個(gè)數(shù)值的限制，建 議在28pt之內(nèi)瀏覽較為舒適，當(dāng)然排除h5或者banner的設(shè)計(jì)。
設(shè)計(jì)別太滿
這一點(diǎn)我要說的有點(diǎn)像平面設(shè)計(jì)中的留白，而產(chǎn)品中的留白更規(guī)則，例如信息卡片之間的 間距最好上下左右都相同，并且卡片內(nèi)的信息之間也避免太滿。
兩個(gè)不同的模塊之間更要 留出足夠的間距，會(huì)讓頁面更整潔與透氣。另外還有一點(diǎn)是我們切圖時(shí)，切片不要貼合巷 圖標(biāo)去切，容易出現(xiàn)切掉半個(gè)像素的情況，這時(shí)同樣最少留出1pt的安全距離。
明確設(shè)計(jì)風(fēng)格
設(shè)計(jì)之前就明確設(shè)計(jì)風(fēng)格，從而統(tǒng)一設(shè)計(jì)元素，避免同一頁面出現(xiàn)不同風(fēng)格元素，或者不 同頁面之間風(fēng)格迥異。
例如磨菇街的定位風(fēng)格就是少女系，所以一切圍繞巷少女系的原 則，產(chǎn)品中沒有尖角的出現(xiàn)，所有元素都處理的很圓潤，并且粉嫩的設(shè)計(jì)遍布產(chǎn)品角落而 很少有大面積冷色的出現(xiàn)。
選圖提高質(zhì)量與統(tǒng)一度
選圖的問題被太多次強(qiáng)調(diào)了，這里我簡(jiǎn)單分享一些選圖的規(guī)律與技巧。首先在質(zhì)M上去挑 選，模糊的圖一定不能用，一張模糊的圖可以讓整個(gè)頁面變的不整潔。
然后選圖的風(fēng)格盡 呈統(tǒng)一并且符合產(chǎn)品的整體調(diào)型，例如一些短文閱讀類產(chǎn)品的選圖就要文藝安靜一些，而 涅畫或者搞笑段子類產(chǎn)品就可以俏皮活潑一些。
另外一定記得盡M避免藍(lán)天白云類用圖， WinXP的桌面已經(jīng)深入人心了。
今天到此講解完畢，希望對(duì)大家有所幫助，如想學(xué)習(xí)更多UI設(shè)計(jì)教程，可以加QQ或微信：2877261857
也可以關(guān)注微信公眾號(hào): UI設(shè)計(jì)說，關(guān)注后回復(fù)書籍，便可以獲得66本UI設(shè)計(jì)零基礎(chǔ)學(xué)習(xí)書籍高清PDF版免費(fèi)贈(zèng)送！
