如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
近期,我們對(duì)微云WEB端進(jìn)行了一次“簡(jiǎn)單”的改版。這篇文章簡(jiǎn)要記錄了改版過(guò)程中的一些思考。
為什么要改版
微云WEB端與移動(dòng)端體驗(yàn)不一致。移動(dòng)互聯(lián)網(wǎng)背景下,項(xiàng)目團(tuán)隊(duì)把多數(shù)資源都分配給了移動(dòng)端的研發(fā),桌面端的功能和體驗(yàn)得不到及時(shí)的跟進(jìn),導(dǎo)致用戶在兩個(gè)平臺(tái)上的體驗(yàn)存在很大的落差。
微云WEB端的設(shè)計(jì)較為陳舊。蘋(píng)果iOS的快速發(fā)展使得整個(gè)UI設(shè)計(jì)行業(yè)日新月異,設(shè)計(jì)理念不斷進(jìn)化向前,微云WEB端的設(shè)計(jì)已經(jīng)多年未更新,早已經(jīng)不起當(dāng)下設(shè)計(jì)原則的檢驗(yàn)。
改版前的思考
兩端的體驗(yàn)對(duì)齊需要解決很多矛盾。想要將WEB端的體驗(yàn)與移動(dòng)端統(tǒng)一,并沒(méi)有想象中的那么簡(jiǎn)單。聽(tīng)起來(lái)好像只要把交互框架和視覺(jué)風(fēng)格直接照搬過(guò)來(lái)就好了。但實(shí)際上要對(duì)齊的是兩種使用場(chǎng)景的體驗(yàn),這中間要調(diào)和的是小屏幕和大屏幕的矛盾,觸摸操作和鍵鼠操作的矛盾,兩種不同概念模式和心智模型的矛盾。
新的設(shè)計(jì)除了符合潮流,還要更具前瞻性 。想要做出可持續(xù)的設(shè)計(jì),首先要明確設(shè)計(jì)潮流的走向,從擬物到扁平,從形式到內(nèi)容,從工具化到情感化,設(shè)計(jì)潮流的走向一直沒(méi)有變,在以人為中心的前提下,越來(lái)越注重用戶更深層的需求。
項(xiàng)目團(tuán)隊(duì)在WEB端的資源投入注定了設(shè)計(jì)更新迭代的頻率會(huì)很低。想要改版后的設(shè)計(jì)能夠長(zhǎng)久地支撐產(chǎn)品的發(fā)展,需要設(shè)計(jì)師把眼光放遠(yuǎn),通過(guò)了解產(chǎn)品未來(lái)發(fā)展方向,做出更有前瞻性的設(shè)計(jì)。
求同存異的兩端統(tǒng)一
品牌統(tǒng)一性
在設(shè)計(jì)一款產(chǎn)品不同平臺(tái)客戶端的時(shí)候,首先要保證品牌的統(tǒng)一性。Logo、字體、品牌色、品牌調(diào)性甚至是文案的措辭規(guī)范都是需要嚴(yán)格保持一致的。保證品牌的統(tǒng)一性,有助于塑造品牌形象,增強(qiáng)用戶對(duì)產(chǎn)品的信任。
交互框架的對(duì)齊
我們先來(lái)對(duì)比一下移動(dòng)端和WEB端的主界面,單純從視覺(jué)上,已經(jīng)很難看出這是同一款產(chǎn)品。雖然在頁(yè)面結(jié)構(gòu)上兩端并不一致,但各自也都符合所在平臺(tái)用戶的操作習(xí)慣。
舊版WEB端雖然在視覺(jué)風(fēng)格上是扁平的,但是在信息層級(jí)上卻并不扁平,僅僅頂部的信息就有三層,過(guò)度的結(jié)構(gòu)化使整體頁(yè)面看起來(lái)過(guò)于復(fù)雜,用戶很難將注意力集中到內(nèi)容上。我們對(duì)WEB端頂部元素重新歸類(lèi)整合,主要功能入口的布局和移動(dòng)端進(jìn)行了統(tǒng)一,通過(guò)引入移動(dòng)端的編輯態(tài)邏輯,常態(tài)下隱藏了所有的操作按鈕,將頂部區(qū)域的三層信息減少為一層,使其看起來(lái)更加清爽。
正如上面所說(shuō),雖然我們追求多端統(tǒng)一的用戶體驗(yàn),但手機(jī)和電腦的操作場(chǎng)景差別很大,用戶在不同的平臺(tái)已經(jīng)形成了不同的操作習(xí)慣。移動(dòng)端的多級(jí)導(dǎo)航設(shè)計(jì)是針對(duì)小屏幕局限性做出的一種妥協(xié)。在空間足夠大的WEB端,所有的二級(jí)導(dǎo)航都可以平鋪出來(lái),這樣可以減少一個(gè)層級(jí),因此,我們保留了原有的左導(dǎo)航結(jié)構(gòu)。通過(guò)對(duì)導(dǎo)航項(xiàng)歸類(lèi)的方式與移動(dòng)端統(tǒng)一。
品牌調(diào)性和視覺(jué)風(fēng)格的對(duì)齊
在視覺(jué)風(fēng)格上,微云移動(dòng)端最具代表性的就是藍(lán)色的品牌色和線型的圖標(biāo),
在嘗試設(shè)計(jì)方案的過(guò)程中我們發(fā)現(xiàn),由于WEB端尺寸比較大,大面積使用藍(lán)色會(huì)加重用戶的視覺(jué)負(fù)擔(dān),分散用戶對(duì)內(nèi)容信息的注意力,因此,在色彩方案上最終選擇了純白淺灰作為主色,藍(lán)色作為局部點(diǎn)綴,以下是改版后的一些核心頁(yè)面。
秉承著簡(jiǎn)潔、自然、易識(shí)別的原則,我們對(duì)所有的小圖標(biāo)進(jìn)行了優(yōu)化。簡(jiǎn)化了舊版本中的復(fù)雜表達(dá),并對(duì)默認(rèn)態(tài)、hover態(tài)和選中態(tài)進(jìn)行了規(guī)范。
文檔類(lèi)型圖標(biāo)也和手機(jī)端進(jìn)行了對(duì)齊,將文件格式進(jìn)行分類(lèi)整合,同類(lèi)型的格式采用同一個(gè)圖標(biāo),將格式后綴在文件名中顯示出來(lái)。在不影響識(shí)別的前提下大大降低了設(shè)計(jì)成本。
內(nèi)容至上的前瞻性設(shè)計(jì)
全新的縮略圖模式
內(nèi)容至上是當(dāng)今設(shè)計(jì)的發(fā)展趨勢(shì)之一,結(jié)合微云未來(lái)的重點(diǎn)方向——辦公體驗(yàn),我們進(jìn)行了一些對(duì)內(nèi)容的深入思考。
在網(wǎng)盤(pán)的使用場(chǎng)景中,什么才是用戶關(guān)注的內(nèi)容?早期的文件管理產(chǎn)品把文件圖標(biāo)、文件名定義為內(nèi)容,文件被包裝成一個(gè)個(gè)方塊,或是一行行的列表,文件間的差異只靠文字來(lái)體現(xiàn)。面對(duì)這樣的界面,用戶對(duì)文件的識(shí)別是十分低效的。這也是為什么在如今的網(wǎng)盤(pán)場(chǎng)景中,圖片是最容易識(shí)別的,因?yàn)樗龅搅宋募旧韮?nèi)容的外顯。
在面對(duì)一個(gè)一個(gè)被包裝的文件時(shí),用戶容易被觸發(fā)的行為局限于整理、刪除等基礎(chǔ)操作,只有在能夠看到文件本身內(nèi)容的時(shí)候,才更容易觸發(fā)編輯、分享、共享協(xié)作等更加沉浸式和更具社交性的操作。這就好比你走進(jìn)一個(gè)倉(cāng)庫(kù)看到貨架上的一個(gè)個(gè)箱子,你會(huì)想要把他們分類(lèi)、擺放得更整齊。但是當(dāng)你走進(jìn)一家商店,看到貨架上琳瑯滿目的商品時(shí),你才會(huì)有挑選、對(duì)比和購(gòu)買(mǎi)的沖動(dòng)。
秉承著這個(gè)理念,我們反觀圖片之外的其他文件類(lèi)型,道理是相同的;因此,我們?cè)诟陌嬷幸肓巳碌目s略圖模式,在新的縮略圖模式下,單個(gè)文件的可視區(qū)域被放大,用來(lái)承載文件本身的內(nèi)容。雖然一屏可以展示的文件數(shù)減少了,但展示出的有效信息是大大增加的,除了讓每個(gè)文件在視覺(jué)上有了獨(dú)特性,提高了檢索效率,也更容易觸發(fā)用戶更多的后續(xù)行為。這對(duì)于產(chǎn)品本身的價(jià)值相信大家都懂。
技術(shù)過(guò)渡時(shí)期的體驗(yàn)補(bǔ)償
理想很豐滿,現(xiàn)實(shí)很骨感,讓更多的文件內(nèi)容外顯在技術(shù)上必然要走一段路。在技術(shù)問(wèn)題解決的過(guò)程中需要設(shè)計(jì)對(duì)體驗(yàn)進(jìn)行一些彌補(bǔ),在縮略圖的文檔圖標(biāo)的設(shè)計(jì)中,我們盡可能的把文件的內(nèi)容樣式圖形化;同時(shí),為了保證識(shí)別性,那些圖標(biāo)比內(nèi)容形式更具特征的文件,保留了圖標(biāo)設(shè)計(jì)的形式。
寫(xiě)在最后
微云一直致力于為用戶提供更更自然的使用體驗(yàn),無(wú)論在功能上還是在設(shè)計(jì)上,我們都秉承著以用戶為中心的原則,不斷打磨每個(gè)細(xì)節(jié)。WEB改版也是如此,這一期改版我們對(duì)WEB端的框架和方向進(jìn)行了調(diào)整,在接下來(lái)的二期、三期.....我們會(huì)不斷深入到各個(gè)模塊,進(jìn)一步提升WEB端的用戶體驗(yàn)。在這個(gè)對(duì)于個(gè)人網(wǎng)盤(pán)來(lái)說(shuō)最壞的時(shí)期,微云會(huì)長(zhǎng)久的發(fā)展下去,我們不會(huì)停止前進(jìn)的腳步,更多酷炫的新功能新體驗(yàn)已經(jīng)在路上。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專(zhuān)注而深入的界面設(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ù)