咱們這章就重點(diǎn)說說如何組合元素搭配出有設(shè)計(jì)感又實(shí)用的構(gòu)圖，希望你看完之后能有所收獲。

個(gè)人主頁頭部與其說是一個(gè)組件，不如說是「在個(gè)人頁中一塊聚合信息的區(qū)域」，因?yàn)榻^大多數(shù)帶個(gè)人社交主頁的App，都采用了類似的做法，或有相似的框架，所以我們可以在這里討論這一區(qū)域的通用設(shè)計(jì)方法。

彈窗是一種瞬態(tài)的交互式視圖，它會(huì)在“合適”的時(shí)間彈出到頁面的最頂層，并借由用戶的一次點(diǎn)擊完成關(guān)閉。

今天要討論的話題主要是關(guān)于點(diǎn)線面分布分析，這部分知識(shí)主要是針對(duì)空間層面的，學(xué)會(huì)后真的可以做到任何一張圖都能拿來直接做。好啦閑話不多說下面開始今天的內(nèi)容。

下面將從 01、版式的組成；02、構(gòu)圖的平衡；03、設(shè)計(jì)的原則三個(gè)方面介紹版式設(shè)計(jì)的創(chuàng)作思路。

彈窗是一種瞬態(tài)的交互式視圖，它會(huì)在“合適”的時(shí)間彈出到頁面的最頂層，并借由用戶的一次點(diǎn)擊完成關(guān)閉。在我們習(xí)慣的語境中，彈窗僅指模態(tài)彈窗，故這里不討論那些看上去也是彈出式卻非模態(tài)彈窗，那些控件均有自己專門的分類，例如 Toast (吐司提示)。

彈窗最主要的功能就是服務(wù)于當(dāng)前主任務(wù)之外的支線任務(wù)，包括信息傳遞，操作反饋等。對(duì)話框，警告框，toast......都屬于彈窗，但是使用場景都不一樣。在合適的業(yè)務(wù)場景選擇合適的彈窗組件，能夠保證最基礎(chǔ)的用戶體驗(yàn)。因?yàn)橄駨?qiáng)干擾類彈窗的使用，對(duì)用戶而言，更是一種強(qiáng)加的任務(wù)，很容易導(dǎo)致用戶喪失耐心而流失

產(chǎn)品思維是設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)所需具備的關(guān)鍵能力之一。擁有強(qiáng)大的產(chǎn)品思維能力可以幫助設(shè)計(jì)師更好地理解客戶需求，使設(shè)計(jì)效果更加符合市場需求，從而實(shí)現(xiàn)商業(yè)成功。那么如何判斷一位設(shè)計(jì)師是否具有產(chǎn)品思維能力呢？

前言在B端的業(yè)務(wù)之中，數(shù)據(jù)概覽頁面屬于常見的頁面，對(duì)主管有快速查看/查詢/決策的左右，對(duì)于執(zhí)行也能查詢到KPI是否完成的，防止遺漏的作用。今天就結(jié)合業(yè)務(wù)之中的一個(gè)案例，跟大家做一個(gè)分享，有不同的意見可以留言或者是私聊溝通（謝謝大家）。業(yè)務(wù)需求我們團(tuán)隊(duì)主要做的OA類型的項(xiàng)目，主要是服務(wù)于公司內(nèi)部的開發(fā)團(tuán)隊(duì)。隨著業(yè)務(wù)的逐步拓展、用戶的角色需求的多樣化、角色數(shù)量的多樣化、團(tuán)隊(duì)內(nèi)部開發(fā)團(tuán)隊(duì)難度、設(shè)計(jì)師人手有限等矛盾不斷遞增，8個(gè)數(shù)據(jù)概覽模塊面臨著體驗(yàn)復(fù)雜以及設(shè)計(jì)開發(fā)難度大的問題。涉及到的元素

業(yè)務(wù)：涉及8個(gè)應(yīng)用，40個(gè)頁面。
角色分解：QA,IPM,SPM，TMDE,TES，模塊owner。
使用場景：管理者匯總團(tuán)隊(duì)信息、向上匯報(bào)以及分析數(shù)據(jù)。

