關(guān)于文字編排的幾條小建議。
排版，或者說(shuō)對(duì)文字的編排，不應(yīng)該只是平面設(shè)計(jì)師才需要具備的設(shè)計(jì)能力。在互聯(lián)網(wǎng)設(shè)計(jì)大行其道的背景下，我認(rèn)為不同方向的設(shè)計(jì)師都應(yīng)該或多或少的具備一定水平的排版功底。能把排版做好，除了有助提升綜合設(shè)計(jì)能力之外，對(duì)自己作品的展示，也能夠起到錦上添花的作用。以下介紹幾個(gè)文字編排的小技巧，有助快速提升版式設(shè)計(jì)感。
重復(fù)在版式設(shè)計(jì)中是指統(tǒng)一與增強(qiáng)，即重復(fù)使用顏色、字體、圖形等講究條理性與統(tǒng)一性；重復(fù)出現(xiàn)的顏色、字體與圖形能夠有突出與強(qiáng)調(diào)的作用。
在這里我們只針對(duì)在文字編排中，如何使用重復(fù)來(lái)編排文字，從而提升版式的設(shè)計(jì)感。
通過(guò)上圖的案例，我們將文字進(jìn)行重復(fù)的編排之后，除了讓畫(huà)面更加飽滿規(guī)整之外，既能展示完整的星球圖案，文案也一定程度得到了加強(qiáng)，也使得主題更加明確，氛圍感更強(qiáng)。
在文字的編排中，描邊的使用，多用在背景點(diǎn)綴與副標(biāo)題上。在上文對(duì)文字重復(fù)的編排中，也使用了文字描邊的處理，這也說(shuō)明了設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中需要根據(jù)具體情況，找到適宜需求的設(shè)計(jì)方式。
用描邊處理對(duì)文字進(jìn)行編排，我們可以看到，描邊大多用在了輔助文字上，且被用來(lái)充當(dāng)畫(huà)面點(diǎn)綴物。原因在于文字失去填充之后，可讀性會(huì)大幅度降低，就會(huì)失去文字用于承載信息的作用，所以我們?cè)谟妹柽厡?duì)文字進(jìn)行編排的時(shí)候，要盡量避免將其用在主標(biāo)題或者重要的文字信息上。
使用文字描邊去編排的好處是，當(dāng)我們?cè)谠O(shè)計(jì)的時(shí)候發(fā)現(xiàn)畫(huà)面太空曠，且沒(méi)有其他元素可以編排時(shí)，用這個(gè)方式豐富畫(huà)面，除了提升設(shè)計(jì)形式感之外，也可以讓我們一切的設(shè)計(jì)元素都有合理的來(lái)源，而不是隨機(jī)的添加突兀元素。
字距，即文本中兩個(gè)字之間的距離。在長(zhǎng)文本的文字排版時(shí)，我們很少會(huì)主動(dòng)去控制文字間距。因?yàn)樵谝豢钭煮w被設(shè)計(jì)出來(lái)時(shí)，它的默認(rèn)字距是經(jīng)過(guò)設(shè)計(jì)與驗(yàn)證過(guò)的，是最適合閱讀的字距。
但我們?cè)诎媸皆O(shè)計(jì)中，為追求設(shè)計(jì)形式感，在文案較少的情況下，會(huì)對(duì)短文本或單一大標(biāo)題的字距進(jìn)行調(diào)整。原因在于短文本或大標(biāo)題一般字?jǐn)?shù)較少，閱讀負(fù)擔(dān)也相對(duì)較輕，所以可以接受對(duì)其字距進(jìn)行適當(dāng)?shù)娜藶榭刂啤?/p>
通過(guò)以上兩個(gè)字距編排案例的對(duì)比，可以發(fā)現(xiàn)錯(cuò)誤編排忽略了文字閱讀性，在控制字間距的時(shí)候需要在形式感與實(shí)用性進(jìn)行平衡。
中文繁體，從字型上相較簡(jiǎn)體而言，筆劃會(huì)相對(duì)飽滿與均衡，文字排版使用上也會(huì)使版面更加規(guī)整。但從使用習(xí)慣來(lái)說(shuō)，在做面向內(nèi)地市場(chǎng)的設(shè)計(jì)時(shí)，繁體的使用需要反復(fù)斟酌，避免使用過(guò)于生僻的繁體，且盡量多用在短文本或標(biāo)題。
從上圖案例可以看出，簡(jiǎn)體中文的“二零·二一”雖然在閱讀習(xí)慣上會(huì)相對(duì)順暢，但單從文字編排來(lái)說(shuō)，筆劃相差巨大，會(huì)造成視覺(jué)傾斜，看起來(lái)有些失衡。改成繁體中文“貳零·貳壹”，字型筆劃更加均衡飽滿，且文字也沒(méi)那么生僻，可閱讀性依然可以得到滿足。
對(duì)文案進(jìn)行斷句，在重點(diǎn)部位進(jìn)行定位打斷，然后在文字編排時(shí)體現(xiàn)出來(lái)。以此來(lái)制造視覺(jué)停留，故意發(fā)生不連續(xù)性的閱讀，讓閱讀落在重點(diǎn)部分。
斷句編排，可以看得出在版面受限制的情況下，是一個(gè)非常好用的編排方式，可以將主標(biāo)題與副標(biāo)題拉開(kāi)差距，而且還能制造視覺(jué)重點(diǎn)。
將適合主題的圖案（圖片）填充進(jìn)文字，在設(shè)計(jì)風(fēng)格與調(diào)性適合的條件下，盡可能選擇稍粗字體，以便展示圖案全貌，如果能看清圖案全貌的話，也能起到強(qiáng)化設(shè)計(jì)風(fēng)格的效果。
找一張精致且符合設(shè)計(jì)調(diào)性的圖片，將它填充進(jìn)文字，就能起到上面案例的效果。突出了標(biāo)題，即不影響閱讀性，也強(qiáng)化了畫(huà)面整體效果。
對(duì)字體進(jìn)行裁剪和切割，是編排文字的常用手法，讓字體形成缺口或錯(cuò)位，以此來(lái)創(chuàng)造形式感。但在裁切之后，缺失的筆畫(huà)會(huì)一定程度影響文字的閱讀性。所以在裁切時(shí)要注意保留文字的筆畫(huà)特征，盡可能的降低裁剪對(duì)文字可讀性的影響。
字體裁剪和切割的編排方式，大多用在相對(duì)比較大的字號(hào)上，原因在于字型被改變之后可讀性會(huì)減低，而相對(duì)較大的字號(hào)，可以彌補(bǔ)字型筆劃缺失帶來(lái)的可讀性降低。
在平面的文字編排中，制造空間感的方式，主要依靠層級(jí)的疊加。營(yíng)造出前后錯(cuò)落的視覺(jué)感受，以此來(lái)突出我們要傳達(dá)的主體信息。
層次的區(qū)分，除了前后關(guān)系之外，還要對(duì)大小與顏色進(jìn)行區(qū)分。盡量明顯的對(duì)比，以便拉開(kāi)文字之間的層級(jí)關(guān)系。
接下來(lái)，可以試著運(yùn)用上面的編排方式，來(lái)做一張最近很流行的酸性設(shè)計(jì)風(fēng)格的海報(bào)。具體如何編排文字，當(dāng)然是先把文字隨便排進(jìn)版式中，然后再對(duì)版式的文字進(jìn)行編排。
下圖是作者按照上面文字編排技巧，花了十幾分鐘做出來(lái)的海報(bào)，你也可以動(dòng)手試試～
文字編排也是一門(mén)創(chuàng)作藝術(shù)，遠(yuǎn)不止上文所提到的這幾種方式。本文只是列舉了幾種常用的方法，希望能對(duì)大家有所幫助
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
不知道你們有沒(méi)有思考過(guò)“對(duì)話框”和“彈窗”的區(qū)別，我們平常所稱(chēng)呼的“彈窗”主要著眼于動(dòng)作，意思就是彈出來(lái)的窗口，是泛指，在GUI（Graphical User Interface）屏幕中幾乎所有彈出來(lái)的對(duì)象都可以稱(chēng)之為“彈窗”。
在常用的兩個(gè)前端網(wǎng)頁(yè)開(kāi)發(fā)組件Ant Design和ElementUI中，沒(méi)有單獨(dú)命名為“彈窗”的組件，都是細(xì)分在各個(gè)功能分類(lèi)中。比如Ant Design中相關(guān)的細(xì)分就有警告提示、全局提示、對(duì)話框、通知提醒框、氣泡確認(rèn)框等，而ElementUI中則又是不一樣的細(xì)分法，除了分類(lèi)方法和命名不一樣，歸根結(jié)底達(dá)到的目的是一樣的，以上我們都可稱(chēng)之為“彈窗”，當(dāng)然在工作中用細(xì)分的稱(chēng)呼會(huì)更專(zhuān)業(yè)更明確。
這里的“窗口”對(duì)標(biāo)“對(duì)話框”和“彈窗”的概念，窗口是承載應(yīng)用程序的區(qū)域，應(yīng)用程序的窗口被打開(kāi)，則表示該應(yīng)用程序正在運(yùn)行中。窗口可以移動(dòng)、可以放大縮小，主要有二種姿態(tài)，一種是“獨(dú)占式”，一種是“暫時(shí)式”。顧名思義，“獨(dú)占式”就是需要占據(jù)大部分屏幕的應(yīng)用，ps、ai的窗口就是“獨(dú)占式”窗口，而“暫時(shí)式”則大部分時(shí)間在后臺(tái)運(yùn)行，比如音樂(lè)播放器、殺毒軟件等，只需在必要時(shí)打開(kāi)即可。
一個(gè)應(yīng)用通常由一個(gè)主窗口和若干輔助窗口構(gòu)成，彈窗就是典型的輔助窗口之一。
對(duì)話框強(qiáng)調(diào)了用戶(hù)與計(jì)算機(jī)進(jìn)行對(duì)話的過(guò)程，是疊加在應(yīng)用主窗口上的彈出框，一般在對(duì)話中它會(huì)給出消息或要求輸入。當(dāng)對(duì)話完成后，即可關(guān)閉對(duì)話框。說(shuō)人話就是，對(duì)話框一般需要用戶(hù)進(jìn)行操作，當(dāng)用戶(hù)輸入或者點(diǎn)擊“確認(rèn)”、“取消”等按鈕時(shí)，計(jì)算機(jī)會(huì)根據(jù)指令進(jìn)行工作，這是一個(gè)人機(jī)“對(duì)話”的過(guò)程，因此稱(chēng)之為“對(duì)話框”。
無(wú)論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對(duì)話被打斷，所以對(duì)話框通常是模態(tài)的（下文會(huì)解釋模態(tài)和非模態(tài)的定義）。
梳理完三個(gè)容易混淆的概念之后，接下來(lái)主要從彈窗的二個(gè)角度展開(kāi)討論：彈窗的分類(lèi)和應(yīng)用場(chǎng)景；彈窗的設(shè)計(jì)細(xì)節(jié)和技巧。
彈窗可分為兩大類(lèi)型：“模態(tài)彈窗”和“非模態(tài)彈窗”。
模態(tài)彈窗：用戶(hù)必須給予彈窗反饋，除非點(diǎn)擊關(guān)閉或者操作完成，否則彈窗會(huì)一直在。形式上來(lái)說(shuō)就是給當(dāng)前頁(yè)面添加蒙層，使用戶(hù)將注意力集中在彈窗上。上文提到，無(wú)論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對(duì)話被打斷，模態(tài)彈窗不會(huì)輕易被打斷，所以對(duì)話框通常也都是模態(tài)彈窗。
模態(tài)彈窗的常見(jiàn)場(chǎng)景：你打開(kāi)了一個(gè)應(yīng)用的模態(tài)彈窗后沒(méi)有管它，然后切換到其他應(yīng)用程序中去，等你忙完回到原來(lái)的應(yīng)用時(shí)，那個(gè)當(dāng)初的模態(tài)彈窗仍舊在那兒等你。這就是模態(tài)彈窗，雖然看起來(lái)僵硬死板，但是它的目的和使用范圍通常是非常清晰的。
非模態(tài)彈窗：不需要給出反饋，不影響用戶(hù)的其他操作，主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類(lèi)型。
下圖紅框中就是典型的非模態(tài)彈窗，它們可以同時(shí)開(kāi)啟且互不影響，不會(huì)影響主程序的進(jìn)程。
非模態(tài)彈窗的另一個(gè)特點(diǎn)就是：實(shí)時(shí)生效。點(diǎn)開(kāi)非模態(tài)彈窗的同時(shí)仍然可以看見(jiàn)主界面，主界面會(huì)根據(jù)你的操作實(shí)時(shí)變化，你可以隨心所欲地不斷選擇、改變、選擇、改變，而模態(tài)彈窗則無(wú)法在你點(diǎn)擊其中一個(gè)表單的當(dāng)下立即做出改變。
下圖例子就是非模態(tài)的屬性配置彈窗。
出于營(yíng)銷(xiāo)目的，這類(lèi)彈窗都會(huì)第一時(shí)間出現(xiàn)在你面前，直到手動(dòng)關(guān)閉，它的特點(diǎn)就是不用登錄也會(huì)出現(xiàn)，提高曝光率，便于拉新和轉(zhuǎn)化。
主要是為了將一些重要信息通知給用戶(hù)，這些信息要么來(lái)自一些被觸發(fā)的事件，要么來(lái)自應(yīng)用開(kāi)發(fā)者的信息，一般在用戶(hù)登錄后第一時(shí)間彈出，確保用戶(hù)不會(huì)錯(cuò)過(guò)。需要注意的是，在應(yīng)用的通知中心一般也需要保留這類(lèi)重要或者高級(jí)別的通知，以便用戶(hù)可以隨時(shí)查看回顧。
提示類(lèi)彈窗是由應(yīng)用程序主動(dòng)彈出的消息，主要有三種狀態(tài)：錯(cuò)誤、警告、確認(rèn)。通常是用戶(hù)進(jìn)行某項(xiàng)操作后給出的反饋信息，會(huì)中斷當(dāng)前工作流，屬于阻塞型提示。
以上都屬于通知公告類(lèi)的“模態(tài)彈窗”，特點(diǎn)就是一般不需要用戶(hù)具體操作，用戶(hù)將其關(guān)閉或者點(diǎn)擊“確認(rèn)”等按鈕即代表用戶(hù)已經(jīng)接收到該消息，彈窗就完成了它的任務(wù)。
“簡(jiǎn)單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創(chuàng)建項(xiàng)目、分享鏈接、更改名稱(chēng)等操作。
有些應(yīng)用的功能配置中有很多復(fù)雜的屬性，簡(jiǎn)單平鋪的彈窗無(wú)法滿足需求，需要分層分類(lèi)歸納，于是從20世紀(jì)90年代開(kāi)始出現(xiàn)了選項(xiàng)卡/標(biāo)簽頁(yè)彈窗。它的優(yōu)點(diǎn)是合理利用了空間，也能讓用戶(hù)更好的理解信息層級(jí)。
mac os 8.5系統(tǒng)的彈窗（發(fā)布于1998年10月）
monday.com的配置彈窗（簡(jiǎn)潔的標(biāo)簽頁(yè)）
標(biāo)簽頁(yè)彈窗的設(shè)計(jì)必須合理且適度，找到信息之間的因果關(guān)系，仔細(xì)斟酌并加以連接整理。同時(shí)，單個(gè)彈窗中的標(biāo)簽頁(yè)不宜過(guò)多，一般不超過(guò)五個(gè)（動(dòng)態(tài)可增減的標(biāo)簽頁(yè)除外）。
如果你的標(biāo)簽頁(yè)過(guò)度堆疊，你需要嘗試改變交互方式，重新整理信息。一種辦法是增加標(biāo)簽頁(yè)的深度，將能夠歸納在一起的內(nèi)容盡量整合，放置在單個(gè)標(biāo)簽頁(yè)中；另一種辦法是拆分信息，分成多個(gè)簡(jiǎn)單的彈窗。
下圖中的例子就是第一種辦法，整個(gè)彈窗有三個(gè)標(biāo)簽頁(yè)，但是單個(gè)標(biāo)簽頁(yè)中又劃分了更詳細(xì)的結(jié)構(gòu)化信息，是一個(gè)典型的標(biāo)簽頁(yè)少但信息量大的彈窗。
流程步驟彈窗與標(biāo)簽頁(yè)彈窗接近，區(qū)別就是步驟彈窗需按順序進(jìn)行，一般上一步未完成之前無(wú)法進(jìn)入下一步，用戶(hù)注冊(cè)常用這種方式。
屬性配置彈窗主要為了讓用戶(hù)改變某一對(duì)象的屬性，可以是局部屬性也可以是全局屬性。
屬性配置也可以用模態(tài)彈窗，如何選擇用“模態(tài)”還是“非模態(tài)”？當(dāng)你需要讓用戶(hù)實(shí)時(shí)看到界面的變化或者表單項(xiàng)簡(jiǎn)單的時(shí)候可以選擇“非模態(tài)”，如果操作復(fù)雜或者信息加載比較耗時(shí)，則采用“模態(tài)”更合理。
下圖為實(shí)時(shí)生效的日期選擇彈窗
下拉菜單幾乎都是非模態(tài)，它的優(yōu)勢(shì)明顯，沒(méi)有復(fù)雜操作和各種表單，只需要鼠標(biāo)劃過(guò)點(diǎn)擊即可，快速高效。
上文中應(yīng)用級(jí)的消息提示通常是模態(tài)彈窗，而非模態(tài)的消息提示彈窗則通常從頁(yè)面的頂部或者右側(cè)彈出，這類(lèi)彈窗可以長(zhǎng)時(shí)間駐留在屏幕邊緣，也可以一段時(shí)間后自動(dòng)消失。
點(diǎn)擊按鈕時(shí)，彈出氣泡式的彈窗就是氣泡框，氣泡框可以針對(duì)元素進(jìn)行簡(jiǎn)單的操作，尺寸也會(huì)根據(jù)內(nèi)容大小不一。
Tooltips跟上圖的氣泡框很類(lèi)似，區(qū)別在于Tooltips更輕量，屬于頁(yè)面中最小的彈窗類(lèi)型，用于功能的提示說(shuō)明，通常都是文字，背景用深色來(lái)與主界面拉開(kāi)層次。
一般來(lái)說(shuō)，如果是明確的屬性配置彈窗都應(yīng)該有一個(gè)標(biāo)題來(lái)說(shuō)明用途或功能，以及關(guān)聯(lián)的動(dòng)詞來(lái)方便理解。比如“創(chuàng)建列表”、“刪除列表”、“修改配置”、“配置參數(shù)”等，不同標(biāo)題對(duì)應(yīng)不同的功能場(chǎng)景，前提是方便理解。另外，動(dòng)詞在名詞前面或者后面都可以，注意統(tǒng)一規(guī)范即可，不要一會(huì)兒在前一會(huì)兒在后。
標(biāo)題字號(hào)一般比默認(rèn)文本字號(hào)大2px或4px，也有應(yīng)用為了突出標(biāo)題，選擇使用更大的字號(hào)，但大的字號(hào)也應(yīng)該符合文字規(guī)范，而不是隨意使用。
模態(tài)彈窗應(yīng)至少包含一個(gè)以上的關(guān)閉方式，常見(jiàn)的彈窗關(guān)閉方式有4種：（1）、右上角的關(guān)閉按鈕；（2）、彈窗底部的“取消”按鈕；（3）、彈窗外的任意區(qū)域；（4）、一段時(shí)間后自動(dòng)消失。
“關(guān)閉”按鈕在彈窗外：常見(jiàn)于營(yíng)銷(xiāo)彈窗，一方面按鈕遠(yuǎn)離彈窗，比較隱蔽，拖延用戶(hù)關(guān)閉彈窗的時(shí)間，提高信息的曝光率。
“關(guān)閉”按鈕在彈窗上：版式設(shè)計(jì)中有一個(gè)“破型”的概念，是一種打破規(guī)矩的設(shè)計(jì)技巧，能讓畫(huà)面快速吸引眼球，所以營(yíng)銷(xiāo)類(lèi)彈窗經(jīng)常采用這種設(shè)計(jì)方法。這種概念可以理解為，我們希望用戶(hù)關(guān)注于被強(qiáng)調(diào)的部分，常見(jiàn)的場(chǎng)景就是ios系統(tǒng)批量刪除App的時(shí)候，應(yīng)用圖標(biāo)左上角會(huì)出現(xiàn)“移除”按鈕。這種方式強(qiáng)調(diào)了“關(guān)閉”按鈕，視覺(jué)上增加層次外，用戶(hù)的關(guān)閉體驗(yàn)也更佳，減輕干擾性彈窗對(duì)用戶(hù)的負(fù)面情緒。
“關(guān)閉”按鈕在彈窗內(nèi)：這是應(yīng)用最廣泛最不容易出錯(cuò)的方式，對(duì)用戶(hù)來(lái)說(shuō)，固定在彈窗右上角的“關(guān)閉”按鈕代表了安全感，在誤操作或者想中斷操作時(shí)我們會(huì)自然而然地去右上角點(diǎn)擊“關(guān)閉”。
彈窗底部的按鈕一般有2種功能:（1）、取消或者確認(rèn)；（2）、進(jìn)入下一步流程?；诖蠖鄶?shù)用戶(hù)右手掌握鼠標(biāo)的習(xí)慣，一般按鈕居右下角的設(shè)計(jì)方式更廣泛。這些按鈕上的文字大不相同，代表了對(duì)計(jì)算機(jī)的不同指令，但相同的結(jié)果都是關(guān)閉了當(dāng)前彈窗。
有些應(yīng)用也會(huì)采取按鈕居左的設(shè)計(jì)，這種方式有一個(gè)優(yōu)點(diǎn)就是減少誤操作，讓按鈕遠(yuǎn)離鼠標(biāo)點(diǎn)擊熱區(qū)。
這種方式一般用于模態(tài)彈窗，除了彈窗中的關(guān)閉按鈕外，點(diǎn)擊彈窗外的任意區(qū)域關(guān)閉體驗(yàn)更佳。操作配置類(lèi)彈窗不建議采用這種方式，容易誤操作導(dǎo)致正在配置中的彈窗被關(guān)閉。
B端彈窗的標(biāo)題字號(hào)通常比內(nèi)容文本大2px或4px，常用字號(hào)為12px、14px、16px，14px為默認(rèn)文本字號(hào)，12px為輔助說(shuō)明字號(hào)，也有緊湊型頁(yè)面將12px作為常規(guī)字號(hào)。無(wú)論選用何種字號(hào)，都應(yīng)跟主界面的字體規(guī)范保持一致。
左對(duì)齊：彈窗中應(yīng)用最多的對(duì)齊方式，適合表單較多的配置類(lèi)彈窗。
居中對(duì)齊：常見(jiàn)于消息提示類(lèi)彈窗，適合圖文結(jié)合或者信息較少時(shí)的排版方式。
兩邊對(duì)齊：兩邊對(duì)齊的方式讓彈窗看起來(lái)更規(guī)整，適用于平鋪的配置類(lèi)彈窗。一般表單較多的情況下不建議使用兩邊對(duì)齊的方式，一方面左對(duì)齊比兩邊對(duì)齊看起來(lái)更有層次，另一方面多表單時(shí)兩邊對(duì)齊會(huì)使彈窗看起來(lái)冗長(zhǎng)。
除了對(duì)齊方式，表單的排列是B端彈窗中最令人頭疼的一塊內(nèi)容了，在一些復(fù)雜的操作彈窗中，常常包含各種類(lèi)型的表單，例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項(xiàng)，很容易讓表單看起來(lái)凌亂，也影響了交互操作。
單行一個(gè)表單項(xiàng)：常見(jiàn)的表單排列，適用于表單較少的排版方式。
單行多表單并排：在復(fù)雜場(chǎng)景中，單行只排列一個(gè)表單項(xiàng)會(huì)讓彈窗超長(zhǎng)，因此會(huì)采用多個(gè)表單并列分布的方式。這種方式存在2個(gè)問(wèn)題：（1）、如果表單的標(biāo)題長(zhǎng)短不一，看起來(lái)參差不齊，下圖中的表單標(biāo)題一樣長(zhǎng)是最理想的場(chǎng)景；（2）、橫向距離長(zhǎng)，導(dǎo)致彈窗過(guò)大。
標(biāo)題與表單分行排列：越來(lái)越多的應(yīng)用采用這種表單排版方法，這種方法可以兼顧更多場(chǎng)景，可拓展性也更高。這種方法會(huì)增加縱向空間的占用，不過(guò)眼睛焦點(diǎn)的縱向?yàn)g覽比橫向?yàn)g覽獲取信息效率更高，所以在表單復(fù)雜的情況下，相比于上一種方法也是一種更優(yōu)解。
表單的排版不只局限于一種，我們需要根據(jù)表單內(nèi)容來(lái)設(shè)計(jì)。但是需要注意3點(diǎn)：
(1)、當(dāng)表單標(biāo)題長(zhǎng)短不一，上下無(wú)法等距排列時(shí)，我們要盡量將標(biāo)題和表單分行排列；
(2)、一行不要出現(xiàn)太多的表單項(xiàng)，一般來(lái)說(shuō)彈窗中最多一行排列三個(gè)；
(3)、表單的靈活性很強(qiáng)，哪些需要寬度固定，哪些需要根據(jù)內(nèi)容可擴(kuò)展可換行，我們都要在設(shè)計(jì)中加以規(guī)范說(shuō)明，多考慮可能會(huì)出現(xiàn)的樣式問(wèn)題，提前規(guī)避。
彈窗是一個(gè)容器，容器的大小取決于放置其中的內(nèi)容物。這里主要討論場(chǎng)景復(fù)雜的對(duì)話框的尺寸規(guī)范，其他例如Tooltips之類(lèi)可作為單獨(dú)的組件在需要的場(chǎng)景直接調(diào)用即可。
對(duì)話框的大小主要根據(jù)內(nèi)容而定，B端應(yīng)用中，一個(gè)尺寸無(wú)法滿足所有類(lèi)型的彈窗需求，所以我們要設(shè)定幾種常規(guī)尺寸，一般可設(shè)定為4種：S（通知提示類(lèi)）、M（配置簡(jiǎn)單）、L（配置復(fù)雜或者擴(kuò)展詳情）、特殊（根據(jù)實(shí)際情況而定）。pc的小屏幕分辨率為1024*768，所以高度盡量控制在600px以?xún)?nèi)（除去導(dǎo)航欄、工具欄高度），寬度控制在1000px以?xún)?nèi)，如果你所設(shè)計(jì)的B端產(chǎn)品在某個(gè)固定的場(chǎng)景中使用，也可以根據(jù)使用場(chǎng)景而定，原則就是要讓彈窗能夠一屏展示完全。
這里主要分享一個(gè)小技巧，對(duì)于彈窗來(lái)說(shuō)很實(shí)用。sketch右側(cè)屬性面板有一個(gè)“調(diào)整尺寸“功能，非常適合各種組件化的應(yīng)用。不同場(chǎng)景下我們會(huì)需要不同尺寸的彈窗，有了這個(gè)功能，我們不需要每個(gè)彈窗都畫(huà)一遍，只需要?jiǎng)?chuàng)建一組基本的彈窗規(guī)范，其他尺寸可以根據(jù)所需場(chǎng)景調(diào)整。
未調(diào)整過(guò)的組件不能隨意更改尺寸，否則將變形不可用。
創(chuàng)建彈窗組件時(shí)，把彈窗里需要固定不便的尺寸參數(shù)設(shè)置好。（設(shè)置方法：靠左的左邊固定，靠右的右邊固定，對(duì)角的靠?jī)蓚€(gè)邊固定，分割線高度固定，文字圖標(biāo)寬高都固定）。
設(shè)置好后的彈窗組件即可在設(shè)計(jì)稿中隨意調(diào)整大小，固定參數(shù)不會(huì)發(fā)生變化，因此我們?cè)谠O(shè)計(jì)規(guī)范中只需要做一種或二三種常見(jiàn)的彈窗樣式即可，不需要把設(shè)計(jì)稿中的每種尺寸都放到設(shè)計(jì)規(guī)范中。
表單同理，在組件中設(shè)置好參數(shù)后，調(diào)用時(shí)可以根據(jù)情況替換圖標(biāo)、文字和寬高，非常方便。
在B端設(shè)計(jì)中，隨著數(shù)據(jù)量的增加和業(yè)務(wù)線的擴(kuò)大，設(shè)計(jì)師在設(shè)計(jì)時(shí)，常常需要考慮到交互的可擴(kuò)展性，我們?cè)O(shè)計(jì)的交互至少要滿足未來(lái)半年到一年的產(chǎn)品應(yīng)用。因此作為使用頻率很高的彈窗，我們?cè)谠O(shè)計(jì)時(shí)尤其需要考慮全面，不只為了滿足當(dāng)前的場(chǎng)景，也要考慮未來(lái)可能應(yīng)用的場(chǎng)景。
作者：time不休
鏈接：https://www.zcool.com.cn/article/ZMTE3NjYyMA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
01. 按鈕設(shè)計(jì)強(qiáng)弱表現(xiàn)
在整個(gè)產(chǎn)品設(shè)計(jì)中我們要根據(jù)信息傳遞的優(yōu)先級(jí)對(duì)按鈕設(shè)計(jì)進(jìn)行主次區(qū)分，設(shè)計(jì)表達(dá)要有強(qiáng)弱差異。按鈕設(shè)計(jì)可以通過(guò)大小、填充、描邊、色相、飽和度等的不同來(lái)進(jìn)行強(qiáng)弱差異，不同強(qiáng)弱的差異表現(xiàn)出按鈕的等級(jí)：行動(dòng)觸發(fā)、主要、次要、輔助、禁用等。
02. 圓角設(shè)置要合理
對(duì)于按鈕邊框來(lái)說(shuō)，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用，只是相對(duì)較少，會(huì)顯得按鈕不方不圓的，設(shè)計(jì)表現(xiàn)顯得不夠成熟。
全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通?？刂圃?1/4H（高度值的四分之一）以?xún)?nèi)（僅為個(gè)人參考，并非絕對(duì)值）。
03. 投影設(shè)置要用對(duì)色彩關(guān)系
給一個(gè)有彩色系按鈕設(shè)置投影時(shí)，選擇無(wú)彩色系（比如黑色）也能達(dá)到效果，只是為了得到更好的視覺(jué)效果，提高用戶(hù)感官體驗(yàn)。我們也可以嘗試基于按鈕本身色相來(lái)確定投影顏色，這樣得到的效果會(huì)顯得更加干凈清爽。
04. 投影的使用勿過(guò)度泛濫
雖然投影的運(yùn)用可以使按鈕更有層次感，但是也需要根據(jù)具體情況慎用。比如對(duì)于一些淺色按鈕來(lái)說(shuō)也許投影反而會(huì)降低按鈕的識(shí)別度，使得按鈕配色環(huán)境顯得不夠干凈清爽。
05. 給按鈕文字一點(diǎn)呼吸感
按鈕文字和邊框的設(shè)計(jì)要預(yù)留一定的留白，不要做“舍不得”的設(shè)計(jì)，使得按鈕給人感覺(jué)很擁擠。如果你把控不好可以分析一些按鈕的負(fù)空間獲取經(jīng)驗(yàn)，看看文字大小和負(fù)空間之間是否存在某種比例關(guān)系。找到這個(gè)比例關(guān)系運(yùn)用到按鈕設(shè)計(jì)中，也許會(huì)讓你的設(shè)計(jì)顯得更加成熟穩(wěn)重。
06. 按鈕設(shè)計(jì)別讓用戶(hù)思考
按鈕的存在是為了引導(dǎo)用戶(hù)進(jìn)行引導(dǎo)式操作，而不是讓用戶(hù)對(duì)其產(chǎn)生困惑。按鈕設(shè)計(jì)別讓用戶(hù)思考這是啥，是否可以點(diǎn)擊，需要簡(jiǎn)潔明了的對(duì)此操作進(jìn)行指引。用戶(hù)已經(jīng)養(yǎng)成對(duì)按鈕外觀和功能的行為習(xí)慣，如果你設(shè)計(jì)的按鈕樣式與“標(biāo)準(zhǔn)”差異太大，用戶(hù)就會(huì)產(chǎn)生疑惑，影響使用體驗(yàn)。
07. 樣式表達(dá)的一致性
當(dāng)設(shè)計(jì)元素規(guī)范統(tǒng)一時(shí)，用戶(hù)操作過(guò)程中的理解成本最低，一致性也因此成為最有力的可用性原則之一。我們?cè)谠O(shè)計(jì)按鈕的時(shí)候要注意樣式表達(dá)的一致性，比如：按鈕形狀、色彩定義、風(fēng)格特征等，這樣會(huì)使得我們的設(shè)計(jì)可用性更強(qiáng)。
08. 箭頭運(yùn)用不是字符輸入
一些初入職場(chǎng)的設(shè)計(jì)師會(huì)偷懶直接字符輸入形成按鈕內(nèi)部所需箭頭，這樣的表達(dá)方式自然顯得粗糙些。箭頭要當(dāng)成圖標(biāo)來(lái)進(jìn)行設(shè)計(jì)，控制好箭頭的粗細(xì)和文字筆畫(huà)的粗細(xì)值接近，這樣顯得更有細(xì)節(jié)和態(tài)度。
09. 按鈕設(shè)計(jì)主次分明
通過(guò)信息對(duì)比才能形成主次之分，按鈕設(shè)計(jì)需要在風(fēng)格上進(jìn)行區(qū)分，達(dá)到層次結(jié)構(gòu)的視覺(jué)提示。主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺(jué)效果，更好的引導(dǎo)用戶(hù)根據(jù)設(shè)定的軌跡進(jìn)行操作。
10. 按鈕設(shè)計(jì)不要讓用戶(hù)誤解
在整個(gè)項(xiàng)目設(shè)計(jì)規(guī)范中，我們需要避免讓用戶(hù)把非按鈕狀態(tài)的內(nèi)容進(jìn)行誤判。在確定好按鈕樣式特征之后，不要在其它場(chǎng)景運(yùn)用其樣式特征或者類(lèi)似的風(fēng)格特征，這樣會(huì)讓用戶(hù)產(chǎn)生錯(cuò)誤的認(rèn)知，因而進(jìn)行無(wú)用的操作。
11. 按鈕文本表達(dá)要言簡(jiǎn)意賅
在進(jìn)行按鈕文本思考的時(shí)候，盡量減少字符和單詞的數(shù)量，內(nèi)容表達(dá)言簡(jiǎn)意賅，只要能夠準(zhǔn)確傳達(dá)信息識(shí)別度即可。有時(shí)候也不一定需要文本，圖標(biāo)可以傳遞的信息可以考慮文本的減少，也許可以讓界面的呼吸感更強(qiáng)。
12. 按鈕文本設(shè)置切勿換行
單行文字的可讀性更高，如果出現(xiàn)換行就會(huì)降低可讀性。我們?cè)谠O(shè)計(jì)按鈕的時(shí)候，確保文本內(nèi)容在一行之內(nèi)顯示，如果設(shè)計(jì)空間不足要考慮文本內(nèi)容的精簡(jiǎn)。
13. 特殊場(chǎng)景要靈活轉(zhuǎn)變
底部按鈕的運(yùn)用并非固定不變，不同機(jī)型或者特殊場(chǎng)景的考慮需要靈活轉(zhuǎn)變。比如 iPhone X 等類(lèi)型的機(jī)型，由于底部需要預(yù)留主頁(yè)控制器的位置，所以在設(shè)計(jì)按鈕的時(shí)候需要考慮上中下的過(guò)渡銜接，這樣才能帶給用戶(hù)更好的感官體驗(yàn)。
14. 按鈕大小要便于點(diǎn)擊
按鈕需要方便用戶(hù)進(jìn)行點(diǎn)擊操作，如果用戶(hù)點(diǎn)擊失敗或者誤點(diǎn)到周邊元素，就會(huì)帶給用戶(hù)不友好的體驗(yàn)。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實(shí)現(xiàn)出來(lái)的按鈕交互熱區(qū)都會(huì)滿足點(diǎn)擊需求。
如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區(qū)能夠滿足點(diǎn)擊區(qū)域要求。
15. 同屬板塊按鈕大小一致
在同屬板塊內(nèi)的按鈕設(shè)計(jì)，我們可以通過(guò)按鈕的強(qiáng)弱來(lái)體現(xiàn)層級(jí)關(guān)系，不要讓按鈕大小不一，這樣視覺(jué)平衡會(huì)受到影響。
16. 按鈕設(shè)計(jì)考慮文本最大值
稍微注意細(xì)節(jié)的設(shè)計(jì)師也不會(huì)讓文本的長(zhǎng)度超過(guò)按鈕寬度，這是一個(gè)非常明顯的錯(cuò)誤。但是按鈕文本變得很長(zhǎng)卻是遇見(jiàn)過(guò)的，幾個(gè)字即可表達(dá)的意思卻使用了過(guò)多修飾詞。在進(jìn)行按鈕文本思考的時(shí)候，要根據(jù)最佳的視覺(jué)效果設(shè)定一個(gè)最大值，不要任其無(wú)限制發(fā)揮，這樣會(huì)使得最終的視覺(jué)效果大打折扣，甚至影響用戶(hù)感官體驗(yàn)。
17. 保持按鈕可讀性
按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度，確保用戶(hù)可以一目了然的發(fā)現(xiàn)它?，F(xiàn)在很多產(chǎn)品都適配了深色主題模式，按鈕的配色不能只考慮白色或者淺色背景下的運(yùn)用，需要考慮大多數(shù)背景下的適配。在進(jìn)行色彩選擇的時(shí)候，始終保持按鈕與背景的高對(duì)比度和可讀性。
18. 按鈕去文本是否合理
關(guān)于按鈕文本的設(shè)置需要結(jié)合信息傳遞的識(shí)別性和準(zhǔn)確性，雖然純圖標(biāo)顯得設(shè)計(jì)簡(jiǎn)潔大方，但是需要考慮圖形是否可以準(zhǔn)確的表達(dá)其含義，不會(huì)讓用戶(hù)出現(xiàn)誤解或者錯(cuò)誤的認(rèn)知。所以，按鈕去文本需要根據(jù)文案代表的含義來(lái)判斷，如果不需要輔助解釋也能判斷出按鈕的意思，那么更為簡(jiǎn)潔的設(shè)計(jì)表達(dá)效果更佳。
19. 正確判斷按鈕顏色選擇
色彩在設(shè)計(jì)中是最直觀的體現(xiàn)，不同的顏色會(huì)傳遞不同的性格，帶給用戶(hù)認(rèn)知差異。而按鈕的顏色選擇也并非隨性發(fā)揮，需要結(jié)合品牌色和輔助色作出判斷。
通常比較統(tǒng)一的標(biāo)準(zhǔn)是采用品牌色作為大部分按鈕的顏色，遇到一些需要差異化的按鈕會(huì)選擇輔助色來(lái)表達(dá)，紅色或者橙色多為行動(dòng)刺激作用，不適合在非品牌色的時(shí)候?yàn)E用。淺灰色或者低飽和度的色系會(huì)帶有不可用、禁用、失效等屬性，需要酌情選擇。
20. 按鈕位置結(jié)合用戶(hù)體驗(yàn)
引導(dǎo)用戶(hù)作出選擇的按鈕應(yīng)該放在左邊還是右邊，根據(jù)操作系統(tǒng)的不同也引起了設(shè)計(jì)師們的爭(zhēng)議。比如 Windows 系統(tǒng)習(xí)慣將確認(rèn)按鈕放在左邊，而蘋(píng)果系統(tǒng)卻選擇了放在右邊，用戶(hù)運(yùn)用系統(tǒng)的習(xí)慣會(huì)影響其行為的適應(yīng)度。不過(guò)要是在移動(dòng)端個(gè)人傾向于將引導(dǎo)用戶(hù)作出選擇的按鈕放在右邊，更有利于用戶(hù)點(diǎn)擊（特殊人群這里需要除外）。
有時(shí)候?yàn)榱朔乐褂脩?hù)誤操作，我們會(huì)將確認(rèn)操作的按鈕放在左邊，通過(guò)助力設(shè)計(jì)讓用戶(hù)再次確認(rèn)。所以，一方面我們要結(jié)合操作系統(tǒng)的習(xí)慣，另一方面也要結(jié)合用戶(hù)習(xí)慣，將按鈕放在最合適的位置，便于用戶(hù)操作。
小結(jié)
作為設(shè)計(jì)師來(lái)說(shuō)，對(duì)每一個(gè)細(xì)小的元素進(jìn)行深入思考和總結(jié)，才能讓我們?cè)O(shè)計(jì)出更好的解決方案。一枚小小的按鈕設(shè)計(jì)，其背后也有很多需要探索的東西，本文為大家總結(jié)了 20 條經(jīng)驗(yàn)，相信還有更多值得梳理的細(xì)節(jié)，期待更多設(shè)計(jì)伙伴去挖掘。
作者：黑馬青年
鏈接：https://www.zcool.com.cn/article/ZMTIwNzE4MA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
情感是我們生活中不可割舍的元素，UI設(shè)計(jì)師也開(kāi)始在設(shè)計(jì)時(shí)添加「情感化元素」
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
重復(fù)原則是經(jīng)常提到的一個(gè)概念，在設(shè)計(jì)中用到的也是非常廣泛
設(shè)計(jì)中無(wú)論是版式還是字體等設(shè)計(jì)中，重復(fù)原則基本上用到的是最多的，這得益于重復(fù)本身的屬性，會(huì)使元素具備統(tǒng)一性，這樣視覺(jué)會(huì)更有節(jié)奏感，不至于整個(gè)畫(huà)面不融合，其中利用圓方三角或圖形做設(shè)計(jì)實(shí)最普遍的，相信大家都見(jiàn)過(guò)。
開(kāi)篇前言
希望大家在牛年里都能實(shí)現(xiàn)自己的小目標(biāo)
取得想要的成績(jī)，牛氣沖天
先簡(jiǎn)單看看重復(fù)圖形在海報(bào)中的應(yīng)用
這幅Nike的海報(bào)是將文字作為圖形進(jìn)行設(shè)計(jì)
置入到幾何形中，形成統(tǒng)一，細(xì)節(jié)上進(jìn)行特異性來(lái)表現(xiàn)
這幅海報(bào)更多的是不規(guī)則的幾何形進(jìn)行組合，主要信息用白色矩形承載
形成特異性，能明確表達(dá)傳達(dá)的信息
這里則是用簡(jiǎn)單的橫線重復(fù)形成圖形作為主視覺(jué)
還有很多主視覺(jué)都是用單元形拼湊成的，多學(xué)學(xué)Ai技巧用到設(shè)計(jì)中很重要
而字體設(shè)計(jì)中我們是不是見(jiàn)過(guò)這種
用幾何形來(lái)進(jìn)行設(shè)計(jì)
這些都是重復(fù)圖形在設(shè)計(jì)中的應(yīng)用
這種方法能夠幫我們發(fā)散思維
更好的掌握構(gòu)成知識(shí)
↓↓↓
下面我們用幾何形設(shè)計(jì)一幅海報(bào)
主題為重陽(yáng)節(jié)
字體先用三角形和矩形進(jìn)行設(shè)計(jì)
首先將筆畫(huà)用圖形代替
接下來(lái)填充漸變色，使文字更有層次感
確定好主視覺(jué)位置，對(duì)畫(huà)面進(jìn)行空間劃分
這些空間用什么填充呢，是不是就可以繼續(xù)考慮用幾何形
那么接著用幾何圖形將空間填補(bǔ)
這里只是一種組合方式，別的方式期待大家解鎖
要注意元素之間的節(jié)奏性
接著我們對(duì)信息進(jìn)行處理，做好信息之間的對(duì)比
然后將一部分幾何形去除
把我們需要的信息放到相應(yīng)的位置即可
加上噪點(diǎn)效果增加質(zhì)感
最后我們加一個(gè)帶場(chǎng)景的樣機(jī)效果
↓↓↓
如果用到商業(yè)海報(bào)中能不能用這個(gè)思路呢
我們一起來(lái)看看
嚯哈~
我們先看看文案信息，簡(jiǎn)單將文字劃個(gè)層級(jí)
顯然是個(gè)家裝的海報(bào)，全屋定制
盡量要高級(jí)一點(diǎn)
再來(lái)看看客戶(hù)提供的圖片
三張圖片，說(shuō)多不多，說(shuō)少不少
我們就分成多個(gè)矩形塊來(lái)嵌入圖片
上面主要是圖片，下面是信息
接著我們對(duì)信息進(jìn)行處理
文字選用宋體，凸顯品質(zhì)感
信息之間都做個(gè)小對(duì)比
中文配英文，標(biāo)題配符號(hào)，這個(gè)是要點(diǎn)，記住了啊
接著我們將主標(biāo)題和主圖放到相應(yīng)的位置
接著將剩余信息放進(jìn)相應(yīng)的空間
由于整體色調(diào)偏低飽和度，這里背景我們選用藍(lán)灰色
最后看這個(gè)畫(huà)面，是不是左下角還有點(diǎn)空
而且氛圍感不夠
這時(shí)候我們加上一些裝飾
再安排一個(gè)小沙發(fā)，畫(huà)面就完成了
今天的分享就到這里了，希望對(duì)小伙伴有一點(diǎn)點(diǎn)幫助
新的一年，立個(gè)小目標(biāo)
爭(zhēng)取把學(xué)到的東西轉(zhuǎn)化成自己的，才是真正的進(jìn)步
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
關(guān)于設(shè)計(jì)思維你了解多少？
設(shè)計(jì)思維模型對(duì)于互聯(lián)人來(lái)說(shuō)非常重要，經(jīng)常我們?cè)谠u(píng)價(jià)一個(gè)候選人時(shí)候會(huì)說(shuō)，這個(gè)同學(xué)系統(tǒng)思考差了點(diǎn)，或者說(shuō)用戶(hù)和商業(yè)思維不夠。那么到底什么是系統(tǒng)思考，設(shè)計(jì)師該如何學(xué)會(huì)系統(tǒng)思考，系統(tǒng)思考到底能幫助我們?cè)谧鲈O(shè)計(jì)時(shí)候有什么幫助，今天希望我的這個(gè)分享能讓你了解什么是系統(tǒng)思考，以及它的思考模型是什么。
設(shè)計(jì)做久了你會(huì)發(fā)現(xiàn)離不開(kāi)流程和思維，之前支付寶一位大佬總結(jié)下來(lái)叫“左手藝術(shù)，右手科學(xué)”，藝術(shù)大家都明白，設(shè)計(jì)師是感性動(dòng)物，對(duì)于美的追求是大家都是擅長(zhǎng)的也非常有發(fā)言權(quán)，那么科學(xué)指的是我們需要通過(guò)科學(xué)的方法流程，系統(tǒng)的思考問(wèn)題方式，讓設(shè)計(jì)不止好看，同時(shí)也應(yīng)該符合用戶(hù)，商業(yè)訴求，滿足好這3者的平衡點(diǎn)。
所以設(shè)計(jì)師，除了關(guān)注「左手」藝術(shù)的部分，同時(shí)也需要關(guān)注「右手」科學(xué)的部分。
設(shè)計(jì)思維模型不止是一個(gè)單一的思維模型，它包含三種思維模型，設(shè)計(jì)思維，用戶(hù)思維，產(chǎn)品思維。今天這篇文章，我們先來(lái)了解第一個(gè)思維，設(shè)計(jì)思維到底是什么，我們?cè)撊绾翁嵘O(shè)計(jì)師的設(shè)計(jì)思維。
第一個(gè)設(shè)計(jì)思維也是最基礎(chǔ)的，就是作為設(shè)計(jì)師，我們必須了解各大平臺(tái)的設(shè)計(jì)規(guī)范，這是做任何設(shè)計(jì)的基礎(chǔ)，如果你了解你負(fù)責(zé)的這個(gè)平臺(tái)規(guī)則，那么你的設(shè)計(jì)就無(wú)法邁出第一步，所以對(duì)于剛做設(shè)計(jì)不久的同學(xué)，基礎(chǔ)思維規(guī)范需要去死記硬背背下來(lái)，沒(méi)有這個(gè)基礎(chǔ)后面都是無(wú)用功。
常用的設(shè)計(jì)規(guī)范，比如蘋(píng)果的設(shè)計(jì)規(guī)范，里面詳細(xì)講述了，常用的蘋(píng)果導(dǎo)航欄高度是多少，蘋(píng)果的表格視圖高度多大，頁(yè)面中常用的設(shè)計(jì)字體字號(hào)多少，如何去適配不同分辨率，這些基礎(chǔ)的設(shè)計(jì)原則，都統(tǒng)稱(chēng)為設(shè)計(jì)思維。
谷歌的material規(guī)范，也是設(shè)計(jì)師必須了解的規(guī)范，特別是需要了解它在系統(tǒng)層面和iOS的差異化。
設(shè)計(jì)思維很重要一點(diǎn)，就是要了解基礎(chǔ)的審美，以及用戶(hù)心理學(xué)，其中排版運(yùn)用比較多的格式塔原理，是做設(shè)計(jì)排版的基礎(chǔ)。
相似性原則：我們會(huì)潛意識(shí)把更緊密的事物歸屬一組。
相似性原則運(yùn)用：淘寶網(wǎng)導(dǎo)航菜單就是運(yùn)用這種原則，根據(jù)產(chǎn)品類(lèi)別一致，進(jìn)行同類(lèi)分類(lèi)，這個(gè)就是運(yùn)用的格式塔緊密設(shè)計(jì)原則。
封閉性原則：視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片。
封閉性原則運(yùn)用：我們會(huì)自動(dòng)將這些不完整的圖形在腦海中封閉起來(lái)，形成一個(gè)整體圖形。如圖中海報(bào)，雖然文字被遮擋了一部分，或者被一些圖形分割了，但是我們腦海中還是會(huì)自動(dòng)腦補(bǔ)出設(shè)計(jì)畫(huà)面。
連續(xù)性原則：我們的視覺(jué)感知系統(tǒng)傾向于連續(xù)性，視覺(jué)系統(tǒng)傾向于感知連續(xù)的形式而不是離散的碎片。
連續(xù)性原則運(yùn)用：Pinterest和ins雖然卡片被下面截?cái)嗔?，但是我們還是會(huì)認(rèn)為它和下面內(nèi)容是一組的。
焦點(diǎn)原則：一個(gè)一面只有一個(gè)核心，一個(gè)眼睛，引導(dǎo)用戶(hù)去關(guān)注你想表達(dá)的重點(diǎn)。
焦點(diǎn)原則運(yùn)用：少即是多，蘋(píng)果的很多產(chǎn)品就是運(yùn)用一個(gè)焦點(diǎn)，做到畫(huà)龍點(diǎn)睛的作業(yè)。
地面原則：我們的大腦將視覺(jué)區(qū)域分為主體和背景，主體包括一個(gè)場(chǎng)景中占據(jù)注意力的元素，其余都為背景。
地面原則運(yùn)用：如上圖案例中，我們視覺(jué)會(huì)自動(dòng)將紅色，綠色，藍(lán)色當(dāng)做背景，頁(yè)面的幾何圖形會(huì)當(dāng)為主體，用戶(hù)的注意力也在上面，在平時(shí)做設(shè)計(jì)時(shí)候需要去營(yíng)造這種空間和層次感。
格式塔是設(shè)計(jì)很重要基礎(chǔ)之一，來(lái)源于20世紀(jì)的德國(guó)，也是作為設(shè)計(jì)師必須掌握的設(shè)計(jì)原則，也是你做設(shè)計(jì)的第一個(gè)需要掌握的設(shè)計(jì)基礎(chǔ)。
很多同學(xué)剛做設(shè)計(jì)，很容易在頁(yè)面中為了體現(xiàn)自己掌握的某種技法，而做過(guò)了，或者設(shè)計(jì)的頁(yè)面太偏向于個(gè)人喜好。這是不對(duì)的，我們的設(shè)計(jì)最終一定要是用戶(hù)使用的，否則再漂亮華麗的設(shè)計(jì)都會(huì)是曇花一現(xiàn)。
Path的設(shè)計(jì)在剛出來(lái)時(shí)候，簡(jiǎn)直是業(yè)內(nèi)交互和視覺(jué)標(biāo)桿性產(chǎn)品，創(chuàng)新的交互細(xì)節(jié)，精致的頁(yè)面表現(xiàn)。都很完美，但是最終也逃不過(guò)曇花不現(xiàn)，很大部分原因是產(chǎn)品定位不準(zhǔn)，商業(yè)思考不夠，沒(méi)有很好解決好用戶(hù)訴求，最終導(dǎo)致失敗。所以在一個(gè)成熟的設(shè)計(jì)中，設(shè)計(jì)好用比好看更重要，我們要做的就是在這個(gè)過(guò)程中不斷尋找合適的平衡點(diǎn)。
當(dāng)年Facebook 出品的paper這款產(chǎn)品，也是業(yè)內(nèi)關(guān)注度極高，把手勢(shì)運(yùn)用到了極致。但最后也逃不過(guò)這種命運(yùn)，幾乎移動(dòng)市場(chǎng)上，沒(méi)有一個(gè)產(chǎn)品是因?yàn)楹每炊钕聛?lái)的，幾乎最后的那些被人們每天使用的產(chǎn)品，都不是因?yàn)楹每?，而是因?yàn)楹糜?，滿足人們痛點(diǎn)需求。
所以，剛工作的設(shè)計(jì)師，在設(shè)計(jì)思維這個(gè)層面，一定要明確我們的每一個(gè)頁(yè)面，一定是滿足用戶(hù)完成任務(wù)為第一優(yōu)先級(jí)，其次考慮產(chǎn)品整體和品牌，公司大的設(shè)計(jì)方向掛鉤。
工作幾年后，作為一個(gè)漂亮的設(shè)計(jì)效果圖都不難，很多時(shí)候參考下競(jìng)品，在競(jìng)品基礎(chǔ)上去找一些差異化創(chuàng)新，甚至做出一個(gè)超越競(jìng)品的設(shè)計(jì)效果圖，加上真實(shí)動(dòng)效，好看的圖片，精心排版的文案。這些很多設(shè)計(jì)師都可以做到。但是很多設(shè)計(jì)師忽略了真正上線后的效果。
上面那個(gè)情況，我想大家都經(jīng)歷過(guò)，我們效果圖做的很好，干凈的商品圖，標(biāo)簽也很規(guī)范。但是實(shí)際上線后就是右邊效果，各種圖上放牛皮癬，以及各種標(biāo)簽。
從業(yè)務(wù)層面來(lái)說(shuō)，沒(méi)有錯(cuò)，因?yàn)榉排Ｆぐ_可能銷(xiāo)量更好。但是設(shè)計(jì)時(shí)候，我們是不是可以再往前一步，幫用戶(hù)思考如果圖片上房廣告該在展示，如果文案很多時(shí)候，標(biāo)簽很復(fù)雜的展示規(guī)則。
優(yōu)秀設(shè)計(jì)師不僅僅能做出漂亮設(shè)計(jì)圖，同時(shí)他們也能對(duì)內(nèi)容進(jìn)行負(fù)責(zé)，定義好詳細(xì)是內(nèi)容規(guī)范。
之前淘寶的同事，定完一個(gè)電商的KV風(fēng)格后，還會(huì)出一個(gè)詳細(xì)的風(fēng)格指南，里面會(huì)去定義配色，文案話術(shù)，字?jǐn)?shù)，以及頁(yè)面圖片的展示規(guī)范，這些的目的都是對(duì)內(nèi)容進(jìn)行控制。
目前很多設(shè)計(jì)師以為做UI就只有扁平化，以為大公司設(shè)計(jì)流程都是痛點(diǎn)分析、人群畫(huà)像、旅程地圖、用戶(hù)調(diào)研、方案呈現(xiàn)。各種一堆推導(dǎo)，然后最終的方案簡(jiǎn)簡(jiǎn)單單收尾，同時(shí)還暴露一個(gè)很大問(wèn)題，風(fēng)格單一。其實(shí)UI真的不止是只有扁平化。
手法一：手繪簡(jiǎn)筆風(fēng)格
如果你是設(shè)計(jì)日記的忠實(shí)讀者，你一定看過(guò)我之前寫(xiě)過(guò)一些大廠的設(shè)計(jì)手法。手繪簡(jiǎn)筆就是其中一個(gè)風(fēng)格之一，整體風(fēng)格都是手繪線條配以低飽和度顏色，有很多趣味性和故事融合在里面。
Facebook改版之前的風(fēng)格就是運(yùn)用的這套風(fēng)格，整個(gè)頁(yè)面也更加年輕和時(shí)尚。
手法二：分形藝術(shù)風(fēng)格
利用簡(jiǎn)單的幾何圖形，不斷重復(fù)，形成一種新的形式，在一些背景上，一些圖形和海報(bào)上經(jīng)常被大量運(yùn)用，只不過(guò)很多設(shè)計(jì)師并沒(méi)有關(guān)注到這些風(fēng)格。
Uber之前的規(guī)范中，對(duì)于全球的各個(gè)國(guó)家的設(shè)計(jì)，都是定義了一個(gè)國(guó)家的基礎(chǔ)圖形，然后圍繞基礎(chǔ)圖形做出了一系列擴(kuò)展，這其實(shí)就運(yùn)用到了這個(gè)分形重復(fù)設(shè)計(jì)手法。
包括我們熟知是蘋(píng)果相冊(cè)圖標(biāo)，chrome瀏覽器和谷歌相冊(cè)圖標(biāo)，都是運(yùn)用這種手法，一個(gè)基礎(chǔ)圖形有規(guī)律的變化。
手法三：柔光風(fēng)格
很多設(shè)計(jì)師做東西風(fēng)格比較單一局限，UI發(fā)展到今天其實(shí)有很多新的風(fēng)格出現(xiàn)，柔光風(fēng)格就是其中之一，整體風(fēng)格呈現(xiàn)出光的折射特征，顏色層次豐富，有明顯的光的流動(dòng)感和方向性。在設(shè)計(jì)上常用漸變，光斑，流動(dòng)透明疊加手法，是目前大公司比較主流的一種風(fēng)格。
整個(gè)畫(huà)面有色彩流動(dòng)感，背景一般是多色融合，有層次，有流動(dòng)液體變化。
像這個(gè)案例就是色彩上跨度比較大的一個(gè)漸變，同時(shí)運(yùn)用白色透明疊加方式處理，細(xì)節(jié)簡(jiǎn)單細(xì)膩。
支付寶之前芝麻信用的風(fēng)格我很喜歡，其中就是運(yùn)用的這套設(shè)計(jì)手法，背景運(yùn)用這種虛實(shí)，光斑作為層次。
在很多可視化場(chǎng)景中也會(huì)運(yùn)用，比如左圖就是運(yùn)用波浪透明疊加線條作為頁(yè)面核心焦點(diǎn)，右邊頁(yè)面背景底部運(yùn)用有層次的漸變和光暈。
手法四 ：紋理風(fēng)格
這個(gè)風(fēng)格很多人都有印象，特別是韓國(guó)設(shè)計(jì)中大量運(yùn)用了這種設(shè)計(jì)，國(guó)內(nèi)電商中也會(huì)運(yùn)用比較多，這種風(fēng)格就是紋理風(fēng)格。
淘寶的88會(huì)員，我們能看見(jiàn)會(huì)員頁(yè)面輔助元素這些紋理效果作為背景出現(xiàn)在這些頁(yè)面中，能很好將視覺(jué)層次豐富起來(lái)。
雙11的宣傳海報(bào)，也是運(yùn)用這種幾何紋理作為視覺(jué)層次的裝飾。
考拉當(dāng)年的改版設(shè)計(jì)，很核心的元素就是這個(gè)圓形，以及他的底紋運(yùn)用效果。
這種底紋效果，很多時(shí)候也可以傳遞出品牌的氣質(zhì)，品牌的調(diào)性，左側(cè)音樂(lè)播放默認(rèn)圖片，特別有品質(zhì)感，右側(cè)電商主頁(yè)面的背景，清晰感覺(jué)，后面線條恰到好處。
當(dāng)然，設(shè)計(jì)趨勢(shì)并不止我今天說(shuō)的這些，其實(shí)有很多，作為設(shè)計(jì)師，設(shè)計(jì)思維中很重要的點(diǎn)，就是關(guān)注趨勢(shì)，并將他運(yùn)用到你設(shè)計(jì)中去，這是必不可少的一項(xiàng)技能。
從這張經(jīng)典的圖中我們可以看出，設(shè)計(jì)只是一個(gè)產(chǎn)品其中很小的一部分，很多設(shè)計(jì)師以為我們看見(jiàn)的就是一切，其實(shí)不是，就像冰山一樣，表現(xiàn)層是最上面的一部分，冰山下面其實(shí)有很多的內(nèi)容。
我們來(lái)看個(gè)案例，比如支付寶：
表現(xiàn)層：
視覺(jué)設(shè)計(jì)師比較容易關(guān)注的，圓潤(rùn)的圖標(biāo)，卡片的設(shè)計(jì)，扁平的風(fēng)格，2.5D的插畫(huà)風(fēng)格，小螞蟻的微動(dòng)效，支付寶品牌藍(lán)色，以及一些卡片的動(dòng)畫(huà)效果。
框架層/結(jié)構(gòu)層：
頂部的4個(gè)金剛設(shè)計(jì)，也是用戶(hù)最常用的4個(gè)功能，下面14個(gè)宮格導(dǎo)航，代表不同的服務(wù)入口，小螞蟻卡片是通知入口，下面營(yíng)銷(xiāo)廣告資源位，下面是千人千面或者推薦的服務(wù)卡片等等。理財(cái)頁(yè)面也是如此，頭部用戶(hù)數(shù)錢(qián)，下面業(yè)務(wù)入口下面不同理財(cái)服務(wù)。
范圍層：
根據(jù)用戶(hù)的訴求，中間的宮格導(dǎo)航是動(dòng)態(tài)變化的，用戶(hù)也可以去根據(jù)內(nèi)容需要去定義，小螞蟻通知入口也是如此，一個(gè)小喇叭的功能，把所有支付寶的通知都收在這個(gè)地方，底部卡片根據(jù)用戶(hù)習(xí)慣去展示，比如你經(jīng)常點(diǎn)外賣(mài)那么推送你美食卡片，你比較關(guān)注疫情推薦你疫情卡片等等。
戰(zhàn)略層：
顧名思義，那就是公司整體戰(zhàn)略，從支付寶品牌升級(jí)更加年輕化，強(qiáng)化生活服務(wù)心智，首頁(yè)新增外賣(mài)到家、果蔬商超醫(yī)藥等便民生活版塊，并基于智能算法為用戶(hù)推薦喜歡的服務(wù)，讓每個(gè)用戶(hù)擁有更貼心專(zhuān)屬的支付寶。
所以其實(shí)所有產(chǎn)品都是圍繞這樣邏輯去設(shè)計(jì)，我們?cè)O(shè)計(jì)師要明白設(shè)計(jì)那種趨勢(shì)手法，只是一部分。我們要不斷的去了解最頂層，才能理解產(chǎn)品設(shè)計(jì)背后的規(guī)則邏輯。
今天分享的是設(shè)計(jì)師需要掌握的思維模型，其中關(guān)于設(shè)計(jì)思維的，我們?cè)賮?lái)回顧下，設(shè)計(jì)思維包括哪些：
1.了解基礎(chǔ)的設(shè)計(jì)規(guī)范；
2.知道常用設(shè)計(jì)原則；
3.知道設(shè)計(jì)是用來(lái)用的，而不是藝術(shù)；
4.知道設(shè)計(jì)不止是效果圖，對(duì)落地負(fù)責(zé)；
5.知道主流設(shè)計(jì)趨勢(shì)和手法；
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
簡(jiǎn)單的細(xì)節(jié)調(diào)整就能加強(qiáng)設(shè)計(jì)品質(zhì)。
簡(jiǎn)單的細(xì)節(jié)調(diào)整就能加強(qiáng)設(shè)計(jì)品質(zhì)，昨天沒(méi)想到幾個(gè)小時(shí)寫(xiě)的一篇小文章很受大家歡迎，后續(xù)我多寫(xiě)一些類(lèi)似使用技巧，大家多給我點(diǎn)贊一些，支持我繼續(xù)寫(xiě)下去，那今天再給大家分享幾個(gè)設(shè)計(jì)小技巧。希望能幫助到大家。
小輪廓能讓設(shè)計(jì)更精致
電商設(shè)計(jì)中，白色商品圖非常多，很多時(shí)候如果細(xì)節(jié)處理不好，就會(huì)體驗(yàn)非常糟糕，如上圖就是大家經(jīng)常用到的一個(gè)場(chǎng)景。列表中有一個(gè)商品圖，這個(gè)設(shè)計(jì)有一個(gè)很大的問(wèn)題，就是列表是灰色，商品圖是白色，白色和app的底色白色融為一體了，看起來(lái)非常缺乏平衡感。
仔細(xì)分析，你會(huì)發(fā)現(xiàn)問(wèn)題是商品圖頂部有些白色部分和背景頁(yè)面的白色融合在一起了，同時(shí)卡片背景是灰色，所以色彩白色和灰色非常突兀，那么如何解決。其實(shí)有一個(gè)很小的方法就能解決這個(gè)問(wèn)題。
我們直接在商品圖片周邊留出2px的邊框，就能很好的解決這個(gè)問(wèn)題，因?yàn)楸尘笆腔疑?，留出的邊框剛好讓白色圖片看著有一個(gè)輪廓，整體更加和諧。
前后效果圖對(duì)比，加了一個(gè)淺淺的邊框就解決了白色圖片的問(wèn)題，是不是頁(yè)面一下子精致起來(lái)。
同樣的原理，在大的商品圖上，留下小的邊框也很好的解決了白色地圖和背景的問(wèn)題，這個(gè)小技巧希望大家能掌握。
善用色彩疊加讓頁(yè)面效果更潮
上圖這個(gè)場(chǎng)景我想是很多同學(xué)每天工作都在用的，圖片上需要去放一些文字，我們一般處理方式就是在上面疊加一個(gè)黑色，給一個(gè)透明度，這樣文字就能看清楚。這是一個(gè)設(shè)計(jì)手法。
還一種設(shè)計(jì)手法就是在圖片頂部，加一個(gè)黑色到透明的一個(gè)蒙版，這個(gè)大家都會(huì)。
但是這兩個(gè)設(shè)計(jì)如果對(duì)于一些比較年輕，比較潮流的頁(yè)面處理，可能就會(huì)感覺(jué)少點(diǎn)什么，那么這個(gè)時(shí)候就需要我們大膽一點(diǎn)，用一個(gè)色彩疊加的方式去設(shè)計(jì)，效果就會(huì)完全不一樣。
直接在圖片上根據(jù)你產(chǎn)品調(diào)性，疊加一個(gè)彩色，然后講顏色模式改為線性光，那么整體的感覺(jué)就瞬間不一樣，畫(huà)面潮了很多。
我們來(lái)看看效果對(duì)比，是不是瞬間一個(gè)普通的設(shè)計(jì)就潮起來(lái)了，當(dāng)然這個(gè)效果也需要看你頁(yè)面實(shí)際場(chǎng)景去使用。如果你頁(yè)面就是一個(gè)傳統(tǒng)的設(shè)計(jì)，用戶(hù)就是普通用戶(hù)，那么可以就上面2個(gè)方法去設(shè)計(jì)，如果你的產(chǎn)品調(diào)性需要傳遞出很潮流，很時(shí)尚，那么就可以試試這個(gè)方法。
當(dāng)然你也可以在局部去疊加色彩，效果一樣很棒，我最喜歡的音樂(lè)軟件Spotify在頁(yè)面中就大量使用這種手法在設(shè)計(jì)，有興趣同學(xué)可以下載看看。
善用空格和留白
有的時(shí)候負(fù)空間非常重要，很多同學(xué)的設(shè)計(jì)稿，非常的擁擠，頁(yè)面都像要溢出屏幕了。如上圖，文字和圖片過(guò)于緊湊，圖片下面的圖標(biāo)，熱區(qū)不夠，看起來(lái)非常擁擠。
大家都太吝嗇運(yùn)用空格了，但是留白和空隙是提升設(shè)計(jì)中非常重要的點(diǎn)。能讓你頁(yè)面呼吸感更強(qiáng)，是優(yōu)化設(shè)計(jì)，讓設(shè)計(jì)更精致非常重要的一個(gè)小技巧。
簡(jiǎn)單優(yōu)化下，把信息分成3部分，然后加大留白，讓信息留白更多，增強(qiáng)設(shè)計(jì)呼吸感。
最后來(lái)看下效果，是不是看起來(lái)舒服多了，節(jié)奏感和呼吸感更強(qiáng)了，也有例如我們理解信息內(nèi)容。
最后
今天就和大家分享這么幾個(gè)小點(diǎn)，希望大家都成為一個(gè)關(guān)注細(xì)節(jié)的設(shè)計(jì)師。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
對(duì)于按鈕控件，Material Design 在規(guī)范中寫(xiě)下了“突出一個(gè)按鈕”原則：布局中應(yīng)包含一個(gè)視覺(jué)突出按鈕，以使其他按鈕在層次結(jié)構(gòu)中的重要性降低，讓此高強(qiáng)調(diào)按鈕吸引用戶(hù)最多的關(guān)注。
依據(jù)用戶(hù)體驗(yàn)設(shè)計(jì)的宗旨，把這么長(zhǎng)一段話說(shuō)直白一些，其實(shí)就是：讓按鈕幫助用戶(hù)做出最優(yōu)選擇。
越是權(quán)威的設(shè)計(jì)團(tuán)隊(duì)，對(duì)自家所探尋出來(lái)的核心原則越是從一而終。Google 產(chǎn)品線的按鈕設(shè)計(jì)，始終遵循著MD規(guī)范這一個(gè)標(biāo)準(zhǔn)。我想就這一標(biāo)準(zhǔn)，來(lái)展開(kāi)對(duì)于「按鈕」設(shè)計(jì)的探索。
Material Design 按照視覺(jué)強(qiáng)調(diào)程度將按鈕分為了四個(gè)類(lèi)型：
文字按鈕（低強(qiáng)調(diào)）：通常用于次要操作；
輪廓按鈕（中等強(qiáng)調(diào)）：描邊讓輪廓按鈕比文本按鈕更突出一些；
填充按鈕（重點(diǎn)強(qiáng)調(diào)）：填充按鈕具有視覺(jué)重點(diǎn)，因?yàn)樗鼈兪褂昧祟伾畛浜完幱埃?/p>
切換按鈕（按鈕組）：使用布局將同類(lèi)按鈕分組。與其他按鈕類(lèi)型相比，它們的使用頻率較低。
MD規(guī)范之所以如此定義按鈕類(lèi)型，其實(shí)就是為了滿足設(shè)計(jì)原則中的「對(duì)比」原則，足夠差異化的對(duì)比才能讓用戶(hù)視線有明確的著陸點(diǎn)。
你可以用“較高視覺(jué)級(jí)+較低視覺(jué)級(jí)”的按鈕搭配，來(lái)引導(dǎo)用戶(hù)在當(dāng)前場(chǎng)景做出更重要的操作。
這一手法示例在許多產(chǎn)品中屢見(jiàn)不鮮。例如在一些功能性場(chǎng)景中，出于用戶(hù)體驗(yàn)，用“較高視覺(jué)級(jí)”按鈕來(lái)輔助用戶(hù)進(jìn)行正確操作。
而在一些非功能性場(chǎng)景中，許多產(chǎn)品還使用這個(gè)手法來(lái)突出重要操作，為業(yè)務(wù)引流。甚至你可以從中去摸索到競(jìng)品當(dāng)前對(duì)哪一塊業(yè)務(wù)更具有側(cè)重點(diǎn)。
例如信用消費(fèi)類(lèi)金融產(chǎn)品常常用“較高視覺(jué)級(jí)”按鈕引導(dǎo)用戶(hù)對(duì)賬單進(jìn)行分期。而京東白條在賬單還款時(shí)，也用“較高視覺(jué)級(jí)”按鈕引導(dǎo)用戶(hù)進(jìn)行“小金庫(kù)還款”，為自家的金融業(yè)務(wù)引流。
這些案例都是在視覺(jué)上幫用戶(hù)做出選擇。
但反其道而行之，我們也可以推敲出，當(dāng)當(dāng)前場(chǎng)景的敏感度較高時(shí)，我們也可以降低按鈕的視覺(jué)對(duì)比，不要對(duì)用戶(hù)進(jìn)行引導(dǎo)，讓用戶(hù)自行謹(jǐn)慎操作，做出選擇。一般在協(xié)議、隱私條款場(chǎng)景這樣的設(shè)計(jì)會(huì)更為常見(jiàn)。
按鈕尺寸是設(shè)計(jì)界老生常談的一個(gè)問(wèn)題了，想必最經(jīng)典的按鈕尺寸標(biāo)準(zhǔn)就是 iOS人機(jī)設(shè)計(jì)規(guī)范提到的“44pt”。除此之外還有MD規(guī)范對(duì)安卓按鈕定義的“36dp”、“56dp”等等。
但你是不是也疑惑，為什么我們常?？吹桨粹o五花八門(mén)的設(shè)計(jì)尺寸？“44pt”真的是按鈕尺寸的標(biāo)準(zhǔn)嗎？
這個(gè)回答可以在設(shè)計(jì)師 Scott Hurff 曾寫(xiě)過(guò)一篇關(guān)于按鈕可行性的博文中找到答案。
Scott Hurff 在使用 iOS 9 鎖屏狀態(tài)下的 Apple Music 時(shí)，遇到了問(wèn)題：
在我想切歌時(shí)，我常常無(wú)法一次就點(diǎn)中切歌按鈕，我需要一而再再而三地嘗試。我甚至?xí)蛘`操作而調(diào)高音量，或是按到暫停。
而 iOS 9 在這里所用到的按鈕尺寸就是經(jīng)典的44pt。
等到 iOS 10 更新了這一設(shè)計(jì)之后，上述情況改善了許多。同時(shí)也提起了 Scott Hurff 對(duì)于按鈕設(shè)計(jì)尺寸研究的興趣，并展開(kāi)了一系列科學(xué)性的論證。
Scott Hurff 搬出了2006年芬蘭奧盧大學(xué)和馬里蘭大學(xué)帕克分校的研究人員合作進(jìn)行的實(shí)驗(yàn)。研究人員測(cè)試了兩個(gè)場(chǎng)景：
執(zhí)行單個(gè)任務(wù)場(chǎng)景（如激活按鈕、點(diǎn)選復(fù)選框或單選按鈕）
執(zhí)行連續(xù)任務(wù)場(chǎng)景（如輸入電話號(hào)碼）
在研究過(guò)程中，研究人員在每個(gè)場(chǎng)景下都測(cè)試了一系列不同大小的按鈕。他們發(fā)現(xiàn)，當(dāng)按鈕小于9.2毫米時(shí)，單個(gè)任務(wù)場(chǎng)景的錯(cuò)誤率顯著增加；當(dāng)按鈕小于9.6毫米時(shí)，連續(xù)任務(wù)場(chǎng)景的錯(cuò)誤率顯著增加。
當(dāng)時(shí)這個(gè)實(shí)驗(yàn)只確定了按鈕尺寸的合適區(qū)間。但五年后，兩所德國(guó)大學(xué)的研究人員又進(jìn)行了另一項(xiàng)研究。這一次他們的目標(biāo)是：確定觸摸屏按鈕的最佳觸摸目標(biāo)尺寸。
這一次研究人員發(fā)布了一個(gè)Android游戲，該游戲被下載約10萬(wàn)次，記錄了約1億2千萬(wàn)次點(diǎn)擊事件。游戲的玩法很簡(jiǎn)單：玩家要點(diǎn)擊各種大小、可能出現(xiàn)在屏幕任何地方的浮動(dòng)圓圈來(lái)通關(guān)。
分析游戲中的點(diǎn)擊事件后，研究人員發(fā)現(xiàn)當(dāng)圓圈尺寸小于15毫米，玩家的錯(cuò)誤率逐步增加；當(dāng)圓圈小于12毫米左右時(shí)急劇上升；當(dāng)點(diǎn)擊目標(biāo)小于8毫米時(shí)，玩家沒(méi)點(diǎn)中圓圈的概率超過(guò)40%。
但圓圈的尺寸大于 12毫米時(shí)，玩家的正確率也沒(méi)有顯著的數(shù)據(jù)變化。即 12毫米 就像一個(gè)按鈕尺寸用戶(hù)體驗(yàn)的最大臨界點(diǎn)。
通過(guò)兩個(gè)實(shí)驗(yàn)印證了按鈕尺寸設(shè)計(jì)的科學(xué)性后，提煉出了4個(gè)關(guān)鍵數(shù)據(jù)：9.2毫米、9.6毫米、12毫米與15毫米。
而通過(guò)換算之后經(jīng)過(guò)換算可以發(fā)現(xiàn)，iOS 的按鈕建議尺寸約為 7毫米；Android 約為 9毫米。但微軟所給到的按鈕規(guī)范建議則直接是以“毫米”為單位的，定義為 13毫米。
經(jīng)過(guò)數(shù)據(jù)的換算總結(jié)可以得出以下結(jié)論：
1.Android 所定義的 36pt 按鈕高度約為5.5毫米，在設(shè)計(jì)按鈕時(shí)，盡量不要低于這個(gè)高度（文字按鈕也應(yīng)該盡量把可點(diǎn)擊熱區(qū)擴(kuò)展到這個(gè)高度）；
2.36pt、44 pt、56 pt，這些規(guī)范參考數(shù)據(jù)在具體的頁(yè)面中需具體分析運(yùn)用，目前各大規(guī)范已放開(kāi)了按鈕高度的指導(dǎo)建議，并不是一定要讓按鈕保持一個(gè)固定的尺寸，只要在合適的可點(diǎn)擊范圍內(nèi)，均是合理的；
3.根據(jù)以上的實(shí)驗(yàn)結(jié)論，按鈕尺寸的最大臨界值 12毫米（約為 82pt），大于 82pt后并不能增加用戶(hù)可點(diǎn)擊概率，更多是視覺(jué)方面的考慮。
合理科學(xué)的按鈕尺寸可以讓用戶(hù)準(zhǔn)確地點(diǎn)擊并進(jìn)行操作，能夠避免發(fā)生類(lèi)似 iOS 9 Apple Music 所遇到的狀況。
我發(fā)現(xiàn)當(dāng)下許多 APP 好像或多或少會(huì)忽略按鈕的狀態(tài)樣式設(shè)計(jì)。似乎許多人認(rèn)為移動(dòng)端按鈕狀態(tài)并沒(méi)有 Web 端重要，可能是因?yàn)橐苿?dòng)端按鈕沒(méi)有 hover（懸?。?態(tài)，認(rèn)為按鈕在移動(dòng)端只有常態(tài)與點(diǎn)擊態(tài)，狀態(tài)較少，覺(jué)得用戶(hù)本身就易于區(qū)分。
但實(shí)際上MD規(guī)范提到按鈕狀態(tài)，不但沒(méi)有簡(jiǎn)單地一筆帶過(guò)，還展開(kāi)了一個(gè)專(zhuān)題進(jìn)行了深入研究，可見(jiàn)把UI控件的“狀態(tài)”準(zhǔn)確地反饋給用戶(hù)，是多么重要的一件事。
按照MD規(guī)范，按鈕的狀態(tài)，一般會(huì)發(fā)現(xiàn)有：
Enabled - 激活狀態(tài)（按鈕常規(guī)狀態(tài)）
Hover-懸浮狀態(tài)（Web場(chǎng)景下的鼠標(biāo)懸浮狀態(tài)）
Focused-聚焦?fàn)顟B(tài)（長(zhǎng)按聚焦?fàn)顟B(tài)，如長(zhǎng)按語(yǔ)音輸入）
Pressed-點(diǎn)擊狀態(tài)（按鈕被點(diǎn)擊按下的狀態(tài)）
Disable-禁用狀態(tài)（按鈕不可用的狀態(tài)）
Loading-加載狀態(tài)（我自行添加進(jìn)來(lái)的，當(dāng)下較為流行的多態(tài)按鈕）
正確地在前期規(guī)范中定義按鈕的狀態(tài)交互及樣式，對(duì)按鈕的合理設(shè)計(jì)與用戶(hù)體驗(yàn)而言其實(shí)十分重要。按鈕狀態(tài)可以有效地傳達(dá)給用戶(hù)當(dāng)前操作狀態(tài)，如發(fā)生失誤操作時(shí)可以及時(shí)止損，減少撤銷(xiāo)/返回操作的成本。
狀態(tài)樣式定義的過(guò)程其實(shí)并沒(méi)有想象中那么麻煩，一般視覺(jué)上可以高度與顏色來(lái)營(yíng)造效果。
· 高度 ：界面中往往使用陰影來(lái)營(yíng)造高度視覺(jué)差，例如常態(tài)時(shí)的陰影能夠營(yíng)造懸浮、可點(diǎn)擊的效果；禁用狀態(tài)取消陰影，可以營(yíng)造按鈕觸底，無(wú)法點(diǎn)擊的效果。
· 顏色 ：顏色的改變可以直接在按鈕上方覆蓋一層含透明度的顏色遮罩，這樣可以確保適量的底色可見(jiàn)性，并且針對(duì)每種不同的狀態(tài)，應(yīng)調(diào)整顏色遮罩不同的透明度值。MD有一套現(xiàn)成的透明度指導(dǎo)建議，可以進(jìn)行參考。
“幫用戶(hù)做出最優(yōu)選擇”說(shuō)起來(lái)很容易，做起來(lái)卻容易被忽視或令產(chǎn)品設(shè)計(jì)者糾結(jié)頭疼，不然 Steve Krug 也不會(huì)寫(xiě)一整本《Don’t Make Me Think》來(lái)教大家如何揣摩用戶(hù)思想的書(shū)了。
我盡量從我能考慮得到的方面，聊了關(guān)于按鈕交互的設(shè)計(jì)點(diǎn)，可能不太全面，也歡迎補(bǔ)充與校正。至于按鈕的視覺(jué)設(shè)計(jì)，因?yàn)檫^(guò)于個(gè)性化，且篇幅原因，我就不再展開(kāi)討論了。
希望這篇文章能夠幫助到你對(duì)按鈕有新的認(rèn)識(shí)。我是耍家，我們下期再見(jiàn)。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn