UI設(shè)計(jì)師交互設(shè)計(jì)-如何提升B端界面精致度

2022-4-13    周周


對(duì)于B端,我想剛開始很多同學(xué)就直接拿Ant Design套套界面,因?yàn)楣疽蟛⒉桓?,隨后字節(jié)Arco Design也推出了對(duì)應(yīng)的模版和規(guī)范,能讓我們快速作出一個(gè)不出錯(cuò)的方案。

但是隨著公司對(duì)B端越來越重視,這些模版顯然就太爛大街了。公司、市場(chǎng)的要求顯然不止于此,我們的設(shè)計(jì)追求也不止于此。

那么我們?nèi)绾尾拍軘[脫套模版,提高界面的精致度,提升界面的交互體驗(yàn)?zāi)兀?

其實(shí)很簡(jiǎn)單,王陽明先生告訴我們知行合一,知是行之始行是知之成。我們?nèi)绾尾拍芴嵘鼴端界面端精致度,第一需要知道什么是好的設(shè)計(jì);第二需要不斷的去實(shí)踐去練習(xí),缺一不可。

本文先和大家談?wù)勚膶用?,提高我們的眼界,下面就和大家分享一些不錯(cuò)的B端產(chǎn)品,大家有時(shí)間可以去慢慢體驗(yàn)。

PS:作為B端設(shè)計(jì)師,一定要去多拆解競(jìng)品,多研究好的產(chǎn)品,別面試的時(shí)候,面試官問你研究的B端產(chǎn)品是什么,你只知道阿里云、騰訊云、百度云哦!


1、Hubspot


做B端的同學(xué),尤其是做CRM的同學(xué)應(yīng)該都知道Salesforce,他是全球最大的 CRM(客戶關(guān)系管理) 工具公司。

Hubspot同樣是提供客戶管理相關(guān)的應(yīng)用,雖然成立相對(duì)Salesforce晚,但是在市場(chǎng)上也占有一席之地。

從設(shè)計(jì)的角度來看,他的界面風(fēng)格更加簡(jiǎn)潔舒適,從體驗(yàn)上來看和國(guó)內(nèi)的CRM系統(tǒng)完全不同,其體驗(yàn)更加自然和舒適。


這種風(fēng)格大家看了有沒有覺得很熟悉呢?

大家在去看看 GoDoddy , Airbnb ,Zillow,是不是發(fā)現(xiàn)風(fēng)格有一點(diǎn)類似,大家可以對(duì)比國(guó)內(nèi)產(chǎn)品去拆解下他們的交互細(xì)節(jié)有什么不同,完成同樣的任務(wù)他們采用的方案有何不同,相信你會(huì)有很多的收獲。


國(guó)外的界面看著總讓人覺得很舒適,僅僅是因?yàn)榭酥频脑O(shè)計(jì)、中性灰使用得好嗎?當(dāng)然不是,是因?yàn)橛⑽谋旧砭褪菆D形化的文字。

如果翻譯成中文,你會(huì)發(fā)現(xiàn)好像不是特別理想。


這個(gè)樣子拿給領(lǐng)導(dǎo)過稿,怕是分分鐘被拍死,因此我們還是需要多看看國(guó)內(nèi)優(yōu)秀的產(chǎn)品。


2、神策


神策的設(shè)計(jì),我想B端的朋友不陌生吧,國(guó)內(nèi)產(chǎn)品中他的設(shè)計(jì)一直是我們的參考對(duì)象。

不同于其他產(chǎn)品,他的體驗(yàn)門檻比較低,注冊(cè)后就可以去體驗(yàn)他的demo,也沒有試用期限,參考對(duì)象從可視化報(bào)表,到界面交互均能找到參考。


不過當(dāng)你參考一次后發(fā)現(xiàn),做出來的界面怎么還是少了一些靈魂,雖然界面風(fēng)格上了一個(gè)臺(tái)階,但為什么用戶還是覺得產(chǎn)品難用。




3、項(xiàng)目管理類


