<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 如何成為有交互和視覺思維的UI 設(shè)計(jì)師?

          2018-6-19    濤濤

          UI 在拿到產(chǎn)品原型時(shí)該如何思考?如何著手設(shè)計(jì)界面?最近跟一些設(shè)計(jì)師朋友交流 UI 設(shè)計(jì)方案,總結(jié)了一下在方案優(yōu)化的思考過程,在這里分享給大家。

          一、兩道思維

          很多 UI 拿到一個(gè)頁(yè)面原型的時(shí)候,就立馬打開各大設(shè)計(jì)網(wǎng)站找參考,然后照著參考頁(yè)面上的效果,生搬硬套到原型上,這只是達(dá)到了單純美化頁(yè)面的效果。
          那么拿到原型后應(yīng)該帶著怎樣的思維來進(jìn)行思考呢?

          第一道思維:交互思維

          先了解頁(yè)面實(shí)現(xiàn)什么功能,功能的交互操作流程是怎樣的,也就是說用戶操作這個(gè)頁(yè)面上的功能時(shí),用戶的行為路徑是怎樣的。

          第二道思維:視覺思維

          了解完功能、交互后,提取原型中視覺組成元素,細(xì)分歸類,每一類應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計(jì)。

          然后交互與視覺一同結(jié)合來設(shè)計(jì)界面。

          二、思維應(yīng)用

          結(jié)合案例我們來看下兩道思維是如何進(jìn)行的。

          第一道思維:交互思維

          了解功能交互流程。

          根據(jù)實(shí)例原型分析出用戶行為路徑:

          用戶行為路徑:

          注意點(diǎn):

          • 用戶行為路徑的獲取,一定要跟產(chǎn)品經(jīng)理、交互設(shè)計(jì)師進(jìn)行溝通確認(rèn)清楚。
          • 用戶行為路徑某些步驟中,也有先后之分,比如第1步中,用戶輸入了賬戶地址后,才會(huì)有賬戶的相關(guān)數(shù)據(jù)顯示。
          • 用戶行為路徑可以支撐信息內(nèi)容進(jìn)行歸類分組。
          第二道思維:視覺思維

          提取視覺組成元素。

          視覺元素:

          注意點(diǎn):

          • 提取視覺組件元素盡量詳細(xì)歸類。
          • 如有視覺規(guī)范,視覺組件元素風(fēng)格應(yīng)用請(qǐng)遵循視覺規(guī)范。
          • 如無視覺規(guī)范,同類視覺組件元素應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計(jì)。

          三、檢驗(yàn)方案

          我們帶著兩道思維來檢驗(yàn)一下這位設(shè)計(jì)師輸出的方案:

          問題1:交互層級(jí)

          問題所在:

          數(shù)據(jù)顯示在前,輸入在后,交互操作層級(jí)有點(diǎn)混亂。

          問題截圖:

          問題解決:

          用戶行為路徑中,第1步有個(gè)先后順序,先輸入地址,后顯示數(shù)據(jù),在進(jìn)行信息內(nèi)容布局設(shè)計(jì)的時(shí)候同樣需要有先后順序,所以交互操作層級(jí)一定程度上影響著布局排版。

          問題2:步驟關(guān)聯(lián)

          問題所在:

          「批量轉(zhuǎn)賬」按鈕歸類到了第1步的信息模塊中,交互操作邏輯有點(diǎn)不通暢。

          問題截圖:

          解決方案:

          用戶行為路徑中,用戶核心費(fèi)用信息后,最有可能的行為就是點(diǎn)擊「批量轉(zhuǎn)賬」按鈕,所以「批量轉(zhuǎn)賬」按鈕與轉(zhuǎn)賬費(fèi)用信息的操作關(guān)聯(lián)性比較大,應(yīng)該在同一模塊里會(huì)更符合交互操作邏輯。

          問題3:顏色應(yīng)用

          問題所在:

          主色、點(diǎn)綴色、輔助色各自的應(yīng)用范圍沒有規(guī)則,顏色應(yīng)用混亂。

          問題截圖:

          問題解決:

          一個(gè)頁(yè)面或者項(xiàng)目中,各種顏色的應(yīng)用范圍需要有一定規(guī)范,文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對(duì)應(yīng)的使用規(guī)則。

          問題4:輸入控件

          問題所在:

          輸入類組件樣式存在多樣性,同樣是輸入框,有多種樣式,會(huì)造成用戶交互操作上的認(rèn)知有誤。

          問題截圖:

          問題解決:

          一個(gè)頁(yè)面或者項(xiàng)目中,輸入類組件樣式應(yīng)用統(tǒng)一性原則,保持視覺風(fēng)格一致,從而減少用戶操作認(rèn)知偏差。

          問題5:按鈕樣式

          問題所在:

          按鈕樣式應(yīng)用到不具備按鈕點(diǎn)擊屬性的對(duì)象上,用戶會(huì)認(rèn)為也是可點(diǎn)擊,會(huì)造成用戶交互操作上的認(rèn)知有誤。

          問題截圖:

          問題解決:

          一個(gè)頁(yè)面或者項(xiàng)目中,不具備按鈕點(diǎn)擊屬性的元素盡量不要套用按鈕樣式,減少用戶操作認(rèn)知偏差。

          舉個(gè)例子:人形的稻草套上人的衣服,成功了欺騙了人們,造成了認(rèn)知偏差。

          問題6:信息展示

          問題所在:

          同類信息內(nèi)容的展示存在多樣式,傳達(dá)過程中加重了用戶的認(rèn)知負(fù)擔(dān)。

          問題截圖:

          問題解決:

          一個(gè)頁(yè)面或者項(xiàng)目中,同類信息內(nèi)容的展示應(yīng)用相似性原則保持視覺風(fēng)格一致,因?yàn)橄嗨菩缘牟季挚梢愿拥貍鬟_(dá)信息。

          舉個(gè)例子:電商頁(yè)面,金額信息展示;理財(cái)頁(yè)面,收益信息的展示;都是應(yīng)用相似性的布局,即統(tǒng)一又地傳達(dá)信息。

          問題7:圖標(biāo)風(fēng)格

          問題所在:

          圖標(biāo)風(fēng)格不一致,圖形反白風(fēng)格,立體風(fēng)格,線性風(fēng)格。

          問題截圖:

          問題解決:

          根據(jù)產(chǎn)品的特性,建議統(tǒng)一的圖標(biāo)風(fēng)格,選擇線性、面性、漸變、立體等風(fēng)格。

          問題八:對(duì)齊間隔

          問題所在:

          頁(yè)面元素的對(duì)齊、間隔沒有規(guī)律,整體視覺顯得松散,不嚴(yán)謹(jǐn)。

          問題截圖:

          問題解決:

          可以利用柵格系統(tǒng),把頁(yè)面信息內(nèi)容規(guī)整起來。

          四、優(yōu)化方案

          根據(jù)發(fā)現(xiàn)的問題,我們來看一下優(yōu)化后的設(shè)計(jì)方案:

          優(yōu)化1:交互路徑

          根據(jù)用戶行為路徑,將相關(guān)聯(lián)的信息歸類到一個(gè)模塊,每個(gè)步驟劃分到一個(gè)模塊,相關(guān)聯(lián)的步驟合并到一個(gè)模塊,模塊內(nèi)完成各自的操作展示任務(wù),模塊之間信息內(nèi)容互不干擾,但從結(jié)構(gòu)布局又能夠形成符合交互操作邏輯。

          優(yōu)化2:顏色規(guī)范

          規(guī)范顏色,配色的方法在這里不做深入討論,這里方法的是基于品牌色通過飽和度、亮度、透明度的變化來得出文字各層級(jí)的顏色、邊框的顏色。

          優(yōu)化3:輸入控件

          對(duì)輸入類控件的樣式進(jìn)行了統(tǒng)一,讓用戶從視覺上就能夠清楚地分辨出哪些是可以進(jìn)行輸入操作的,從而減少用戶對(duì)交互操作上的認(rèn)知成本,提高信息輸入效率。

          輸入控件進(jìn)行交互時(shí),要有交互狀態(tài)反饋,默認(rèn)狀態(tài)、選中狀態(tài)、錯(cuò)誤狀態(tài)。視情況而定,可以增加鼠標(biāo)移上狀態(tài)和不可輸入狀態(tài)。

          狀態(tài)變化時(shí)的顏色應(yīng)用,可以通過變換色相的透明度來保持色彩的一致性。

          優(yōu)化4:按鈕規(guī)范

          對(duì)按鈕進(jìn)行了分類,分為常規(guī)按鈕、圖標(biāo)按鈕、文字按鈕;對(duì)按鈕樣式用顏色進(jìn)行了統(tǒng)一;按鈕要有交互狀態(tài)反饋,不可點(diǎn)擊狀態(tài)、可點(diǎn)擊狀態(tài)、鼠標(biāo)移上狀態(tài)、鼠標(biāo)按下。

          狀態(tài)變化時(shí)的顏色應(yīng)用,可以通過變換色相的飽和度、亮度、透明度來保持色彩的一致性。

          優(yōu)化5:信息展示

          對(duì)信息內(nèi)容應(yīng)用相似性原則進(jìn)行了排版的統(tǒng)一處理,每個(gè)小類信息的標(biāo)題與內(nèi)容采用統(tǒng)一排版格式,然后重復(fù)應(yīng)用,有助于提高信息獲取效率。

          優(yōu)化6:圖標(biāo)風(fēng)格

          這里的圖標(biāo)應(yīng)用于功能性圖標(biāo),統(tǒng)一采用線性圓角風(fēng)格。功能性圖標(biāo)需要注意圖標(biāo)的形狀要能夠正確有效地傳達(dá)出功能的含義。

          優(yōu)化7:對(duì)齊間隔

          應(yīng)用柵格系統(tǒng)對(duì)視覺元素之間的對(duì)齊、間隔進(jìn)行調(diào)整,使頁(yè)面視覺更加嚴(yán)謹(jǐn),頁(yè)面信息更容易閱讀。

          五、總結(jié)

          交互思維

          了解頁(yè)面中的功能交互流程,梳理用戶操作行為路徑,可以對(duì)行為步驟中的信息內(nèi)容進(jìn)行歸類分組提供依據(jù),最終有助于頁(yè)面信息內(nèi)容的排版布局。

          視覺思維

          提取視覺組成元素,對(duì)顏色、文字、控件、圖標(biāo)等每一類應(yīng)用統(tǒng)一性原則進(jìn)行規(guī)范設(shè)計(jì),再通過視覺元素本身相互組合,最終應(yīng)用回信息內(nèi)容上,建立規(guī)范的視覺感。

          設(shè)計(jì)一個(gè)頁(yè)面,交互思維和視覺思維是互相配合的,缺一不可,最終都是為了共同去構(gòu)造符合交互操作邏輯、滿足視覺美感的界面。

          日歷

          鏈接

          個(gè)人資料

          存檔

          无码国内精品久久人妻蜜桃| 久久国产V一级毛多内射| 亚洲?V乱码久久精品蜜桃| 中文字幕精品久久| 久久99国产乱子伦精品免费| 嫩草影院久久国产精品| 亚洲国产天堂久久综合| 久久综合香蕉国产蜜臀AV| 一级做a爰片久久毛片16| 久久婷婷色香五月综合激情 | 久久人人爽人人爽人人片AV不| 国产精品99精品久久免费| 午夜精品久久久久久久无码| 久久亚洲私人国产精品vA| 久久国产精品视频| 成人久久综合网| 伊人久久大香线蕉AV色婷婷色| 国产精品欧美亚洲韩国日本久久| 中文字幕人妻色偷偷久久| 久久AAAA片一区二区| 丁香狠狠色婷婷久久综合| 欧美熟妇另类久久久久久不卡| 久久久噜噜噜久久中文字幕色伊伊| 人妻无码αv中文字幕久久| 大香伊人久久精品一区二区| 国产免费久久久久久无码| 久久噜噜电影你懂的| 国产精品99精品久久免费| 韩国免费A级毛片久久| 亚洲AV无码久久| 久久久久人妻一区二区三区vr| 国产精品99久久久精品无码| 亚洲七七久久精品中文国产| 久久人搡人人玩人妻精品首页| 久久免费观看视频| 久久免费香蕉视频| 午夜精品久久久久| 99久久免费国产精品特黄| 99久久精品国产一区二区| 久久综合国产乱子伦精品免费| 久久久亚洲欧洲日产国码aⅴ|