現(xiàn)有問題體驗(yàn)不一致，提高管理成本：

架構(gòu)組件以及樣式不同的模塊完全不相同，缺少規(guī)范性

開發(fā)低效，溝通成本高:

組件重復(fù)開發(fā)，開發(fā)成本高
設(shè)計(jì)師與開發(fā)溝通成本高

解決問題解決流程分為：找高頻框架通過收集40個(gè)頁面的布局，結(jié)合對(duì)執(zhí)行者與決策者的角色行為進(jìn)行分析，將所有的頁面分為：

數(shù)據(jù)概覽
數(shù)據(jù)分析
詳情查看

重復(fù)組件將可視化按照空間分成；

底層：背景
內(nèi)容層：頁頭+篩選+圖表+表格
頂層：動(dòng)作按鈕

高頻樣式現(xiàn)有的樣式雜亂無章，因此針對(duì)現(xiàn)有的樣式進(jìn)行收集和整理分類為布局，色板，字體，將所有的頁面所有的元素進(jìn)行拆解，統(tǒng)計(jì)高頻樣式。分成：

布局：按照業(yè)務(wù)流程順序區(qū)分
高度：統(tǒng)計(jì)導(dǎo)航欄的高度重新計(jì)算高度
走向：統(tǒng)計(jì)現(xiàn)有瀏覽器導(dǎo)航高度重新定高度
字體：現(xiàn)有字體尤其是在數(shù)字的展現(xiàn)方式區(qū)分度不夠

組架構(gòu)組合3個(gè)場景并且對(duì)頁面進(jìn)行分類，提取其中高頻的進(jìn)行整理繼續(xù)布局：

數(shù)據(jù)概覽：圖表+頁頭
數(shù)據(jù)分析：頁頭+篩選+指標(biāo)+圖表
詳情查看：頁頭+篩選+圖表+詳細(xì)表格

組件組合模塊根據(jù)業(yè)務(wù)進(jìn)行“總-分”形式的：

功能模塊
子模塊
子功能

上面是針對(duì)于常規(guī)的功能模塊，針對(duì)非常規(guī)的模塊「例如：結(jié)果頁面」進(jìn)行更加細(xì)化的區(qū)分“圖表”“表格”“篩選”，再度細(xì)分成為主體和變體進(jìn)行區(qū)分。樣式組合

布局：將7個(gè)常規(guī)的布局手鏈成為2個(gè)：“字-左上，圖表右下”，“圖表左右，注釋右邊”
高度：以win為例，導(dǎo)航欄分為3欄，再去保證頁面的報(bào)告率格急性型分組：1920對(duì)應(yīng)的是440，1600對(duì)應(yīng)的是360px，1366對(duì)應(yīng)的是280px
走向：根據(jù)統(tǒng)計(jì)的數(shù)據(jù)來，3個(gè)模塊會(huì)出現(xiàn)超過20字的注釋或者是標(biāo)簽名，因此延伸出2套解決方案：“自上而下”，和“自下而上”，經(jīng)過驗(yàn)證邀請(qǐng)幾個(gè)同學(xué)發(fā)現(xiàn)自上而下閱讀成本低，理解成本更低
字體：現(xiàn)有字體中，常規(guī)的默認(rèn)字體區(qū)區(qū)分度不高，所以引入了Din作為支持?jǐn)?shù)字呈現(xiàn)的

作者：一只雞腿啊啊啊
鏈接：https://www.zcool.com.cn/article/ZMTU4NDQyOA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢～希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

一、注意力的定義與其重要性