這里不得不和大家推薦項(xiàng)目管理類產(chǎn)品了,這類產(chǎn)品是專門給互聯(lián)網(wǎng)公司的開發(fā)團(tuán)隊(duì)使用,他們都是專業(yè)用戶,同時(shí)這些都是提高他們工作效率的工具,因此這些產(chǎn)品投入的成本更高,優(yōu)化得更好,拆解他們的產(chǎn)品,就是直接觀看高手的成長(zhǎng)之路。


Jira

Jira是Atlassian公司出品的一款事務(wù)管理軟件,JIRA的界面效果交互都非常不錯(cuò)。大型互聯(lián)網(wǎng)公司如LinkedIn、Facebook、eBay等內(nèi)部都在使用Jira。



同時(shí)他也是國(guó)內(nèi)項(xiàng)目管理類產(chǎn)品的學(xué)習(xí)研究對(duì)象,因此大家可以通過文章、B站、界面截圖,自己申請(qǐng)?bào)w驗(yàn)等方式全面的進(jìn)行體驗(yàn)。

同時(shí)也可借助群的力量,調(diào)研下有使用Jira的小伙伴,看看他們?cè)谑褂弥杏惺裁磫栴},下面是我收集Jira網(wǎng)頁版和本地配置版的問題截圖,這些都來自不同角色的真實(shí)體驗(yàn),會(huì)更有分析的價(jià)值。(這部分截圖涉及到公司的數(shù)據(jù),同時(shí)數(shù)量多不太方便打碼,就不分享給大家了。)



當(dāng)然國(guó)內(nèi)的項(xiàng)目管理類產(chǎn)品也得去看,我們要對(duì)比哪里做得好,哪里還需要改進(jìn)。國(guó)內(nèi)的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,這些產(chǎn)品不管從視覺還是體驗(yàn)都非常不錯(cuò),大家一定要去體驗(yàn)。




5、文檔管理類產(chǎn)品

通過不斷對(duì)競(jìng)品進(jìn)行拆解,你已經(jīng)不是當(dāng)初那個(gè)小白了,你的行業(yè)認(rèn)知,方案設(shè)計(jì)能力應(yīng)該趕超了一大波人。

成長(zhǎng)的同時(shí),又發(fā)現(xiàn)你設(shè)計(jì)的界面,不太精致,少了些溫度,這時(shí)候推薦你看文檔管理類產(chǎn)品。


WPS

第一個(gè)和大家推薦的是WPS,界面簡(jiǎn)潔,配色舒適。




飛書


在管理類的軟件中,不得不提飛書的管理界面,從設(shè)計(jì)到使用體驗(yàn),他給我的感覺終于不是那么千遍一律,用組件庫搭建起來的感覺。

他開始有了溫度,開始注重品牌感的打造,用戶的引導(dǎo),符合品牌調(diào)性的插畫。


對(duì)一些體驗(yàn)的細(xì)節(jié)進(jìn)行優(yōu)化,比如傳統(tǒng)的編輯都是放在頁面頂部,它采用了離光標(biāo)更近的位置。


根據(jù)菲茲定律,光標(biāo)當(dāng)前的位置和目標(biāo)位置的距離D越短,所用的時(shí)間越短,具體好不好用,歡迎大家在評(píng)論區(qū)留言哦。


6、概念稿


到這時(shí)候如果你覺得線上的產(chǎn)品太禁錮思維,那么推薦你看看dribbble、behance,搜索data、web、dashboard等關(guān)鍵詞,去看看有沒有新的靈感。


我的花瓣收集了一部分,如果不嫌棄,可以去看看,順藤摸瓜應(yīng)該可以找到很多不錯(cuò)的設(shè)計(jì)。

風(fēng)箏KK的花瓣:https://huaban.com/boards/76913106


7、畫重點(diǎn)


如何提升B端界面的精致度?

第一,要知道什么是好的設(shè)計(jì),多拆解國(guó)內(nèi)外優(yōu)化的B端產(chǎn)品。

第二,多在工作中時(shí)間,有時(shí)間多做ABC方案,鍛煉自己的方案設(shè)計(jì)能力,多踩一些坑,時(shí)刻保持學(xué)習(xí)能力,慢慢就成長(zhǎng)了。


文章來源:站酷   作者:風(fēng)箏KK

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