2019-6-6 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里
視覺設(shè)計(jì)師作為展示產(chǎn)品最終形態(tài)的執(zhí)行層,產(chǎn)品上線前走查視覺與交互還原是必經(jīng)環(huán)節(jié),而留給設(shè)計(jì)師走查修改的時(shí)間其實(shí)非常少,有時(shí)候?yàn)榱伺浜袭a(chǎn)品上線時(shí)間,通常只能犧牲一些細(xì)節(jié),在下一次迭代進(jìn)行優(yōu)化。為了每一次上線的產(chǎn)品都能夠得到更好地還原,這就需要設(shè)計(jì)師去了解開發(fā)到底是根據(jù)哪些規(guī)則還原我們的設(shè)計(jì)稿,以及在每一次制作和交付設(shè)計(jì)稿的時(shí)候,我們應(yīng)如何設(shè)定好每一個(gè)細(xì)節(jié)的規(guī)則。我們經(jīng)常會(huì)聽到身邊的設(shè)計(jì)師與開發(fā)小哥的一些對話,關(guān)于對齊、大小、間距等設(shè)計(jì)還原問題經(jīng)常會(huì)討論很久,有時(shí)甚至?xí)X得,幾個(gè)像素的間距是不是沒有必要這么糾結(jié)。以我較常接觸的云產(chǎn)品官網(wǎng)為例,云產(chǎn)品官網(wǎng)體量龐大,單個(gè)頁面或信息模塊的樣式復(fù)用可高達(dá)上百個(gè)子產(chǎn)品頁面,此時(shí)第一個(gè)模塊設(shè)計(jì)的規(guī)范性、擴(kuò)展性、復(fù)用性則變得尤為重要,所以為了讓設(shè)計(jì)方案更加合理,為了讓合作更加,這里總結(jié)一些設(shè)計(jì)經(jīng)驗(yàn),與大家一起探討。
本文將從以下三個(gè)方面,思考作為視覺設(shè)計(jì)師,應(yīng)當(dāng)如何讓設(shè)計(jì)更加合理有效:
1. 字體結(jié)構(gòu)
網(wǎng)頁設(shè)計(jì)中,我們總避免不了與字體打交道,字體也是我們在設(shè)計(jì)中經(jīng)常容易忽視的部分,而經(jīng)常出錯(cuò)的原因往往是因?yàn)槲覀儗ξ淖值睦斫獠粔蚯逦O啾任魑淖煮w,中文字體結(jié)構(gòu)復(fù)雜,字庫龐大,網(wǎng)頁的渲染效果會(huì)比西文字體艱難很多。
但無論是中文還是西文,我們經(jīng)常需要用到的無非是字體大小、字重、字色,還有就是經(jīng)常被我們忽視的行高和行寬,我們從西文字體提取三個(gè)最主要的因素,即字高、行高、行寬。基于西文字體的結(jié)構(gòu)轉(zhuǎn)換為中文,我們可以理解為,字高指的就是我們?nèi)庋鬯芸吹降淖煮w的實(shí)際高度,而行高指的是字高+上邊距+下邊距,反過來說,行高減去字高除以 2 就能得到我們的上下邊距,行寬指的就是整個(gè)文本的寬度。
舉一個(gè)圖文模塊的例子,圖(1)中我們?nèi)庋鬯吹介g距,在我們做標(biāo)注時(shí),看到的其實(shí)是圖(2)中的三個(gè)色塊,我們實(shí)際給到開發(fā)的標(biāo)注,是色塊的尺寸和色塊之間的間距,以及詳細(xì)的文本屬性。
2. 文字行寬
關(guān)于行寬,以設(shè)計(jì) banner 的標(biāo)題及描述文字為例,定義行寬是為了讓文本在極限寬度的時(shí)候進(jìn)行換行,再固定好配圖的尺寸,從而得到文本與配圖之間的間距,定義行寬、行數(shù)、字?jǐn)?shù),能夠更好地為運(yùn)營人員規(guī)范輸出的文案,避免因字?jǐn)?shù)過多或過少所造成的視覺不平衡。
當(dāng)我們處理無序列表時(shí),四個(gè)短句文本,長短不一,同樣我們需要限制一行文本寬度,定義一行能承載的最多字?jǐn)?shù),以及跟產(chǎn)品確認(rèn)可能出現(xiàn)的最多字?jǐn)?shù)的情況,確認(rèn)模塊設(shè)計(jì)的可行性,保證后續(xù)運(yùn)營人員在替換文案的時(shí)候不會(huì)出錯(cuò)。
以上兩個(gè)例子都是我們設(shè)計(jì)文字經(jīng)常出錯(cuò)的地方,正確的定義規(guī)范,無論是交付開發(fā)或者其他下游,都能保證模塊設(shè)計(jì)的可擴(kuò)展性及規(guī)范化,保證最終上線質(zhì)量。
3. 圖標(biāo)視錯(cuò)覺
關(guān)于圖標(biāo),這里提到一個(gè)幾何學(xué)錯(cuò)覺的概念,視覺上的大小、長度、面積、方向、角度等幾何構(gòu)成,和實(shí)際上測得的數(shù)字有明顯差別的錯(cuò)覺,稱為幾何學(xué)錯(cuò)覺。人眼所接受的視覺平衡,往往不是設(shè)計(jì)軟件上精準(zhǔn)的對齊,我們總是會(huì)通過調(diào)整間距、大小或角度來補(bǔ)齊一些負(fù)空間,讓畫面保持視覺平衡。
以客戶案例的卡片樣式為例,客戶案例在 to B 產(chǎn)品中是必不可少的模塊,我們的客戶 logo 有的圓形,有的長方形,有的純文字,尺寸差距比較懸殊,這種情況下我們需要給他限制一個(gè)高度,在這個(gè)高度以內(nèi),再根據(jù) logo 本身的體量來調(diào)整圖形的大小,處理好 logo 的視覺平衡,最后紅色區(qū)域是 logo 的實(shí)際尺寸,藍(lán)色區(qū)域則是我們實(shí)際給到開發(fā)的尺寸,從開發(fā)的角度來看其實(shí)就是占位符,而規(guī)范的作圖則是把占位符的透明度調(diào)整為 0,以占位符為實(shí)際有效作圖區(qū)。
UI 設(shè)計(jì)中通常以「向右箭頭」來表示當(dāng)前鏈接可跳轉(zhuǎn),使用箭頭作圖時(shí),當(dāng)我們把箭頭和文字右對齊,箭頭其實(shí)會(huì)更加的往外突出,這時(shí)候我們會(huì)人為的往里邊推 1 至 2 像素,最后實(shí)際給到開發(fā)的也應(yīng)該是紅框的尺寸,也就是 16×16 的占位圖尺寸。
「按鈕」也是 UI 設(shè)計(jì)中常用的組件,當(dāng)我們在按鈕里使用圖標(biāo)加文字時(shí),由于文字的體量更大,整體重心會(huì)往右偏,所以我們通常會(huì)認(rèn)為讓圖標(biāo)和文字整體往左偏移,使整體的視覺更加平衡,實(shí)際給到開發(fā)的,也是兩個(gè)不同等的邊距。
1. 理性的設(shè)計(jì)
在 iOS 和 Android 的設(shè)計(jì)規(guī)范中,都有提到過使用「8點(diǎn)柵格」的概念,即建議使用 8×8 的網(wǎng)格系統(tǒng)進(jìn)行設(shè)計(jì),我們都知道 0.5px 的渲染在屏幕上會(huì)變模糊,之所以使用 8 的倍數(shù)是因?yàn)槭袌錾现髁鞯钠聊欢寄鼙?8 整除,使用 8 點(diǎn)柵格能夠的讓我們所設(shè)計(jì)的內(nèi)容樣式在屏幕上保持高清顯示,而在日常的網(wǎng)頁設(shè)計(jì)中,我其實(shí)更加傾向使用 4 點(diǎn)柵格系統(tǒng)。
我們以下圖 4 組數(shù)列為例,大家可能都曾使用過上面三組藍(lán)色數(shù)列中的數(shù)值應(yīng)用到設(shè)計(jì)中,或以 5 為倍數(shù),或以 10 為倍數(shù)、或以偶數(shù)為設(shè)計(jì)邏輯,而實(shí)際上以 5 為倍數(shù)則會(huì)包含奇數(shù),奇數(shù)會(huì)導(dǎo)致控件文字對不齊,當(dāng) 5 的倍數(shù)和偶數(shù)同時(shí)使用時(shí),則會(huì)出現(xiàn)類似 14、15、16 這種相差為 1 的相鄰數(shù),這樣會(huì)導(dǎo)致我們的尺寸規(guī)范不好定義規(guī)則,難以形成邏輯,而使用 4 的倍數(shù),他們的公差為 4,不會(huì)出現(xiàn)奇數(shù),也不會(huì)出現(xiàn)相鄰數(shù)。
我們再看看一些通用的尺寸定義,例如常見的 icon 設(shè)計(jì)尺寸都是以 4 為倍數(shù)。
常見的網(wǎng)頁柵格及其所均分的卡片和間距,也都是 4 的倍數(shù),如果我們的控件尺寸,圖標(biāo)尺寸和間距都使用 4 的倍數(shù)來定義,那所有的信息模塊自然都能更好的相互適應(yīng),層層遞進(jìn)的邏輯關(guān)系也會(huì)更加明顯。
我們把 4 點(diǎn)柵格的設(shè)計(jì)邏輯套用到卡片設(shè)計(jì)上,第一眼我們可能比較難去評判兩者的好壞,但仔細(xì)看,我們就會(huì)發(fā)現(xiàn)第一個(gè)卡片的按鈕沒有水平對齊,相互之間的間距尺寸也是沒什么邏輯性。假如今天調(diào)整一個(gè) 8px 的間距,明天調(diào)一個(gè) 10px 的間距,設(shè)計(jì)師走查起來也很難發(fā)現(xiàn)有問題,對接的開發(fā)也難以有一個(gè)可以參考的規(guī)范標(biāo)準(zhǔn)。而相對的,以 4 為倍數(shù),我們會(huì)發(fā)現(xiàn)所有的信息都會(huì)完美對齊,而且倍數(shù)為 4 的每個(gè)數(shù)值之間公差為 4,即使設(shè)計(jì)稿微調(diào)了 1px 我們都能很快發(fā)現(xiàn),開發(fā)在還原設(shè)計(jì)稿時(shí)也會(huì)有一個(gè)衡量標(biāo)準(zhǔn)。
網(wǎng)格設(shè)計(jì)在報(bào)紙、雜志、海報(bào)等平面設(shè)計(jì)領(lǐng)域中也是十分常見的設(shè)計(jì)手法,通過建立網(wǎng)格,考究每一個(gè)信息模塊在頁面中的擺放位置,大小占比,顏色占比,從而使得頁面信息保持秩序、均衡。
使用 4 點(diǎn)柵格系統(tǒng),通過理性、秩序、邏輯的設(shè)計(jì)方式賦予畫面秩序感以及閱讀體驗(yàn),而以 4 為倍數(shù),每個(gè)數(shù)字之間都相差為 4,不會(huì)太大,也不會(huì)太小,同時(shí)保持著秩序,讓設(shè)計(jì)更加理性。對于團(tuán)隊(duì)合作,設(shè)計(jì)師與開發(fā)也將更有默契,不必再為不清不楚的間距浪費(fèi)時(shí)間。
1. 有效切圖
關(guān)于切圖,切圖之前應(yīng)跟開發(fā)確定好輸出的格式和尺寸,確定應(yīng)該用 SVG,一倍圖或是兩倍圖。SVG 體量小渲染質(zhì)量好,單色使用時(shí)還能替換顏色,PNG 則通常用在實(shí)景圖,一倍圖和二倍圖則根據(jù)實(shí)際需要進(jìn)行輸出。
如果要做分層動(dòng)畫,那我們就需要分層切圖,如果桌面端和手機(jī)端樣式差別較大,那我們需要和開發(fā)溝通好如何實(shí)現(xiàn),是否需要特殊切圖,所有的特殊切圖和特殊樣式,我們都應(yīng)該提前跟開發(fā)溝通好。
2. 交互細(xì)節(jié)
如果某個(gè)控件或信息模塊交互樣式較多,那我們可以有一個(gè)空白畫板來清晰地標(biāo)注這些狀態(tài)和樣式,很多開發(fā)在還原過程中都是一手視覺稿一手交互稿,但視覺設(shè)計(jì)師作為展示產(chǎn)品最終形態(tài)的執(zhí)行層,很多情況下,視覺階段依然會(huì)有很多需要跟交互和產(chǎn)品溝通修改的地方,所以為了避免遺漏修改點(diǎn),視覺稿應(yīng)該呈現(xiàn)最完整的設(shè)計(jì)細(xì)節(jié),這樣也會(huì)很大程度上節(jié)省開發(fā)的時(shí)間,減少出錯(cuò)的幾率。
當(dāng)頁面內(nèi)容有一定的更新頻率,我們則需要標(biāo)明視覺樣式規(guī)范,以及后續(xù)的運(yùn)營規(guī)則,完整的收尾,可以避免產(chǎn)品經(jīng)常過來尋求上線素材和規(guī)范。有些需要隔三個(gè)月或半年才上線的需求,清晰的標(biāo)注也能幫助我們快速回憶起需求背景,讓我們在日常工作中保持頭腦清晰,有條不紊,這其實(shí)也是在給我們自己節(jié)省時(shí)間。
3. 重構(gòu)稿走查
走查還原的時(shí)候,在 Chrome 瀏覽器的空白處右鍵點(diǎn)擊檢查,找到里面的 Computed 窗口,我們可以找到具體的文字、間距、投影等屬性,有時(shí)候一些比較細(xì)微的調(diào)整,我們可以雙擊具體的數(shù)值進(jìn)行調(diào)整,調(diào)整到自己滿意之后再把具體的數(shù)值給到開發(fā),這樣就不用在我們搖擺不定的情況下,造成雙方的困擾。
最后,在預(yù)發(fā)布的時(shí)候,我們可以利用 SwitchHosts 的客戶端來配置開發(fā)環(huán)境進(jìn)行體驗(yàn),保證最終上線的效果。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com