駕駛員的注意力和分心因素在車輛行駛過程中起著至關(guān)重要的作用。理解這些因素可以幫助我們更好地設(shè)計(jì)車載界面，優(yōu)化駕駛員的注意力和減少分心。
1、注意力的定義注意力是指個(gè)體對(duì)特定信息的選擇性關(guān)注和處理能力。在駕駛過程中，駕駛員需要將注意力集中在道路、交通狀況和車輛操作上，以保持對(duì)駕駛環(huán)境的全面感知和準(zhǔn)確判斷。駕駛員的注意力是駕駛安全的重要保障，它直接影響著駕駛員對(duì)道路情況的感知和對(duì)緊急情況的反應(yīng)能力。
2、注意力的重要性駕駛員的注意力是駕駛安全的關(guān)鍵因素。當(dāng)駕駛員的注意力集中在道路和交通環(huán)境上時(shí)，他們能夠更好地應(yīng)對(duì)突發(fā)狀況、減少事故的發(fā)生。
然而，許多車輛的控制面板上充斥著過多的按鈕、圖標(biāo)和信息，駕駛員往往需要分心去操作和獲取所需的信息，這會(huì)增加駕駛員的認(rèn)知負(fù)荷，降低他們對(duì)道路的關(guān)注度。此外，娛樂系統(tǒng)、通信設(shè)備和導(dǎo)航系統(tǒng)等功能的設(shè)計(jì)也可能分散駕駛員的注意力，進(jìn)一步增加駕駛風(fēng)險(xiǎn)。

二、駕駛分心的分類及最佳實(shí)踐

1、視覺分心

當(dāng)駕駛員的注意力從道路上轉(zhuǎn)移到車輛內(nèi)部或周圍環(huán)境時(shí)，就會(huì)發(fā)生視覺分心。例如，看手機(jī)、調(diào)整收音機(jī)或?qū)ふ椅锲返?。最佳?shí)踐：
設(shè)計(jì)清晰明了的界面，減少對(duì)駕駛員視覺注意力的分散。
提供語音控制和手勢識(shí)別功能，減少對(duì)視覺操作的需求。
提供重要信息的高亮顯示，引導(dǎo)駕駛員的注意力。

2、聽覺分心

當(dāng)駕駛員的聽覺注意力被車內(nèi)或外部的聲音干擾時(shí)，就會(huì)發(fā)生聽覺分心。例如，響亮的音樂、電話鈴聲或警報(bào)聲等。最佳實(shí)踐：
提供音量控制和靜音功能，使駕駛員能夠調(diào)整或暫時(shí)關(guān)閉聲音。
使用清晰而明確的聲音提示，以幫助駕駛員理解重要信息。
提供語音交互和語音反饋功能，減少對(duì)視覺操作和聽覺注意力的需求。

3、操作分心

當(dāng)駕駛員需要進(jìn)行復(fù)雜或分散注意力的操作時(shí)，就會(huì)發(fā)生操作分心。例如，調(diào)節(jié)座椅、操作車載系統(tǒng)或?qū)ふ姨囟ǖ陌粹o等。最佳實(shí)踐：
設(shè)計(jì)簡單易用的界面和操作控件，減少操作的復(fù)雜性和誤觸發(fā)的可能性。
提供大而易于點(diǎn)擊的按鈕和觸摸屏，減少操作時(shí)的錯(cuò)誤和分心情況。
提供語音控制和手勢識(shí)別功能，使駕駛員能夠通過自然的方式與車輛進(jìn)行交互。

4、認(rèn)知分心

當(dāng)駕駛員的思維或注意力被其他事物或任務(wù)占據(jù)時(shí)，就會(huì)發(fā)生認(rèn)知分心。例如，擔(dān)心工作、家庭問題或沉思等。最佳實(shí)踐：
提供駕駛輔助功能，如盲點(diǎn)監(jiān)測和自動(dòng)緊急制動(dòng)等，以減輕駕駛員的認(rèn)知負(fù)荷。
提供語音提醒和警示功能，幫助駕駛員保持對(duì)道路的關(guān)注。

三、車上分心動(dòng)作的風(fēng)險(xiǎn)指數(shù)評(píng)估

1、分心動(dòng)作的風(fēng)險(xiǎn)指數(shù)評(píng)估指標(biāo)

