極簡(jiǎn)非簡(jiǎn)陋:英才APP的設(shè)計(jì)減法

6 評(píng)論 6454 瀏覽 36 收藏 8 分鐘

極簡(jiǎn)設(shè)計(jì)不等于簡(jiǎn)陋,那么什么才是設(shè)計(jì)中的極簡(jiǎn)呢?

在一個(gè)追求內(nèi)容至上與體驗(yàn)至上的時(shí)代,設(shè)計(jì)的表現(xiàn)更加簡(jiǎn)潔直白,這正如著名建筑設(shè)計(jì)師密斯所說(shuō)過(guò)的:less is more,在業(yè)界內(nèi)還是跨領(lǐng)域都在流行一個(gè)名詞:極簡(jiǎn)設(shè)計(jì)。

簡(jiǎn)單的形式往往能夠帶給人們更多的空間感與愉悅感,也是內(nèi)容大過(guò)于形式的一種設(shè)計(jì)方式。但在一些實(shí)際的設(shè)計(jì)當(dāng)中,極簡(jiǎn)卻變成了簡(jiǎn)陋。那什么才是設(shè)計(jì)中的極簡(jiǎn)呢?

極簡(jiǎn)的設(shè)計(jì)原則?

針對(duì)極簡(jiǎn)進(jìn)行一番分析,大致可以關(guān)注以下幾點(diǎn)原則:

  • 保留必要元素,簡(jiǎn)化冗余元素,有良好的視覺(jué)焦點(diǎn);
  • 簡(jiǎn)化用戶(hù)操作流程,從使用上更加的高效與明確的操作指向;
  • 留出的是空間感、以及給人舒適的界面呼吸感、產(chǎn)品視覺(jué)基因。

這與我們本次中華英才APP商家端(以下簡(jiǎn)稱(chēng)B端)改版所要達(dá)成的設(shè)計(jì)目標(biāo)是一致的,設(shè)計(jì)之前我們先去分析本次改版的減法要如何去做。

現(xiàn)有問(wèn)題分析

在改版的初期,我們針對(duì)B端用戶(hù)進(jìn)行了調(diào)研、訪(fǎng)談,同時(shí)對(duì)一些關(guān)鍵流程的數(shù)據(jù)進(jìn)行提取分析,并結(jié)合季度用戶(hù)體驗(yàn)滿(mǎn)意度報(bào)告得到了一些關(guān)鍵信息,這些信息是直接影響到用戶(hù)實(shí)際操作中的感受、對(duì)產(chǎn)品的認(rèn)知、好感度。主要問(wèn)題點(diǎn)如下:

  1. 注冊(cè)流程較長(zhǎng)
  2. 用戶(hù)更關(guān)注簡(jiǎn)歷的查看與后續(xù)處理效率
  3. 界面設(shè)計(jì)不夠美觀(guān),比較呆板
  4. 缺乏自己的產(chǎn)品特色

影響到的因素

我們與產(chǎn)品同學(xué)對(duì)反饋的問(wèn)題進(jìn)行了一些深度的挖掘細(xì)化,實(shí)際拆解到產(chǎn)品、設(shè)計(jì)中,可明確改進(jìn)的問(wèn)題優(yōu)化點(diǎn)如下:

  1. 整體產(chǎn)品中品牌沒(méi)有核心元素
  2. 閱讀時(shí)信息互相干擾
  3. 界面中關(guān)鍵節(jié)點(diǎn)引導(dǎo)性不強(qiáng)
  4. 視覺(jué)語(yǔ)言不統(tǒng)一
  5. 顏色使用不規(guī)范

提取明確重點(diǎn)信息及設(shè)計(jì)目標(biāo)

  1. 簡(jiǎn)化明確信息層級(jí)關(guān)系
  2. 優(yōu)化注冊(cè)及發(fā)布流程
  3. 建立顏色使用規(guī)范
  4. 融入設(shè)計(jì)語(yǔ)言

為設(shè)計(jì)目標(biāo)打造極簡(jiǎn)的設(shè)計(jì)

1.設(shè)計(jì)語(yǔ)言:項(xiàng)目初始,分析了相關(guān)的問(wèn)題,顏色使用不規(guī)范,色彩庫(kù)單一。

