掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

2 評(píng)論 10991 瀏覽 143 收藏 10 分鐘

B端設(shè)計(jì)規(guī)范如何正確搭建,好的設(shè)計(jì)規(guī)范對(duì)設(shè)計(jì)有什么幫助呢?設(shè)計(jì)夾老師在這篇文章中圍繞清晰、高效、友好、可控四個(gè)關(guān)鍵設(shè)計(jì)原則,帶你一步步建立起設(shè)計(jì)規(guī)范,推薦各位設(shè)計(jì)er和對(duì)交互產(chǎn)品、B端產(chǎn)品設(shè)計(jì)感興趣的童鞋閱讀。

Halo,這里是設(shè)計(jì)夾,今天為大家分享的是「B端設(shè)計(jì)。B端設(shè)計(jì)離不開設(shè)計(jì)規(guī)范這個(gè)話題,而做好設(shè)計(jì)規(guī)范是一個(gè)龐大復(fù)雜工程,很多人對(duì)這些處于一知半解狀態(tài)。在這個(gè)系列文章里通過結(jié)合平時(shí)的項(xiàng)目案例來談?wù)勛约簩?duì)B端設(shè)計(jì)規(guī)范的一些理解,希望可以帶來一些啟發(fā)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

本篇先談?wù)勗O(shè)計(jì)規(guī)范制作的指導(dǎo)思想–設(shè)計(jì)原則,后續(xù)文章再展開講一下常見各種組件的設(shè)計(jì)規(guī)范。

一、設(shè)計(jì)規(guī)范作用

設(shè)計(jì)規(guī)范作為B端設(shè)計(jì)中非常重要的一環(huán),它的作用主要體現(xiàn)在以下三個(gè)方面:

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

在日常工作中,當(dāng)項(xiàng)目組收到一個(gè)新的需求時(shí),如果已經(jīng)具備了成熟的設(shè)計(jì)規(guī)范體系,其工作效率往往會(huì)得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程:

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

二、設(shè)計(jì)原則

通過前面內(nèi)容我們知道了設(shè)計(jì)規(guī)范對(duì)于產(chǎn)品設(shè)計(jì)意義重大,那么制定設(shè)計(jì)規(guī)范制定依據(jù)又是什么呢?這里就要引出設(shè)計(jì)原則這個(gè)話題,設(shè)計(jì)原則是設(shè)計(jì)規(guī)范的總綱領(lǐng),所有的設(shè)計(jì)規(guī)范都應(yīng)當(dāng)以設(shè)計(jì)原則為基準(zhǔn)。設(shè)計(jì)原則主要包含以下內(nèi)容:

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

接下來就圍繞設(shè)計(jì)原則清晰、高效、友好、可控這四個(gè)方面展開講解。

(一) 清晰

清晰原則主要從視覺角度讓界面信息傳達(dá)合理,提高用戶信息獲取效率。主要包含對(duì)比,親密,對(duì)齊,重復(fù)四個(gè)方面。

1.對(duì)比

對(duì)比是指界面中為了區(qū)分信息層級(jí),強(qiáng)化元素對(duì)比度,使用的很常見的一種手段。例如,下圖中利用大色塊按鈕與線框按鈕形成對(duì)比來凸顯關(guān)鍵按鈕;通過對(duì)文字字號(hào)加大,字體加粗,顏色加深來與弱文案形成對(duì)比,凸顯關(guān)鍵文字信息。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

2.親密

如果信息之間關(guān)聯(lián)性越高,它們之間的距離就應(yīng)該越接近,也越像一個(gè)視覺單元;反之,距離就應(yīng)該越遠(yuǎn),也越像多個(gè)視覺單元。親密性的根本目的是實(shí)現(xiàn)組織性,讓用戶對(duì)頁面結(jié)構(gòu)和信息層次一目了然。掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

3.對(duì)齊