注意力分散程度：行為會(huì)導(dǎo)致駕駛員的注意力從道路上轉(zhuǎn)移出去嗎？如果是的話，分散注意力的程度有多大？
執(zhí)行動(dòng)作的復(fù)雜性：行為需要駕駛員進(jìn)行多個(gè)步驟或操作嗎？操作的難度有多大？
執(zhí)行動(dòng)作的時(shí)機(jī)：行為發(fā)生的時(shí)機(jī)會(huì)增加駕駛員的負(fù)擔(dān)嗎？例如，在交通繁忙或高速駕駛時(shí)進(jìn)行某個(gè)動(dòng)作可能會(huì)增加風(fēng)險(xiǎn)。
行為的頻率和持續(xù)時(shí)間：行為的頻率和持續(xù)時(shí)間會(huì)對(duì)駕駛員的分心程度產(chǎn)生影響。頻繁和持續(xù)的分心行為可能會(huì)增加事故的風(fēng)險(xiǎn)。
行為的緊迫性：行為是否需要立即執(zhí)行？如果不是緊急情況，駕駛員可以選擇將其推遲到安全的停車點(diǎn)。基于以上因素，可以將分心動(dòng)作的風(fēng)險(xiǎn)指數(shù)劃分為不同的級(jí)別，例如低風(fēng)險(xiǎn)、中風(fēng)險(xiǎn)和高風(fēng)險(xiǎn)。

2、車上常見的行為風(fēng)險(xiǎn)指數(shù)

然而，需要注意的是，風(fēng)險(xiǎn)指數(shù)是一個(gè)相對(duì)的指標(biāo)，不同的駕駛員可能會(huì)因其駕駛技能、經(jīng)驗(yàn)和個(gè)人特點(diǎn)而對(duì)同一行為產(chǎn)生不同的反應(yīng)和風(fēng)險(xiǎn)感知。因此，駕駛員應(yīng)該始終遵守交通規(guī)則和法律，盡量避免分心行為，以確保自己和他人的安全。

四、減少用戶分心的設(shè)計(jì)原則

1、直觀性和簡潔性

界面布局清晰：將重要的信息和功能放置在易于尋找和操作的位置，避免過多的菜單和子菜單層級(jí)。
易于理解的圖標(biāo)和標(biāo)識(shí)：使用直觀和易于理解的圖標(biāo)和標(biāo)識(shí)，減少對(duì)駕駛員的學(xué)習(xí)和認(rèn)知負(fù)荷。

2、易用性和可操作性

大按鈕和簡單操作：設(shè)計(jì)大而易于點(diǎn)擊的按鈕，減少操作時(shí)的誤觸發(fā)和分心情況。
語音控制和手勢識(shí)別：提供語音控制和手勢識(shí)別功能，使駕駛員能夠通過自然的方式與車輛進(jìn)行交互，減少對(duì)視覺操作的依賴。

3、信息分層和優(yōu)先級(jí)

重要信息的突出顯示：將重要的信息以醒目的方式顯示在界面上，引導(dǎo)駕駛員的注意力。
信息的分層和分類：根據(jù)信息的重要性和緊急程度，將信息進(jìn)行分層和分類展示，減少駕駛員的注意力轉(zhuǎn)移。

4、視覺引導(dǎo)和反饋

清晰的視覺引導(dǎo)：通過合適的顏色、圖標(biāo)、動(dòng)畫等視覺元素，引導(dǎo)駕駛員進(jìn)行正確的操作。
即時(shí)的反饋和確認(rèn)：在駕駛員進(jìn)行操作后，及時(shí)給予反饋和確認(rèn)，確保駕駛員的操作得到正確執(zhí)行。
遵循這些車載界面設(shè)計(jì)原則，可以幫助駕駛員更輕松地操作車輛控制面板，減少對(duì)信息的解讀和理解時(shí)間，降低駕駛員的認(rèn)知負(fù)荷，并提高駕駛員對(duì)道路情況的關(guān)注度。同時(shí)，合理分層和展示信息，以及提供清晰的視覺引導(dǎo)和反饋，可以幫助駕駛員更好地理解和處理信息，減少分心情況的發(fā)生。

作者：飛凡實(shí)驗(yàn)室
來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢～希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司