初入職場是否有困惑過自己的設(shè)計(jì)平淡，不夠抓人眼球。本期討論下設(shè)計(jì)基礎(chǔ)理論中的
造型質(zhì)感、配色、排版、畫面故事
是怎么影響視覺體驗(yàn)的，以及如何設(shè)計(jì)更有吸引力？
點(diǎn)線面是設(shè)計(jì)基礎(chǔ)構(gòu)成，其中線分為直線、斜線、曲線、折線等，不同形態(tài)帶給用戶的心理感受也各有不同。線具有引導(dǎo)性&分割性，巧用線可以增強(qiáng)視覺體驗(yàn)，其中曲線更能表現(xiàn)活力和動(dòng)勢，由曲線主導(dǎo)的設(shè)計(jì)更吸睛。
曲線在UI中應(yīng)用也很多，比如將節(jié)奏、數(shù)據(jù)可視化，作為基礎(chǔ)圖形可以在背景圖中使用，結(jié)合動(dòng)效增強(qiáng)視覺體驗(yàn)感。
設(shè)計(jì)中線條過多容易破壞畫面整體性，增加視覺噪音，因此多用面可以提升用戶視覺體驗(yàn)。
依據(jù)格式塔心理學(xué)的
同形聯(lián)想
，我們可以了解到，帶弧度的圓角比尖銳的直接更具有親和力，可以減少用戶的視覺壓力。
在UI設(shè)計(jì)中有嵌套圓角時(shí)需注意弧度，才能更和諧。
顏色有色相明度純度屬性，常規(guī)配色方式有同色系配色、鄰近色配色、類似色配色、中差色配色、對比色配色、中性色配色。而除此外，色彩情緒也需要考量。
色彩情緒是指不同頻率色彩的光信息通過視覺神經(jīng)傳入大腦后，經(jīng)過思維，與以往的記憶及經(jīng)驗(yàn)產(chǎn)生聯(lián)想，從而形成一系列的心理反應(yīng)如冷暖感，是從外在到內(nèi)在，從生理到心理的轉(zhuǎn)換。依據(jù)產(chǎn)品調(diào)性選擇合適色彩，去傳達(dá)品牌情感，可以讓設(shè)計(jì)更具吸引力。
暖色系以紅色、橙色、黃色為主；冷色系以藍(lán)色、青色、青綠色為主；而處于二者之間的綠色和紫色為中性色系。
一般暖色系、高明度、高純度的有前進(jìn)感；冷色系、低明度、低純度的有后退感。
一般暖色系、高明度、高純度的有膨脹感；冷色系、低明度、低純度的有收縮感。
一般暖色系、高明度、低純度的越軟；冷色系、低明度、高純度的越硬。
色彩的輕重感主要取決于明度，明度越高感覺越輕，明度越低感覺越重；純度次之，一般來說高純度的色彩感覺較重，低純度的色彩感覺較輕。
不同場景下色彩情緒有所差異，傳遞的情感是不固定的，即同個(gè)顏色也可能有
積極消極
兩面。比如「紅色」聯(lián)想到火焰是危險(xiǎn)、警示，而聯(lián)想到成熟果實(shí)、怒放鮮花或節(jié)慶又代表喜慶、熱烈。
視覺元素有圖片、文字、視頻等，單個(gè)或多個(gè)信息可以組成信息塊，信息塊化有利于信息逐步獲取。一定程度
信息塊越大、數(shù)量越少
視覺觀感更近，簡而言之勿過于碎片化。一般來說圖片元素優(yōu)于文字元素。
其次界面設(shè)計(jì)中信息塊的分割方式采取面性卡片或間距區(qū)分優(yōu)于分隔線，這也是視覺上讓信息塊更大，因?yàn)榉指艟€容易破壞整體性。同個(gè)信息塊層級區(qū)分除了上述方法外，還可以用大小、顏色對比。
人眼獲取信息會(huì)先從最大最顯眼的元素開始，再逐級發(fā)現(xiàn)其他元素。這種大小上對比幅度在平面設(shè)計(jì)中稱為元素之間的跳躍率。
同理界面設(shè)計(jì)中不同信息塊做大小對比也能增強(qiáng)視覺體驗(yàn)，但需注意場景避免過于搶眼，一般在內(nèi)容首頁或推薦頁中使用。
是指頁面信息內(nèi)容相對頁面的占比，版面率低則留白多，版面率高則留白少。一般來說版面率高的畫面更
熱鬧親切
（吆喝起來），版面率低的畫面更
清冷高級
（愛搭不理），可以根據(jù)設(shè)計(jì)需要進(jìn)行選擇，電商促銷建議選擇版面率高。
不論是平面還是網(wǎng)頁界面設(shè)計(jì)都有視線移動(dòng)方向，簡稱視覺導(dǎo)向。視覺導(dǎo)向有以下6種，水平、垂直、斜向、曲線、核心和導(dǎo)示視覺導(dǎo)向。
水平視覺導(dǎo)向
，畫面元素引導(dǎo)視線水平從左至右，水平排列構(gòu)圖就是簡單的水平導(dǎo)向，在核心信息元素較多時(shí)也能排列清晰。
垂直視覺導(dǎo)向
，畫面元素引導(dǎo)視線垂直從上至下排列，結(jié)合倒三角圖形背景或俯視視角可以巧妙進(jìn)行視線引導(dǎo)，常見于文字?jǐn)?shù)據(jù)可視化類海報(bào)或H5。
斜線視覺導(dǎo)向
，和水平垂直導(dǎo)向類似。曲線視覺導(dǎo)向是元素呈曲線或非規(guī)則排列，雖不如水平或垂直導(dǎo)向直接明了，但結(jié)合
明度大小對比、人物視線、文字動(dòng)線
來引導(dǎo)視覺動(dòng)線后可以明確信息層級的同時(shí)增加畫面動(dòng)感。
核心視覺導(dǎo)向
，同單純視覺焦點(diǎn)不同，核心導(dǎo)向的視覺感受更強(qiáng)烈，畫面有種向心或離心感。而視覺焦點(diǎn)則通常結(jié)合上述其他視覺導(dǎo)向進(jìn)行剩余信息排列設(shè)計(jì)。核心視覺導(dǎo)向建議用于海報(bào)、banner和活動(dòng)頁頭圖中。
導(dǎo)視視覺導(dǎo)向，在平面版式中有意識的利用圖形、文字動(dòng)線等引導(dǎo)用戶按照預(yù)設(shè)好的方向進(jìn)行閱讀，更像輔助手段，上述其余視覺導(dǎo)向中均可結(jié)合元素引導(dǎo)視覺動(dòng)線，此處不再舉例。
IP是打造品牌人格化有效手段，可以傳達(dá)品牌價(jià)值觀，建立產(chǎn)品和用戶情感鏈接。企業(yè)IP需要注意，形象貼合產(chǎn)品，建立表情、著裝、動(dòng)作動(dòng)態(tài)、風(fēng)格規(guī)范。線上場景可以應(yīng)用在logo圖標(biāo)，啟動(dòng)頁、個(gè)人頁、會(huì)員中心、空頁面、彈窗等配圖，各類運(yùn)營位，掛件，表情包和虛擬助手等等。
基于設(shè)備硬件陀螺儀、重力感應(yīng)等傳感器的引入，視覺設(shè)計(jì)不再單一，如
滾動(dòng)視差、懸停視差、陀螺儀裸眼3D
，即發(fā)生交互行為時(shí)改變當(dāng)前所見元素（元素可以是圖片、按鈕、導(dǎo)航組件等等），讓靜態(tài)畫面動(dòng)起來，更具有故事性和趣味性。
將整個(gè)產(chǎn)品賦予一定的故事概念，可以結(jié)合IP進(jìn)行全方面設(shè)計(jì)，如阿柴記賬、trader joe‘s線上復(fù)古商店、專注旅人等等。
也可以將產(chǎn)品局部頁面賦予一定的概念如淘寶下拉頁面進(jìn)入二樓。
![平面理論告訴你，UI設(shè)計(jì)如何更有吸引力？]()
作者：行空設(shè)計(jì)
鏈接：https://www.zcool.com.cn/article/ZMTYyMTQ0OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