沒(méi)有自己的設(shè)計(jì)語(yǔ)言,這個(gè)也讓原有英才自己的調(diào)性表現(xiàn)的不是很明確。在本次改版當(dāng)中,在原有英才色的基礎(chǔ)之上進(jìn)行了顏色的拓展,豐富現(xiàn)有顏色庫(kù)。這樣做不但能夠在后續(xù)的設(shè)計(jì)當(dāng)中顏色的使用更加靈活,同時(shí)也能更具有自己的產(chǎn)品視覺(jué)基因。并將新的顏色與設(shè)計(jì)語(yǔ)言融入在主界面與流程當(dāng)中。下面看看整體TAB主界面的效果。

2.空間感-負(fù)空間?:亦稱(chēng)留白,是極簡(jiǎn)主義設(shè)計(jì)最重要、有亮點(diǎn)的一個(gè)特征,我們希望通過(guò)這個(gè)方式來(lái)吸引用戶(hù)在界面關(guān)鍵元素的關(guān)注度,從而設(shè)定不同的留白方式以及字號(hào)字重的使用對(duì)區(qū)域內(nèi)容進(jìn)行相應(yīng)的區(qū)割,減少使用多余的設(shè)計(jì)元素。在發(fā)布流程中得到了相應(yīng)的應(yīng)用。舉例:

3.視覺(jué)對(duì)比:因?yàn)橐曈X(jué)元素的減少,單純的文字內(nèi)容,會(huì)使整體界面顯得比較單薄無(wú)力,黑白灰的整體界面中增加強(qiáng)對(duì)比的按鈕與陰影效果對(duì)界面進(jìn)行層次的區(qū)分以及功能引導(dǎo)。用戶(hù)在頂部?jī)?nèi)容聚焦填寫(xiě)過(guò)以后,很快能夠聚焦在功能引導(dǎo)按鈕上,引導(dǎo)用戶(hù)進(jìn)行下一步的操作。舉例:

?4.呼吸感:現(xiàn)在的設(shè)計(jì)中大家能看到更多動(dòng)效使用的場(chǎng)景,加入動(dòng)效,能夠讓你的界面變更加的靈動(dòng),不再呆板,起到一個(gè)添花、補(bǔ)足的作用,但在使用中,盡可能規(guī)避大量無(wú)用動(dòng)效的使用,只做必要的保留即可。在登錄角色選擇中,我們進(jìn)行思考,求職者,公司都是一個(gè)個(gè)體,我們希望表現(xiàn)出概念性的個(gè)體與之間的關(guān)系,在歡迎內(nèi)容區(qū)制作了圓形元素,與呼吸動(dòng)效,使原本單調(diào)的選擇頁(yè)變的更加有場(chǎng)景帶入感。舉例:

最后附上整體改版后的部分效果圖:

總結(jié)?

本次改版中去掉了很多冗余元素,在整體設(shè)計(jì)中兼顧美觀(guān)與簡(jiǎn)潔性,減少用戶(hù)閱讀使用成本。關(guān)鍵顏色的使用在傳達(dá)必要信息基礎(chǔ)之上也帶入品牌設(shè)計(jì)基因。

通過(guò)本文希望能分享設(shè)計(jì)當(dāng)中的一些思考與經(jīng)驗(yàn),在以后的設(shè)計(jì)當(dāng)中對(duì)這種設(shè)計(jì)風(fēng)格把握的更加清晰、熟練。最后想說(shuō)的一點(diǎn)是,極簡(jiǎn)非簡(jiǎn)陋,做簡(jiǎn)單容易,做好極簡(jiǎn)并不易,設(shè)計(jì)中也需靈活應(yīng)用。

 

作者:李洋,視覺(jué)設(shè)計(jì)師

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶(hù)體驗(yàn)設(shè)計(jì)中心(微信公眾號(hào)@58UXD),作者@李洋

題圖來(lái)自u(píng)nsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 為你們打電話(huà)?。。?^3^)

    回復(fù)
    1. 謝謝支持!

      來(lái)自北京 回復(fù)
  2. 點(diǎn)評(píng)的很到位,多謝支持

    來(lái)自北京 回復(fù)
  3. 現(xiàn)在很多軟件的一張界面都是恨不得把所有功能都擺上,給人一種視覺(jué)上的抵制。我也很崇尚這種極簡(jiǎn)之美

    來(lái)自四川 回復(fù)
    1. 確實(shí)是這樣子,嘴上說(shuō)重視用戶(hù)體驗(yàn),但實(shí)際行動(dòng)卻打了臉

      來(lái)自北京 回復(fù)