在界面設(shè)計(jì)中,將元素進(jìn)行對(duì)齊,既符合了用戶的認(rèn)知特點(diǎn)(我們往往傾向使知覺對(duì)象的直線延續(xù)還是直線,曲線延續(xù)還是曲線),也能引導(dǎo)用戶視覺流,讓用戶更流暢地接收信息。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

4.重復(fù)

重復(fù)是指相同的元素在項(xiàng)目中重復(fù)引用,作用是可以有效降低用戶的學(xué)習(xí)成本,同時(shí)提高這些元素之間的關(guān)聯(lián)性。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

(二) 高效

高效原則體現(xiàn)在便捷、輕量、簡(jiǎn)化、一致幾個(gè)方面,目的是通過合理的方式讓產(chǎn)品操作更加便捷;交互體驗(yàn)與內(nèi)容更加輕量和簡(jiǎn)化;以及產(chǎn)品風(fēng)格保持一致。下面結(jié)合常見案例說明如何應(yīng)用這一原則。

1.合理利用拖拽–便捷、輕量

在涉及到諸如上傳文件,排序,滑動(dòng)輸入,搭建等需求時(shí),合理采用拖拽交互往往可以打造更加便捷用戶體驗(yàn)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

2.盡量減少不必要的跳轉(zhuǎn)–便捷、輕量

用戶操作過程盡量減少跳轉(zhuǎn),以實(shí)現(xiàn)交互減步長(zhǎng),從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起;能用展開收起就不用氣泡…依次類推(優(yōu)先級(jí)從高到低:原位>展開收起>氣泡>彈窗>抽屜>新頁面)

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

3.放大點(diǎn)擊熱區(qū)–便捷

放大可點(diǎn)擊按鈕熱區(qū),相對(duì)于較小點(diǎn)擊熱區(qū),具備更絲滑操作體驗(yàn)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

4.懸停即現(xiàn)–輕量

利用懸停即現(xiàn),避免信息過于重復(fù)啰嗦,簡(jiǎn)化頁面提高閱讀體驗(yàn)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

5.折疊次要功能–簡(jiǎn)化

頁面功能按鈕過多時(shí),可將次要按鈕收納到一起,點(diǎn)擊時(shí)再展開,外面只展示高頻操作或重要按鈕,保證頁面內(nèi)容簡(jiǎn)潔。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

6.統(tǒng)一樣式–一致

一致性是指在不同頁面中相同操作應(yīng)保持一致視覺與交互樣式,可有降低用戶學(xué)習(xí)成本與企業(yè)開發(fā)成本。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

(三) 友好

友好原則應(yīng)貫穿用戶操作前,操作中及操作后三個(gè)階段,給予用戶及時(shí)反饋與幫助。

1.操作前

在用戶操作前給到合適的引導(dǎo)與幫助,有效減少用戶迷茫感。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

2.操作中

通過交互效果及頁面樣式讓用戶可以清晰感知到自己當(dāng)前操作。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

3.操作后

利用界面中元素變化清晰直觀展示當(dāng)前的狀態(tài)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

(四) 可控

可控主要體現(xiàn)在自由和導(dǎo)航兩個(gè)方面。

1.自由

自由即指用戶可以自由完成一些操作,例如回退,撤銷,終止等。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

2.導(dǎo)航

導(dǎo)航是指用戶隨時(shí)知曉當(dāng)前所在位置,而且可以利用導(dǎo)航隨意到達(dá)目標(biāo)頁面。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

最后

通過本篇內(nèi)容我們大概知道了制作設(shè)計(jì)規(guī)范主要方向,那么具體到每個(gè)組件上,我們?cè)撊绾稳ピO(shè)計(jì)呢?后續(xù)篇章將細(xì)分聊聊如何去設(shè)計(jì)「B端常見組件」。

專欄作家

作者:Clippp,微信公眾號(hào):Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 按鈕對(duì)比中的配圖是不是配反了

    來自陜西 回復(fù)
  2. 學(xué)習(xí)了

    來自吉林 回復(fù)