]]>
設(shè)計：The Woork Co
我曾經(jīng)寫過，UI設(shè)計是一個拼盤，它需要把版式設(shè)計、字體設(shè)計、配圖設(shè)計、插畫設(shè)計、攝影后期等所有與視覺有關(guān)的內(nèi)容都全部綜合在一個拼盤里，這個拼盤呈現(xiàn)的形式，可以是APP界面，或者網(wǎng)頁界面。
所以，學(xué)習(xí)UI設(shè)計，歸根到底，是對拼盤里的內(nèi)容進(jìn)行組合裝配的過程。今天我們這篇文，就是試著回答經(jīng)常收到的網(wǎng)友私信關(guān)于UI設(shè)計學(xué)習(xí)的問題：我應(yīng)該怎樣提高UI設(shè)計呢？
我一方面從技法上給大家一點(diǎn)學(xué)習(xí)建議，一方面主要從大環(huán)境，更高的維度來闡述這個看似只是職業(yè)技巧的問題。也許它不是職業(yè)技巧，而更甚是一個哲學(xué)問題。
搞清楚這一點(diǎn)，對你的職業(yè)生涯尤其重要，你能獲得學(xué)習(xí)提升的方向，也能幫助你判斷你的工作價值感在哪里。
一、你了解你的金主爸爸嗎？
你的UI界面出稿，最初的觀者受眾，是你的甲方爸爸。也可能是你的上級BOSS。他們的審美，其實(shí)就是你的UI界面審美的第一道關(guān)卡。
如果他們的審美趣味比較老套，估計你想潮起來也沒機(jī)會。參考dribbbble？別開玩笑了。認(rèn)真點(diǎn)開國內(nèi)那些廣告飄來飄去的門戶大網(wǎng)站。最好還能是他們所屬行業(yè)里前三的那種水平。對于金主爸爸們來說，絕大多數(shù)（不排除有另類者）都是以“利潤多”為目標(biāo)的。你也可以在這里把利潤換成流量。
審美能直接帶來利潤嗎？這篇文章不好直接回答這個問題，但是，你一定要知道，審美高，不是在職UI設(shè)計師們的第一追求目標(biāo)。accept it!
潛在提升對方的審美值
能潛移默化提升甲方的審美，這點(diǎn)非常關(guān)鍵。而能影響對方的前提，是你要用你的專業(yè)去征服對方。而不是和對方硬杠。
很多時候，我們以為boss并不關(guān)心我們的行為，其實(shí)，他只是表現(xiàn)出不在意的樣子，目的是為了讓你放松，表現(xiàn)出最真實(shí)的你。而他也在這一過程中默默觀察你。
所以，如果你能給他以”專業(yè)“的印象，那么這個印象就會提高你在工作過程中的話事權(quán)。
人與人之間的關(guān)系，其實(shí)就是一個潛在的能量拉鋸過程。你要增加自己在職業(yè)的能量值，類似把你的職業(yè)系數(shù)開大。你首先要接受這份雇傭關(guān)系，既然是關(guān)系，就必定在尋找一種平衡。如果你弱了，他自然就要強(qiáng)壓你，讓你難受，讓你996，讓你改稿改到噴血……如果你強(qiáng)了（至少在專業(yè)上強(qiáng)），他認(rèn)為你值得這份工資的支出，自然就會尊重你、怕你跳槽、聽你的意見……
如果不是奇葩上司或甲方，這份關(guān)系的建立，就是如此簡單。
所以，如果遇到一個審美偏低的金主爸爸，讓自己的專業(yè)去影響對方，就能達(dá)到提升自己的作品視覺的效果。
二、眼界來自你的手，更多來自你的心，和眼睛沒關(guān)系
眼睛的審美是貪婪的，沒有天花板的。之所以你覺得自己做的作品不好看，其實(shí)還是因為看過其他更好看的作品。
而好看是什么？其實(shí)我覺得很少人會思考這個問題。如果說好看就是流行，就是打開dribbble、Behance里那些推薦作品，然后讓他們來告訴我們好看的設(shè)計就應(yīng)該是這樣，那么我們的審美其實(shí)也是很被動的。
這又是一個哲學(xué)問題。但是我們還是不要活得這么復(fù)雜吧，回到技術(shù)層面。
要好看的界面？很簡單。每天對著Dribbble上排名top的作品進(jìn)行臨摹就可以了。臨摹不要想太多，就是做。做的過程，會告訴你所有的答案。
臨摹會帶來什么
臨摹的過程會有一種“再經(jīng)歷一遍創(chuàng)作者的design過程”的感覺。首先你會從排版上發(fā)現(xiàn)，哇，原來這樣排版更好看，文字可以用這種方式排在一起。
沒有圖片素材也沒關(guān)系，原作素材的缺席剛好是你的學(xué)習(xí)點(diǎn)的開始。打開圖片網(wǎng)站，搜索一張和原來素材類似的圖片。然后再和文字組合，看看和原作有什么不同。
下圖左邊是網(wǎng)上找來的原作，右邊是根據(jù)原作所做的臨摹。
很多借鑒的好作品，大都是英文排版。試著換成中文排版，看看怎樣把中文變得好看。如果直接用英文，的確在視覺上很省事。但是，你的金主爸爸未必會同意，你們的營銷策略也大概率不會答應(yīng)。
以下就是經(jīng)過中文洗禮以后的APP界面設(shè)計：
所以，如果是經(jīng)常做商稿，就要有心里有準(zhǔn)備。臨摹時也要有所調(diào)試。最好的臨摹，就是能超越原作。
通過手的訓(xùn)練，提升了你的審美感受力。起碼能追到最流行的視覺節(jié)奏，出稿就“下筆如有神”。這種“神”，甚至不需要你每次設(shè)計就打開參考圖庫，而是能直接從大腦中取貨。
三、你的原創(chuàng)力
雖然現(xiàn)在網(wǎng)上有很多優(yōu)秀作品，但是，有原創(chuàng)感的優(yōu)秀作品，其實(shí)非常非常少。因為多少大家都在相互借鑒，能完全獨(dú)創(chuàng)的其實(shí)非常稀缺。
你的金主爸爸或許不會給你時間原創(chuàng)。但是你要把原創(chuàng)列為自己職業(yè)生涯一個非常階段性的重大目標(biāo)。
你的原創(chuàng)力決定了你的職業(yè)生涯長短
設(shè)計師最大的能量原點(diǎn)，就是你的idea。這我在《沒有美術(shù)基礎(chǔ)的設(shè)計師怎樣學(xué)習(xí)插畫》這篇文章中也談到了。很多設(shè)計師之所以沒有在這行堅持下去，也是因為這個點(diǎn)沒辦法突破。
很多人說設(shè)計師是美工，美工也許是對沒有原創(chuàng)力的設(shè)計師的一個統(tǒng)稱。但我其實(shí)很想為美工正名，美工未必沒有原創(chuàng)力。美工側(cè)重“工”，只是側(cè)重點(diǎn)不一樣。并無高下之分。
任何工作，只要丟失了原創(chuàng)力，就會容易被取代。一個人如果做街道清潔做得有創(chuàng)造力，他就不再是普通的清潔工，而可能是環(huán)衛(wèi)專家。一個如果做農(nóng)活做得有原創(chuàng)力，他就可能是一個田園生活方式博主。
一份工作能否給你帶來價值感，也是以“原創(chuàng)的比例”作為基準(zhǔn)的。原創(chuàng)的比例越大，你在這份工作中的能動性越強(qiáng)，就越能給自己帶來成就感。
而你應(yīng)該怎樣迎來你的爆破點(diǎn)呢？
在沒有原創(chuàng)力的時候，我每天都很焦慮。除了臨摹，沒有別的辦法。所以每次能出稿，打開ps，我都很開心。因為只要練一次，就有一次的提升。這和積累積分是一樣的。
這次原創(chuàng)的不好看？沒關(guān)系，已經(jīng)積下1分了。這次沒有完全原創(chuàng)？沒關(guān)系，下次多增加一點(diǎn)原創(chuàng)的配比。
用積分的心態(tài)去提升自己，就能部分消減掉無法原創(chuàng)的焦慮。所以，很多人說我勤奮，其實(shí)大概也就是與其刷劇看小視頻，我更愿意在這里積分罷了。
不要害怕丑！
那天看綜藝，聽到一個人講：“一個人只有擺脫自戀，才是真正成長了”。這句話特別能共鳴到我。
很多人之所以不能原創(chuàng)，只是因為害怕被人說不好看。所以，只能借鑒別人的作品作為設(shè)計的開始。這段經(jīng)歷是必經(jīng)之路。
但是到了一定階段，這樣的開始就會帶來限制。如果有天斷網(wǎng)了，你就沒辦法創(chuàng)作。如果你的金主爸爸要你畫一畫APP的改版思路，你的下意識反應(yīng)是“等我打開dribbble參考看看”。這已經(jīng)很危險了。
雖然很多人已經(jīng)習(xí)以為常，但我卻感覺這不是正常的。設(shè)計師難道不應(yīng)該是立刻抓起筆來就能畫嗎？之所以雷同的APP界面這么多，大家的習(xí)慣造就了我們的現(xiàn)實(shí)。
作為一個自由設(shè)計師，我最大的自由大概就是有時間表現(xiàn)得真實(shí)且不好看。作為一個在職設(shè)計師，這需要你擠出時間留給你的未來。
切換到boss的維度再來看原創(chuàng)的價值
當(dāng)你拿著你的作品集準(zhǔn)備簡歷的時候，如果你能原創(chuàng)作品，并且驕傲的打出原創(chuàng)二字，提出你的原創(chuàng)思路。你的作品集肯定是會比其他（或許看起來更高大上，但是沒有原創(chuàng)力的作品）更有機(jī)會得到面試機(jī)會。
相同的薪資水平下，boss更青睞的是哪一種設(shè)計師呢？
如果你正在找工作，或者考慮跳槽，你永遠(yuǎn)要切換到boss的維度上，他請一個人是來做什么的？ 他為什么要招人？
他請的設(shè)計師如果只是按他的命令，他給的參考圖片來畫，他在心中給這個員工的分?jǐn)?shù)最多就是一個及格分。當(dāng)然，他不會隨便炒掉你，但是一有機(jī)會，一定會想辦法換掉你。而如果你能畫出他沒見過的更優(yōu)秀的作品，情況肯定會完全不一樣。
這里的Boss可能又會分為大公司和小公司，大小公司是相對不同的運(yùn)作模式。大公司一般走得是概念風(fēng)，他們花得起錢，所以更重視品牌的傳遞。小公司其實(shí)也分很多種類，但小公司一般都是Boss個人的人格化的體現(xiàn)，因此熟悉boss，摸清他的風(fēng)格比較重要。
但不管怎樣，原創(chuàng)力一定不止你的工作能力。而也是你的表達(dá)力的體現(xiàn)。表達(dá)，只有熟能生巧。自由的表達(dá)，能幫助這家企業(yè)輸出其內(nèi)在價值。這也就能更大帶來企業(yè)的收益。這是金主們的最愛。
四、UI設(shè)計師的素材庫
很多人對素材庫的概念就是付費(fèi)的圖庫。畢竟網(wǎng)上現(xiàn)在的付費(fèi)圖庫已經(jīng)手到擒來了。好照片，當(dāng)然有。佼佼者卻不多。
要用好素材，我們的UI設(shè)計就成功了一大半，可以說設(shè)計UI的過程，其實(shí)就是處理和組合素材的過程。下面我們可以把UI設(shè)計所需要的素材大致分為四類：
圖標(biāo)元素
其實(shí)現(xiàn)在UI常用的圖標(biāo)，是以簡約的線體為主的圖標(biāo)。網(wǎng)上已經(jīng)有很多免費(fèi)的UI線體圖標(biāo)給大家下載。如果UI界面不是特殊的行業(yè)類圖標(biāo)的話，常用的，比如：用戶、主頁、推薦、購買、登錄、郵箱、電話、客服……等這類圖標(biāo)的可選擇量是非常豐富的。
但是一旦涉及到特殊的圖標(biāo)，網(wǎng)上就未必能找到合適的資源。如果直接拿別人的素材資源，一旦要 用到特殊的圖標(biāo)時，如果找不到同類風(fēng)格的圖標(biāo)，這時就很棘手。這就需要你能自己根據(jù)原有的風(fēng)格線索來畫。
配圖
配圖我們可以分為兩類，一類是Banner類的視覺比例偏大的圖片。這類圖片可以是攝影或者插畫，通常，Banner的位置出現(xiàn)在頭部，所以要求畫質(zhì)高清且層次豐富。
單純靠一張攝影作品就做出頭部Banner的時代過去了，取而代之的是插畫或者對攝影做更進(jìn)一步的視覺處理。而且為了傳遞信息的準(zhǔn)確直達(dá)，也會添加相應(yīng)的文字來豐富畫面。
因此，光是對頭部Banner的設(shè)計，就需要以對待廣告設(shè)計的態(tài)度來承接它的設(shè)計。但又與此同時，需要和UI界面中其他的元素風(fēng)格相呼應(yīng)。
另一類是其他的圖片信息中的配圖，這類配圖與可能是產(chǎn)品和服務(wù)的圖片，如果是在介紹類的文字中出現(xiàn)，也需要準(zhǔn)確的輔助表現(xiàn)信息。
還有一種配圖的方向，也就是利用插畫。直接創(chuàng)作插畫就比去網(wǎng)上找圖片素材來得簡單，表現(xiàn)清楚概念就可以。
最后一種配圖的風(fēng)格就是C4D制作的質(zhì)感特別高級的立體藝術(shù)，場景裝置，在電商展示產(chǎn)品的時候用的多一些。
無論你是用哪一種方式表現(xiàn)配圖，攝影、插畫、立體……，都需要一門深入，表達(dá)得徹底。不是懂得越多越好，而是越深入越好。因此選好一個適合自己的方向非常重要。
字體
字體是很容易被忽略的元素之一，因為對于UI設(shè)計，尤其是中文字體更多依賴系統(tǒng)能提供什么字體，沒有平面設(shè)計那么自由。
但是UI設(shè)計師對字體卻要非常小心，尤其是大型的文字，比如Banner內(nèi)的文字，可以以圖片形式出現(xiàn)的文字以及英文，都要注意字形對整個界面的影響。
現(xiàn)在的字體商用版權(quán)也非常嚴(yán)格，因此大家在商用時要特別小心。比較保守的做法就是使用開源的字體，而想要特別一點(diǎn)的比較大的字體時，最好能自己設(shè)計。
視頻
如果是比較簡單的UI界面，很少會用到視頻。畢竟敢把視頻直接放到自己的服務(wù)器里給用戶看，而不是引用外部資源的平臺也不多。視頻的流量真心是貴啊~（我自己的個人網(wǎng)站就用過視頻，還好一直比較慶幸流量不大）
交互
UI的交互是交給代碼實(shí)現(xiàn)的，但是UI設(shè)計師不會代碼，那么就用動效的方式來展示。這樣能把交互概念更完整的遞交給前端。
所以UI設(shè)計師也需要對交互的體驗多一些了解，尤其要對代碼實(shí)現(xiàn)到哪個程度心中有數(shù)。否則你的界面只能是一張圖片，只有審美功能，沒辦法實(shí)現(xiàn)成為真正的界面。
以上幾個方向能拿下，基本上你的UI界面設(shè)計，就算不能登頂，也能在行業(yè)里被眾星捧月膜拜好一陣了。
其實(shí)方向大家都知道，缺乏的只是日積月累。
五、為自己攢時間
很多人說，你說的都知道，但是我沒時間啊，要加班啊……
記住，當(dāng)你在說這句話的時候，你已經(jīng)進(jìn)入了一個惡循環(huán)，這個惡循環(huán)就是：重復(fù)工作無暇顧及自身成長，沒辦法成長所以更要努力重復(fù)工作……最后到了中年危機(jī)，加班加不動的時候，前面來了一大波比你能加班，還能接受低薪的小年輕，瞬間成為“被優(yōu)化”的一員。
那么，如何為自己攢時間應(yīng)對這一潛在危機(jī)呢？我這里有個辦法就是：不做無謂的時間上的犧牲。
什么是時間上的犧牲呢？和別人無休止?fàn)幷撘粋€問題，一年換N家公司，反復(fù)無常找不到方向，閑聊無意義的虛幻的可能性……總的來說就是做無用功。這些零碎時間，完全有可能替換成你的學(xué)習(xí)成長的時間。
當(dāng)你覺得自己零碎時間多，而整塊時間不足的時候，你應(yīng)該想想為自己做一套時間管理計劃。讓自己多一些自律。
比如我一直自由職業(yè)，所以有段時間每天都睡到9點(diǎn)起床，以為自己睡飽了才能工作效率更高，其實(shí)相反發(fā)現(xiàn)那段時間工作都沒太多進(jìn)展。后來改成7點(diǎn)起床以后，由于早起完成了很多工作，反而一天下來發(fā)現(xiàn)自己能完成的效率比之前高很多倍。
最后，你會發(fā)現(xiàn)，其實(shí)做一份好的作品，提高自己的作品視覺效果，這套方法，也能讓自己變成一個更好的人。優(yōu)秀不需要努力的，它只能是一個習(xí)慣。
原文地址：飛屋設(shè)計
作者：飛屋睿UIdesign
]]>
Neumorphism Soft Ui Music Player
有關(guān)新擬物風(fēng)格(Neuomorphism)的介紹和相關(guān)內(nèi)容請訪問：
#p#副標(biāo)題#e#
卡片式設(shè)計對于我們來說并不陌生，從設(shè)計類網(wǎng)站上或市場上的一些APP中也會看到很多的卡片式設(shè)計的案例，卡片式設(shè)計也是UI設(shè)計中最常用的方式之一。
最近在新項目的設(shè)計中也嘗試使用了卡片式設(shè)計，結(jié)合實(shí)際項目中的得到了一些思考進(jìn)行總結(jié)并歸納出一些卡片式設(shè)計的小知識點(diǎn)。同時希望自己通過本次的總結(jié)進(jìn)行知識沉淀，以及跟大家一起探討下卡片式的設(shè)計。
來源于日常
在現(xiàn)實(shí)生活中的卡片式設(shè)計可以說是無處不在，例如身份證、交通卡、銀行卡、名片、便利貼、撲克牌、游戲卡……諸如此類的生活常見品都是以卡片的方式存在，其共同點(diǎn)都使用一個容器中承載著內(nèi)容，并且具有“便攜性、信息簡潔和相對獨(dú)立性”。
UI設(shè)計中卡片的使用場景
在項目設(shè)計之初我分析了一些使用卡片設(shè)計的App，并且從中整理總結(jié)了幾個較為常見的卡片式設(shè)計的使用場景。
Feed流
卡片式的feed流設(shè)計是一種非常常見的設(shè)計，早在前幾年Facebook、Google+等產(chǎn)品就使用了這一方式，F(xiàn)eed流作為一種長內(nèi)容的媒介，用戶需要長時間的滑動看內(nèi)容并篩選有效信息，卡片式設(shè)計很好的解決了內(nèi)容與內(nèi)容的區(qū)塊分隔，讓用戶在長屏幕滑動中依舊可以很好的明確每一塊的內(nèi)容。
實(shí)際案例-淘寶微淘
瀑布流設(shè)計
瀑布流的出現(xiàn)讓單屏區(qū)域內(nèi)顯示了更多的內(nèi)容，而內(nèi)容較多的情況下，使用卡片式設(shè)計較好的對內(nèi)容進(jìn)行了區(qū)域劃分，讓左右上下的內(nèi)容從整體中具有相對的獨(dú)立性。
實(shí)際案例-Pinterest
左右滑動組合型內(nèi)容
卡片式設(shè)計具有較強(qiáng)的層次感，相比于拉通平鋪更能呈現(xiàn)內(nèi)容可滑動感受，并且塊狀化的設(shè)計讓內(nèi)容具有較高的區(qū)域分割感。
實(shí)際案例-QQ音樂
Tips提醒
作為非界面固定內(nèi)容，卡片式設(shè)計可以讓tips提醒設(shè)計變得更自由，在符合用戶體驗的基礎(chǔ)上，它可以出現(xiàn)在任何我們想要它出現(xiàn)的位置。
實(shí)際案例-淘票票會員提醒
結(jié)合手勢的單塊可互動內(nèi)容
若頁面中有且只有一個主內(nèi)容，并且需要用戶進(jìn)行快速篩選時，可考慮這種結(jié)合卡片式設(shè)計與手勢設(shè)計的方式。大大增強(qiáng)了用戶對于設(shè)計的體驗感知和豐富視覺表現(xiàn)。
實(shí)際案例-探探首頁
卡券類設(shè)計
卡券類的設(shè)計實(shí)際上是一種物化映射的過程，我們在現(xiàn)實(shí)中看到的卡券造型，結(jié)合卡片式的擬物化設(shè)計，讓用戶在屏幕上可以更直觀的感知，提升了設(shè)計的代入感。
實(shí)際案例-京東領(lǐng)券中心
集合型功能入口
集合型功能入口往往會有多個入口，使用卡片式設(shè)計讓入口形成一個區(qū)域整體，可以做到既統(tǒng)一又相對獨(dú)立。
實(shí)際案例-淘寶微淘關(guān)注賬號
個人主頁頂部內(nèi)容卡片
個人主頁的設(shè)計往往會在氛圍上營造沉浸感，卡片式的設(shè)計可以把關(guān)鍵信息進(jìn)行概括收歸，讓原本單個的內(nèi)容形成一個整體。
實(shí)際案例-美團(tuán)外賣會員
規(guī)則探討
基礎(chǔ)的卡片設(shè)計規(guī)則，相信大家在一些系統(tǒng)級別的設(shè)計指導(dǎo)規(guī)范中也或多或少都能了解到，不同平臺的規(guī)范差異性其實(shí)不會有太多本質(zhì)性的區(qū)別，更多的是處理技巧或方式的差異，而每個設(shè)計師對其理解的角度也會具有一些差異化，這里分享下我對于卡片式設(shè)計的一些基礎(chǔ)想法。
1.卡片的質(zhì)感打磨
同樣的卡片設(shè)計，不同的人做出來的感受可能會有差別，而表達(dá)卡片質(zhì)感的主要關(guān)鍵基礎(chǔ)點(diǎn)在于：卡片形體、投影深度、卡片顏色對比，我們需要了解這些基礎(chǔ)知識點(diǎn)之后，再結(jié)合實(shí)際的APP風(fēng)格進(jìn)行設(shè)計。
卡片形體
就像圖標(biāo)的圖形設(shè)計一樣，不一樣的形體也能表達(dá)出不一樣的氣質(zhì)，因此在設(shè)計的時候我們需要依據(jù)整體的風(fēng)格進(jìn)行表達(dá)。異形卡片的設(shè)計，可以讓原有方方正正的卡片表達(dá)出差異化，從造型上打破一些傳統(tǒng)的處理方式，再結(jié)合一些IP人物元素可以更加深入的表達(dá)出具體的內(nèi)容氛圍。
投影深度
投影的視覺效果，會直接影響著整體卡片的質(zhì)感，太深太大的投影會顯得整體卡片過于厚重，太淺太小的投影則顯得過度生硬，因此合理的數(shù)值比例則可以讓卡片看起來自然有質(zhì)感。在項目中我常用的一組數(shù)值規(guī)律是1:2或1:3，例如Y軸偏移10px，模糊度則設(shè)定為20或30px，這樣成比例的數(shù)值出來的效果會較為自然，如下圖：
卡片顏色對比
卡片與背景的顏色對比會影響這卡片的整體質(zhì)感，在設(shè)計時我們需要把握好卡片與底色的對比，不同的明暗對比出來的質(zhì)感也會有差異。這里有兩點(diǎn)建議：1.卡片色與背景色不宜太過接近或使用同一顏色，因為會影響卡片整體的空間質(zhì)感或使得卡片的邊緣銳度下降；2.深色背景上，盡量讓卡片與背景色在同一色系或者明度不要差異太大，避免過于突兀。
2.邊距的設(shè)定
在使用卡片式設(shè)計時，經(jīng)常會糾結(jié)邊距的設(shè)定，寬邊還是窄邊？多少像素更為合適？經(jīng)常我會帶著這種疑問去設(shè)計。
基于內(nèi)容的簡單規(guī)則
卡片式設(shè)計作為設(shè)計的表現(xiàn)形式，最終是為了承載內(nèi)容，因此邊距的寬窄也需要依賴于實(shí)際內(nèi)容的判斷。結(jié)合我在項目中的嘗試分享以下幾點(diǎn)：
多窄少寬
卡片內(nèi)容較多是使用窄邊距，讓卡片具有足夠的空間來展現(xiàn)內(nèi)容，內(nèi)容較少則可以考慮采用寬邊距來打造整體的視覺空間感，如下圖app store和淘寶的設(shè)計對比。當(dāng)然這只是一個建議，實(shí)際還得具體問題具體分析。
再如一些瀑布流、宮格、橫滑模塊較多的APP的設(shè)計亦是如此，在內(nèi)容較多的情況下會把邊距壓縮到最小的合理間距。
內(nèi)外成比例
以最外邊為基礎(chǔ)值往里設(shè)計，間距以固定比例進(jìn)行縮減，雖然沒有刪格來得規(guī)范，但也可以讓設(shè)計變得有跡可循。
基于柵格
柵格系統(tǒng)解決了一些基礎(chǔ)的板式問題，有助于提升設(shè)計的規(guī)范性，讓設(shè)計更加有跡可循。在設(shè)定卡片式的邊距時可以適當(dāng)應(yīng)用刪格系統(tǒng)，讓邊距與內(nèi)容形成固定的關(guān)系，這樣可以幫助整體的卡片設(shè)計更加具有細(xì)節(jié)和規(guī)則。
4.卡片的標(biāo)題設(shè)定
標(biāo)題的設(shè)定主要考慮以下幾點(diǎn)：1.是在卡片內(nèi)還是卡片外；2.標(biāo)題的字號設(shè)定多少更合適；3標(biāo)題是否加粗？
卡片內(nèi)或外的對比
在項目設(shè)計中讓我較為糾結(jié)的是：標(biāo)題應(yīng)該在卡片內(nèi)還是卡片外？通過了一些案例的嘗試之后，我總結(jié)了一個規(guī)則（需要依據(jù)內(nèi)容的形態(tài)而進(jìn)行設(shè)計）：當(dāng)卡片內(nèi)容是獨(dú)立的模塊或模塊中只有一個大標(biāo)題時可設(shè)定在卡片內(nèi)；當(dāng)卡片內(nèi)容是以組合呈現(xiàn)或者具有延續(xù)性內(nèi)容時設(shè)定在卡片外，形成最外層的主標(biāo)題。
標(biāo)題的字號設(shè)定
標(biāo)題主要作用為2點(diǎn)：1.簡短說明每個模塊的內(nèi)容；2.讓用戶在長頁面瀏覽中起到引導(dǎo)、定位的作用。通過一些嘗試發(fā)現(xiàn)：1.當(dāng)內(nèi)容較少時，并不需要太大的字號即可起到標(biāo)題的作用；2.當(dāng)內(nèi)容較多時，較小的標(biāo)題字號則容易被沉入內(nèi)容中，讓用戶在瀏覽的過程中難以發(fā)現(xiàn)，而導(dǎo)致信息獲取缺失；3.標(biāo)題應(yīng)該與正文字號大小差異建議在6-10px，這樣可以更好的拉開差異，讓標(biāo)題更具有標(biāo)題感。
字體是否加粗
常規(guī)思維下我們都會對標(biāo)題進(jìn)行加粗，我在實(shí)際中的經(jīng)驗得到的總結(jié)是：需要看手機(jī)系統(tǒng)或不同廠商的機(jī)型。我在項目之初都對標(biāo)題進(jìn)行了加粗，但后續(xù)在跟進(jìn)還原時看到的效果并不理想，特別是Android的機(jī)型上，因為我們使用的是系統(tǒng)默認(rèn)字體，android系統(tǒng)很多字體并未對系統(tǒng)進(jìn)行優(yōu)化，而是使用微軟雅黑，微軟雅黑在android系統(tǒng)上再加粗，就會顯得整個系統(tǒng)的外輪廓特別粗糙，最后我們依據(jù)不同的機(jī)型進(jìn)行了差異化的選擇。
4.圓角的規(guī)則
圓角的設(shè)定實(shí)際上沒有太多的原則問題，只要符合整體的風(fēng)格調(diào)性即可。當(dāng)然不同的圓角也能表達(dá)出不同的質(zhì)感，大圓角表達(dá)柔和、小圓角表達(dá)硬朗。
圓角的規(guī)則設(shè)定
以卡片的圓角作為基礎(chǔ)的參考值往內(nèi)推算整體的圓角使用規(guī)范，卡片與卡內(nèi)的元素形成合理的比例規(guī)則，而非隨意根據(jù)“經(jīng)驗”進(jìn)行設(shè)定。
圓角大小差異對比
大小的差異化呈現(xiàn)出不同的視覺感受和風(fēng)格差異，我們在設(shè)計時更多需要考慮我們設(shè)計的產(chǎn)品風(fēng)格或氣質(zhì)是適合大圓角還是小圓角，而非依據(jù)一些設(shè)計網(wǎng)站上的流行趨勢。因此基于不同的風(fēng)格或者實(shí)際內(nèi)容場景下進(jìn)行設(shè)定才更為合理。
5.寬窄間距對比
卡片式設(shè)計相比拉通式設(shè)計更需要考慮設(shè)計中的透氣感。在常規(guī)的規(guī)則下，對內(nèi)容邊距及四周邊距進(jìn)行調(diào)整，讓內(nèi)容之間具有較好的空間呼吸感，從而讓設(shè)計得到留白的效果。如下圖對比案例，在基礎(chǔ)刪格不變的情況下，每個間距都在原有基礎(chǔ)上擴(kuò)大了12px（接近1.33倍），從而讓內(nèi)容具有較為舒適的寬度進(jìn)行閱讀
優(yōu)點(diǎn)分析
選擇某一種設(shè)計方式的重點(diǎn)在于我們了解這種方式的優(yōu)點(diǎn)，并且可以把這些優(yōu)點(diǎn)融合到我們的設(shè)計當(dāng)中。在項目設(shè)計中，我總結(jié)了幾點(diǎn)卡片式設(shè)計的優(yōu)點(diǎn)。
優(yōu)化模塊化，提升內(nèi)容區(qū)域感
模塊化的設(shè)計也是我們?nèi)粘Ｖ袝?yīng)用到的方法，結(jié)合卡片式的設(shè)計可以讓模塊化的規(guī)則變得更加簡單，增加了模塊之間的可復(fù)用性和延展性。而當(dāng)內(nèi)容較多的情況下，使用卡片式設(shè)計可以有效直接的形成區(qū)域分隔，從視覺感知上就對內(nèi)容進(jìn)行了分隔，提升用戶獲取信息的效率。
提升內(nèi)容獨(dú)立性
在組合型的內(nèi)容設(shè)計上，使用卡片式設(shè)計可以讓每個小塊內(nèi)容呈現(xiàn)相對獨(dú)立的展現(xiàn)特性，結(jié)合模塊化的設(shè)計，可以在一大片關(guān)聯(lián)的內(nèi)容中，做到既統(tǒng)一又相對獨(dú)立。
增強(qiáng)視覺空間感
卡片式的設(shè)計可以提升整體設(shè)計層次感，通過投影、前后顏色的設(shè)定，讓內(nèi)容與背景之間產(chǎn)生視覺空間感。
增強(qiáng)視覺表現(xiàn)力
在設(shè)計中我們可以對卡片進(jìn)行異形設(shè)計，用來達(dá)到我們想要的風(fēng)格表現(xiàn)。當(dāng)然在一個頁面內(nèi)盡量不要太多，盡量使用頁面中的首個卡片進(jìn)行差異化處理，讓整體表現(xiàn)出一點(diǎn)不同即可。
增強(qiáng)可點(diǎn)性
卡片式設(shè)計產(chǎn)生的空間感，讓每個模塊更加突出，相比扁平式的處理方式，卡片式從視覺感官上會較為突出，從感官上更具可點(diǎn)擊感知。
缺點(diǎn)及建議
任何一種設(shè)計方式都會有其利弊，最終選擇某一種其實(shí)不過就是當(dāng)下最適合而已，而在嘗試中我也總結(jié)了幾點(diǎn)卡片式設(shè)計存在的一些缺點(diǎn)，當(dāng)然只是個人的思考而已。
橫向空間利用率降低
卡片式設(shè)計的存在左右邊距，因此在有限的屏寬內(nèi)內(nèi)容橫向區(qū)域相比于拉通式設(shè)計有所減少，在內(nèi)容較多的情況下可以適當(dāng)調(diào)小卡片左右邊距。
避免過多的層級
從整體來說，卡片式的設(shè)計本身就是增加了基礎(chǔ)背景的層級表現(xiàn)，其視覺層級相比拉通式更為豐富，因此不建議在卡片上再二次疊加塊狀式設(shè)計，避免造成層級復(fù)雜。在項目中也會遇到內(nèi)容層級需要多層級的表現(xiàn)，從中總結(jié)了2種方式：1.利用不拉通分割線；2.利用淺色背景底色。
不適合長文或內(nèi)容多的表達(dá)
若在設(shè)計上使用了卡片式的設(shè)計風(fēng)格，但在一些長文表現(xiàn)的界面建議去除卡片。長文章的頁面更強(qiáng)調(diào)閱讀的沉浸感，用戶需要更多的專注于文字，這時候無邊的體驗更適合。
把握好界面的分區(qū)，避免過于擁擠的排版
卡片設(shè)計具有獨(dú)特的視覺空間感，但卡片與卡片直接也會有分隔，因此在設(shè)計時更應(yīng)該對內(nèi)容進(jìn)行歸納，避免產(chǎn)生過多的小塊卡片而導(dǎo)致排版過于擁擠、凌亂或者內(nèi)容不夠?qū)挾日宫F(xiàn)。
最后總結(jié)
無論是卡片式或者拉通平鋪的方式，其最終的目的都是為了服務(wù)于內(nèi)容，我們在做設(shè)計的過程中只是選擇適合于呈現(xiàn)我們內(nèi)容的一種方式。根據(jù)具體的內(nèi)容情況給出合理/合適的設(shè)計判斷才是我們需要不斷提升的關(guān)鍵點(diǎn)，切莫流于形式而忽略了內(nèi)容設(shè)計本身的重要性。
原文地址：IDfor（公眾號）
1. 針對像素密度設(shè)計，而不是像素
在3dp或者4dp下的像素值
如果你不熟悉dp的概念，我也在這里先說明一下：像素密度是每一英寸的像素值也叫ppi，單位dp是單詞“density-independent pixel”的縮寫，有時也縮寫為“dip”。
在設(shè)計界面時，建議不要針對像素而設(shè)計，而是針對設(shè)備的像素密度進(jìn)行設(shè)計。這樣能確保設(shè)計元素能在各個不同設(shè)備上很好的適配。
例如，如果我們設(shè)計一個按鈕元素，大小是200x50dp，那么它在160ppi的屏幕上顯示為200x50dp，在320ppi的屏幕上顯示為400x100px，即原始資源的2倍。
在某些屏幕每英寸的像素要比其他屏幕多，但設(shè)計資源卻不會在像素密度高的屏幕上顯得更小，這是因為在這些屏幕上會以原始尺寸的2倍，3倍，4倍進(jìn)行渲染。這樣的機(jī)制可以確保所有設(shè)計資源可以在不同密度和設(shè)備之間保持同樣大小。
例如，iPhone XS Max的屏幕尺寸是414×896，但這不是像素尺寸而是點(diǎn)的數(shù)量，以像素為單位時是1242x2688px。考慮到這一點(diǎn)，在設(shè)計iPhone XS Max時，我會將在414×896點(diǎn)下設(shè)計，然后交付@3x的設(shè)計資源。
2. 善用8dp增量
為什么設(shè)計中要用8dp這個增量規(guī)則？這里有一個簡單的解釋：我們使用8而不是5這個神奇數(shù)字的原因是，如果設(shè)備有1.5倍的分辨率，就很難被整除而出現(xiàn)鋸齒。
此外，絕大多數(shù)的屏幕尺寸都可以被8整除，這就是使得我們的設(shè)計在這些屏幕上適配變得很簡單。
通過在8點(diǎn)網(wǎng)格上以8為增量進(jìn)行設(shè)計，也讓設(shè)計變得更加統(tǒng)一。設(shè)計師不需要更多的猜測，就能快速做出決策，做到完美適配。
想要更全面地了解這個規(guī)則，可以去看看Bryn Jackson的8點(diǎn)網(wǎng)格文章（文章鏈接在 https://spec.fm/specifics/8-pt-grid）。
3. 去掉線和邊框
在做設(shè)計的時候，應(yīng)該時不時的停下來看看，確定下設(shè)計出的容器是否會使得UI變得混亂。通常，用于分隔內(nèi)容的框和線可以用留白代替。
我們以前做設(shè)計的時候，喜歡將元素套在盒子里。所以，只需要把這些盒子去掉就能使頁面看起來不那么密集，并給元素更多的呼吸空間，整個界面就能提升一個檔次。
4. 關(guān)注對比度
合適的對比度不僅可以讓用戶看到頁面上的相關(guān)信息，還可以提高產(chǎn)品的易用性。
設(shè)計一款產(chǎn)品就類似于建造一個公共建筑，比如圖書館或?qū)W校，它需要包容所有人：盲人，色盲或視力受損的用戶。
網(wǎng)頁可用性標(biāo)準(zhǔn) (WCAG) （https://webaim.org/articles/contrast/ ）規(guī)定對比度至少要達(dá)到4.5：1。
為了確保你做的設(shè)計符合標(biāo)準(zhǔn)，建議下載一個叫“stark （ https://getstark.co/）”的插件，來檢查設(shè)計是否OK。
5. 遵循用戶習(xí)慣
某些元素被認(rèn)為是標(biāo)準(zhǔn)的原因有很多。
例如，如果將按鈕設(shè)計為圓形，那么當(dāng)文本需要為“Start Free Trial”時，按鈕就會占用不必要的垂直空間。
除此之外，用戶已經(jīng)開始期待類似的產(chǎn)品體驗。如果你設(shè)計出來的網(wǎng)站，App，軟件功能和用戶所習(xí)慣的不太一樣，那么它就是不直觀的，用戶就可能對這種體驗感到失望。因此，最好是在現(xiàn)有的設(shè)計規(guī)范的范圍內(nèi)進(jìn)行創(chuàng)新，而不是去重新發(fā)明輪子。
6. 用顏色深淺構(gòu)建層次結(jié)構(gòu)
每種顏色都有一個視覺權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)。通過使用顏色的深淺，為元素賦予不同的重要性。
這里的經(jīng)驗就是，如果一個元素比另一個元素更重要，那么它就應(yīng)該具有更高的視覺權(quán)重。這能讓用戶很容易區(qū)分重要和不重要的信息，從而快速瀏覽頁面。
更大，更醒目的信息會首先吸引用戶的眼球，然后才會看向它下面的次要信息。
7. 避免使用超過兩種字體
一個普遍接受的設(shè)計共識就是在同一張界面中使用的字體數(shù)量應(yīng)該要有限制。一般來說，兩種不同的字體就足夠了。這不是說不能用更多的字體了，而是最好要有合理的理由，否則最好不使用。
解決這個問題的方法是使用字體族。
使用字體族，我們可以在設(shè)計中使用具有不同變體的相同字體，來自同一家族的字體被設(shè)計成可以一起使用，是靈活且一致的。
在選擇字體時，優(yōu)先選擇具有各種權(quán)重的字體，如細(xì)體，標(biāo)準(zhǔn)體，中粗體，加粗體，超粗體，寬體，擴(kuò)展體和斜體。這將給你更多的發(fā)揮空間，而不需要添加額外的字體。
8. 直接而不是讓用戶思考
直接是產(chǎn)品設(shè)計的一個很好策略，因為，為什么要讓用戶思考？
結(jié)賬頁面，電子郵件收件箱，搜索歷史記錄，后退按鈕等都是很好的例子。
在付款頁面上（如果設(shè)計得好的話），我不需要記住我買的是什么東西，也能夠清楚地識別出我要買的東西，而不需要喚起我的記憶。
搜索歷史
在我的Gmail收件箱里，我只需要掃一眼，就能確定哪些郵件我讀過，哪些沒有讀過，而無需多想。或者，如果我登錄到Amazon，我可以快速地從我之前瀏覽過的地方繼續(xù)看，因為它能告訴我最近查看的條目。
“通過使對象，操作和選項可見來最小化用戶的閱讀壓力。用戶不必記住從對話的一個部分到另一個部分的信息。在適當(dāng)?shù)臅r候，系統(tǒng)使用說明應(yīng)該是可見的或者易于搜索的。”——尼爾森諾曼
9. 別讓用戶慢下來
對于用戶來說，速度和效率是唯一重要的事情。用戶來用某個應(yīng)用，目的就是為了解決他的問題。
“我想要更快一點(diǎn)” — Ricky Bobby
如果做了很多豐富的功能，那很好，但不要讓你的創(chuàng)造力妨礙我作為用戶的目標(biāo)。
一個關(guān)于動畫和微交互的經(jīng)驗法則是，如果體驗增加了不必要的時間，那么它并不能真正改善體驗。
有目的使用動畫可以改善體驗，但添加不必要的干擾和移動元素卻不會。
我經(jīng)常在Dribbble上看到著陸頁設(shè)計，當(dāng)用戶在頁面上滾動時，頁面就會動起來。它往往過于活躍，所有的東西都在動，反而內(nèi)容本身被忽略了。作為一個用戶，當(dāng)界面中發(fā)生了這么多事情時，很難讓其應(yīng)該注意什么。這簡直是在浪費(fèi)用戶寶貴的時間。
Sorry to call you out Dribbble user
大量研究發(fā)現(xiàn)，界面動畫的最佳速度在200到500毫秒之間。這些數(shù)字是基于人類大腦的特殊品質(zhì)。任何小于100毫秒的動畫都是即時的，根本不會被識別。而超過1秒的動畫會給人一種延遲的感覺，會讓用戶覺得無聊。”— The ultimate guide to proper use of animation in UX
所以，如果你在使用動畫，一定要有目的。如果這些動畫是有目的的，那么不要讓我等待超過500毫秒。在2019年，惹惱你的用戶只需要一毫秒。
10. 少即是多
每次我們想添加額外的信息到頁面:按鈕，文本，圖像，動畫，插圖等，它都會與相關(guān)的信息競爭。如果頁面上的內(nèi)容太多，元素的重要性就會降低。
一個完美的案例就是著名的谷歌主頁，而不是像Yahoo一樣淹沒訪問者可能并不需要的信息里，設(shè)計仍然集中在核心任務(wù)上：搜索。
對不住了Yahoo，我不得不這么做了
我最喜歡的設(shè)計格言之一是：“完美，不是因為沒有什么可以增加，而是沒有什么可以減少。” — Antoine de Saint-Exupery
原文：https://uxdesign.cc/10-rules-of-thumb-in-ui-design-aa5f91885444
作者：Danny Sapio
譯者：彩云sky
]]>
#p#副標(biāo)題#e#
#p#副標(biāo)題#e#
