手機(jī)版WPS 手機(jī)版wps免費(fèi)下載
2022-11-29
更新時(shí)間:2022-04-17 13:09:07作者:未知
無(wú)論是扁平化還是Material Design,簡(jiǎn)化圖標(biāo)元素都只是觸及表象,想創(chuàng)造出本質(zhì)上輕量化的設(shè)計(jì),界面細(xì)節(jié)和交互上的考量也非常多,今天這篇好文,總結(jié)了13個(gè)幫你做出輕量化設(shè)計(jì)的方法。
1. 創(chuàng)造更輕的設(shè)計(jì)
什么是輕設(shè)計(jì)
扁平化設(shè)計(jì)不再使用各種斜度和陰影,讓app有了更輕盈的美感。這意味著通過(guò)運(yùn)用負(fù)形空間來(lái)取代斜度和陰影,創(chuàng)造出一個(gè)只關(guān)注核心信息的、更為簡(jiǎn)潔的界面,從而摒棄那些對(duì)app本身和用戶流程來(lái)說(shuō)都很低效的設(shè)計(jì)元素。
如何更輕
較輕的設(shè)計(jì)舍棄掉了那些分散人們注意力的元素,以引導(dǎo)用戶去關(guān)注屏幕上有意義的內(nèi)容,使得導(dǎo)航更簡(jiǎn)單,同時(shí)又塑造了一種極簡(jiǎn)、現(xiàn)代的高大上品牌形象。
2. 一種字體用到底
什么是只用一種字體
減少屏幕內(nèi)所使用字體數(shù)量能最大限度地表現(xiàn)字體設(shè)計(jì)的張力。因?yàn)楫?dāng)你少用不同的字體、不同字號(hào)還有像斜體、黑體、半黑體等字形樣式時(shí),內(nèi)容之間留白的級(jí)別差異才能更好地被區(qū)分開(kāi)來(lái)。
為什么只用一種字體
讓單一的字體貫穿于app中,不僅使品牌形象更趨穩(wěn)定,也有利于跨渠道的內(nèi)容響應(yīng)(如app,手機(jī)網(wǎng)頁(yè),電腦網(wǎng)頁(yè)等),從而優(yōu)化全渠道體驗(yàn)中的手機(jī)元素。另外,用戶也希望在滾屏瀏覽相關(guān)內(nèi)容時(shí)眼前只有一種字體樣式。
3. 徹底告別線條——使用空間和組塊
什么是空間和組塊
盡管從前常用分割線來(lái)細(xì)分屏幕里的每個(gè)區(qū)域,但是這樣界面看起來(lái)會(huì)很密集凌亂。如果把線去掉,只將空間區(qū)分成不同內(nèi)容的組塊,這樣做既能釋放空間,也能使界面看起來(lái)更干凈。
為什么要去掉線
去掉具體的線能讓界面看起來(lái)很現(xiàn)代,而且更關(guān)注實(shí)用性。舉例來(lái)說(shuō),圖片和字型能因此放得更大,那么視覺(jué)上會(huì)更清晰,使用起來(lái)也會(huì)更簡(jiǎn)單。利用留白來(lái)替代畫線分隔,就能以一種不扎眼地方式劃分各個(gè)區(qū)域。
4. 將數(shù)據(jù)突出強(qiáng)調(diào)(Spotlighted Data)
什么是突出強(qiáng)調(diào)
由于用戶習(xí)慣越來(lái)越趨向于極簡(jiǎn)的界面,大家也就更常用一些大字和撞色來(lái)強(qiáng)調(diào)某些數(shù)據(jù),使其成為視覺(jué)焦點(diǎn)。根據(jù)不同目標(biāo)客戶群的需求,突出數(shù)據(jù)也有很多種方式。
為什么要突出數(shù)據(jù)
受到大字和跳色的影響,用戶會(huì)把注意力放在屏幕內(nèi)指定的區(qū)域,這樣的方式既不刻意,也不強(qiáng)制。由于提供了更簡(jiǎn)便的導(dǎo)航和收集信息的體驗(yàn),信息就能更迅速地被用戶接受。
5. 創(chuàng)造微交互(Micro-interaction)
什么是微交互
微交互是在一個(gè)用例中做出一些小的視覺(jué)提升(如動(dòng)畫、音效等),使用情境可以是完成一段數(shù)據(jù)處理、點(diǎn)贊或者推送即時(shí)消息等等。這些交互雖然看起來(lái)很微妙,卻能正好讓你注意到關(guān)鍵元素,以此來(lái)提高不同產(chǎn)品間的辨識(shí)度。
為什么要有微交互
舉例來(lái)說(shuō),當(dāng)用戶在完成一些小任務(wù),比如調(diào)整設(shè)置,系統(tǒng)能夠彈出友情提示信息,這種人性化的微交互就像是貼心小棉襖。用戶也會(huì)覺(jué)得擁有特贊的微交互的app用起來(lái)更有意思。
6. 精簡(jiǎn)你的配色
什么是精簡(jiǎn)配色
2013年扁平化設(shè)計(jì)橫空出世后,精簡(jiǎn)調(diào)色板就成為了一個(gè)趨勢(shì),一切以明確和簡(jiǎn)潔為綱。結(jié)果,設(shè)計(jì)師和用戶為了更干凈的界面,都開(kāi)始盡量少用顏色。
為什么要精簡(jiǎn)配色
顏色在創(chuàng)造特定情緒、引導(dǎo)用戶視線和品牌傳達(dá)中都必不可少。品牌使用較少甚至專一的顏色能更直接反映出它的品牌標(biāo)識(shí)性。另外,用戶也更喜歡不那么亂花漸欲迷人眼的視覺(jué)效果,它能相當(dāng)有效地突出要點(diǎn),使導(dǎo)航在app使用流程中更清晰明了。
7. 讓界面層次化(Layered Interface)
什么是層次化
曾幾何時(shí),界面設(shè)計(jì)是擬物化(以寫實(shí)為準(zhǔn)則的設(shè)計(jì),如日歷app做得像真的日歷、有景深的app圖標(biāo)、手機(jī)相機(jī)的快門聲音)的天下。如今,時(shí)移世易,大家都高唱“扁平化大法好”。一番改朝換代,扁平化刷新了一些新的規(guī)則,設(shè)計(jì)不再只關(guān)注3D能做多真,而是改用“層”的方式來(lái)營(yíng)造實(shí)體感,從而創(chuàng)造一種更“可觸摸”的體驗(yàn)。
為什么要層次化
雖說(shuō)“扁平化大法好”,但扁平化設(shè)計(jì)最有可能犯的錯(cuò)就是“太扁”,因?yàn)槠湓O(shè)計(jì)過(guò)于微妙,以致用戶很難辨識(shí)和參與其中,更別說(shuō)將其聯(lián)想到3D實(shí)物世界(或者以前的擬物世界)。而“層次化”則利用z軸表達(dá)出了物件壓物件的豎向關(guān)系。分層和增加深度有助于辨別不同物件之間的關(guān)系,也能讓某些特定的對(duì)象得到關(guān)注。
8. 使用Ghost按鈕
什么是ghost按鈕
按鈕透明無(wú)色,邊界的線非常細(xì),形狀也很簡(jiǎn)單(像長(zhǎng)方形或正方形),有直角或柔和邊緣,其中的文本都很簡(jiǎn)潔明了。
為什么要用ghost按鈕
按鈕能在保持極簡(jiǎn)外觀的同時(shí)又吸引人關(guān)注它,而且它可以使屏幕上復(fù)雜的按鈕擁有等級(jí)體系。當(dāng)同一頁(yè)面內(nèi)有很多不同的按鈕時(shí),它們會(huì)根據(jù)優(yōu)先級(jí)被設(shè)計(jì)和擺放(如將按鈕用在選項(xiàng)或過(guò)渡步驟中)。在某些情況下,Material design會(huì)用細(xì)微的陰影來(lái)幫助用戶察覺(jué)到這種等級(jí)體系。
9. 創(chuàng)造手勢(shì)交互(Gestures)
什么是手勢(shì)
陀螺儀和動(dòng)作傳感器的一體化讓設(shè)備偵測(cè)到用戶的動(dòng)作,在此基礎(chǔ)上,用戶與設(shè)備間的交互不僅僅是對(duì)屏幕點(diǎn)來(lái)點(diǎn)去,而更像是現(xiàn)實(shí)生活中的手勢(shì)在屏幕上的移植。
為什么要使用手勢(shì)
用戶都很懶,喜歡用最簡(jiǎn)單的動(dòng)作。舉個(gè)例,如果要讓用戶刪除一個(gè)東西,無(wú)論男女老少都會(huì)嘗試去把這東西拽出屏外。因此,如果要提升用戶體驗(yàn),減少點(diǎn)按,增加滾屏,讓應(yīng)用程序不是個(gè)只能點(diǎn)來(lái)點(diǎn)去的玩意兒,這樣交互性會(huì)更強(qiáng)。
10. 使用動(dòng)效(Motion)
什么是動(dòng)效
隨著軟件革新,設(shè)計(jì)師現(xiàn)在也能僅通過(guò)利用風(fēng)格樣式列表來(lái)控制動(dòng)作了。以運(yùn)動(dòng)特征為基礎(chǔ)的設(shè)計(jì)元素到處都是,包括過(guò)渡、動(dòng)畫甚至是模仿立體的質(zhì)感。設(shè)計(jì)中使用動(dòng)效可以幫助用戶消化內(nèi)容,讓關(guān)鍵元素或數(shù)據(jù)、對(duì)象與其他的內(nèi)容區(qū)分開(kāi),以強(qiáng)調(diào)它的重要性。
為什么要有動(dòng)效
動(dòng)效能將用戶的關(guān)注點(diǎn)轉(zhuǎn)移到特定區(qū)域,或者忽略它們。在界面中做出視覺(jué)響應(yīng)能提高參與度,營(yíng)造小驚喜取悅用戶。
11. 縮短用戶流程
什么是更短的用戶流程
與其讓用戶橫跨多重頁(yè)面來(lái)完成一個(gè)簡(jiǎn)單的需求處理,不如在單屏內(nèi)囊括所有過(guò)渡層階的操作,這樣就能減少其放在app上的時(shí)間和精力。舉個(gè)例子,用戶完成前一個(gè)部分時(shí),就會(huì)有某種形式的自動(dòng)開(kāi)啟,或者出現(xiàn)下一步輸入?yún)^(qū)域的提示。
為什么要縮短用戶流程
移動(dòng)端用戶隨時(shí)都在移動(dòng)中,因此他們更傾向于在app內(nèi)簡(jiǎn)單迅速地完成任務(wù)處理。根據(jù)這個(gè)共識(shí)所設(shè)計(jì)出的應(yīng)用程序體驗(yàn),理應(yīng)讓用戶花費(fèi)的精力降至最小,同時(shí)也可增強(qiáng)app啟動(dòng)時(shí)的速度。
12. 建立設(shè)計(jì)準(zhǔn)則(Design Standard)
什么是設(shè)計(jì)準(zhǔn)則
設(shè)計(jì)標(biāo)準(zhǔn)是在項(xiàng)目初始時(shí),通過(guò)決定色彩、圖標(biāo)和整體布局間距等標(biāo)準(zhǔn),來(lái)確立視覺(jué)語(yǔ)言的過(guò)程。
為什么要有設(shè)計(jì)準(zhǔn)則
建立設(shè)計(jì)標(biāo)準(zhǔn)能使app內(nèi)部以及在不同平臺(tái)之間的表現(xiàn)更為穩(wěn)定和統(tǒng)一,將項(xiàng)目上線時(shí)出錯(cuò)的可能性降到最低,也讓以后的修改更容易。
13. 創(chuàng)造原型(Prototyping)
什么是原型
原型是產(chǎn)品初步或早期的工作版本,能提供對(duì)設(shè)計(jì)具有實(shí)用性和價(jià)值的分析,從而為設(shè)計(jì)的效用作出有價(jià)值的建議,預(yù)測(cè)出潛在的修改需求,以此來(lái)節(jié)約設(shè)計(jì)師在提升用戶體驗(yàn)上所付出時(shí)間和精力。
為什么要?jiǎng)?chuàng)造原型
原型可以通過(guò)進(jìn)行低成本的“實(shí)驗(yàn)”來(lái)顯現(xiàn)出項(xiàng)目的關(guān)鍵要素,包括其條件和特性作用域。它能讓你對(duì)產(chǎn)品進(jìn)行實(shí)驗(yàn)和反復(fù)推敲,將時(shí)間和資源用來(lái)從實(shí)驗(yàn)結(jié)果中去學(xué)習(xí),其整個(gè)過(guò)程是以洞察力為驅(qū)動(dòng)的。