至純至簡|手機百度8.0設計總結(jié)

4 評論 13439 瀏覽 84 收藏 11 分鐘

8.0是手機百度發(fā)展過程中一個重要里程碑,它不僅延續(xù)了產(chǎn)品建立以來的要點,打破歷史包袱,與時俱進地從體驗和產(chǎn)品角度進行了創(chuàng)新,通過全新的整體交互框架與視覺風格,將搜索、語音搜索、FEED流信息獲取、多垂類服務等進行了再設計。

項目背景

手機百度作為移動端的明星搜索工具,一直深受廣大用戶喜愛,經(jīng)過多年的發(fā)展它已經(jīng)成為用戶獲取信息和服務的重要途徑。但隨著功能越來越多,其產(chǎn)品結(jié)構(gòu)也越發(fā)復雜,原有的結(jié)構(gòu)形式已不能承載產(chǎn)品未來的發(fā)展,對產(chǎn)品形態(tài)進行重新設計勢在必行。

在設計研究階段,團隊內(nèi)部對收集到的問題進行分析和整理,歸納出以下幾個要點:

  1. 產(chǎn)品首頁功能多、結(jié)構(gòu)復雜,產(chǎn)品定位與重點不明晰。
  2. 首頁結(jié)合信息流的使用效果以及具體內(nèi)容的瀏覽體驗不佳。
  3. 框架種類繁多,同一內(nèi)容在APP內(nèi)不同地方打開的框架不一致。
  4. 接入和自建的各頻道體驗缺乏統(tǒng)一性,存在顯著的體驗差異。
  5. 視覺設計語言需要進一步統(tǒng)一與升級,使產(chǎn)品整體視覺調(diào)性感受更為整體,凝煉手百的品牌氣質(zhì)。

設計與思考

8.0具有承前啟后的里程碑意義,如何繼承已有的成果和用戶習慣,同時創(chuàng)新性地解決前面提及的問題,為后續(xù)發(fā)展打下基礎,是設計師在項目開展之初就需要解決的問題。

回歸用戶本質(zhì)需求:信息獲取,從減法開始設計

設計團隊經(jīng)過多次討論和分析,決定回歸用戶本質(zhì)需求——信息獲取,圍繞它從減法開始做設計。新設計中突出信息獲取的重要功能:搜索和智能、個性化信息推薦,而其他功能則適度弱化和折疊。目前文本搜索是使用頻度最高的信息獲取方式,而以語音搜索為代表的面向未來的人機交互方式已經(jīng)日趨成熟,百度的語音搜索在識別準確度與結(jié)果滿足均達到業(yè)界領先水平。智能的、個性化的信息推薦則代表著未來基于大數(shù)據(jù)和人工智能的用戶獲取信息的方式,百度在技術上的深厚積累,得以實現(xiàn)“千人千面”的信息與服務滿足。

圍繞如何讓用戶更便捷地使用各種搜索和智能信息推薦,我們嘗試了幾十版方案。并在方案雛形基本確定后,便開始自主開發(fā)高保真可交互Demo,團隊內(nèi)各個角色一起試用,發(fā)現(xiàn)問題與不足,不斷研討和完善對細節(jié)的打磨,快速地收斂了共識,并在這個過程中收獲了許多來自多種角色的優(yōu)質(zhì)建議。

002-1

功能分級和服務個性化,滿足不同用戶群體需要

手機百度的用戶群覆蓋面很廣,幾乎涵蓋了各個年齡段的全體網(wǎng)民用戶。結(jié)合使用數(shù)據(jù)來看,單個用戶高頻使用的功能除搜索外,還呈現(xiàn)個性化和多樣化的特點。如何滿足好共同的搜索需求,還能更好地提供個性化服務是設計中需考慮的一個要點。

經(jīng)過分析,我們將目標用戶劃分為三大類:

  1. 僅使用搜索的用戶,他們進入手百希望快速完成搜索,獲取所需要的信息。
  2. 輕度定制化的用戶,他們除了使用搜索外,還經(jīng)常使用百度的貼吧、新聞、小說等服務,他們希望功能的布局能更加符合自己的使用習慣,操作更加便捷。
  3. 深度使用各種百度功能用戶,他們不僅要求精還要求全,希望在手百上實現(xiàn)一站式體驗。

針對不同用戶,我們進行了功能分級和服務個性化設計,用戶可以按需定制所需要的模塊,同時還對各種功能重分類和聚合,使界面結(jié)構(gòu)與功能分區(qū)明確且純粹,便于用戶能快速找到所需。

化繁為簡,統(tǒng)一內(nèi)容框架和內(nèi)容形態(tài)

首頁是一款產(chǎn)品的核心,其框架結(jié)構(gòu)、布局的設計重要性不言而喻,在8.0中我們對首頁的設計進行了探索和重新定義。

1. 以“流式”和“精煉”為核心理念的布局形式

  • 流式:Feed、搜索、第三方頁面等主體界面均為“流式”為主的交互布局,使產(chǎn)品在整體體驗上保持一致。
  • 精煉:歸納整合了首頁的功能模塊,確保單一模塊功能單純,降低用戶的理解成本,提升易了用性。

2. 以“極簡、清晰、舒適”為核心理念的視覺風格

  • 構(gòu)圖:極簡構(gòu)圖,去除所有裝飾元素,通過嚴謹排版調(diào)整各部分的比例關系,使頁面干凈,清晰和美觀,以黃金分割進行版面結(jié)構(gòu)的縱向劃分,使頁面布局舒適、耐看、經(jīng)得起時間的考驗。
  • 品牌:通過對“留白、紅藍”“左右平衡構(gòu)圖”的進一步優(yōu)化,強化品牌感受;并使PC和移動多端首頁形成品牌氣質(zhì)的一致性。

精簡內(nèi)容框架:將原有的5種框架縮減為3種,對類似功能的框架進行了合并,這不僅提升了統(tǒng)一性,而且減少了技術架構(gòu)的復雜度。在合并框架的同時,我們還保留了框架元素的靈活性,為具體場景和服務下的拓展預留了空間。

在框架統(tǒng)一的諸多方案中,經(jīng)過調(diào)研和測試,我們最終選擇了底部返回的基礎框架形態(tài),并將主要功能整合其上,不僅使框架形式更加統(tǒng)一,而且在在大屏手機成為主流的背景下,用戶也能更方便地操作界面底部常用功能。

精簡內(nèi)容形態(tài):信息流Feed 是本次設計的一個重點,它不僅提供了一種快速獲取信息的方式,而且是后續(xù)智能化推薦的承載體。在設計中我們從單體模板的角度對可能接入的內(nèi)容形式進行了分類和抽離統(tǒng)一,有效地保證了內(nèi)容形式的精簡和高延展性。使豐富的各類資訊內(nèi)容的排版與布局舒適合理,提升閱讀的沉浸感與流暢性。

建立統(tǒng)一標準,打造平臺化體驗

手機百度作為一款平臺性產(chǎn)品,接入了很多由合作團隊開發(fā)的產(chǎn)品。為了保證用戶在使用手百時能有統(tǒng)一的使用體驗,在8.0項目設計的伊始,我們分析各內(nèi)外部服務的特點,總結(jié)歸納共性制定出一套統(tǒng)一的平臺化設計標準。

從接入內(nèi)容的架構(gòu)、產(chǎn)品界面布局、控件元素、品牌等多維度進行規(guī)范,有效地保證了最終的用戶體驗。

007

008

簡潔靈動的細節(jié)設計,構(gòu)建產(chǎn)品的品牌特征

傳統(tǒng)工具類產(chǎn)品給用戶的印象更多是冷冰冰和機械化。為了突破這種印象,在本次設計中,我們嘗試通過簡潔靈動的細節(jié)設計來構(gòu)建產(chǎn)品的品牌特征,以平面化的幾何形態(tài)為基礎,輔以典型的色彩和動畫效果來構(gòu)建自己的特征,加深在用戶心目中的印象。

例如語言搜索靈動的細節(jié)設計不僅展現(xiàn)了人工智能的強大和靈敏,而且形成了典型的品牌特征,這套設計語言也貫穿了手百的各個模塊設計中。

總結(jié)

8.0是手機百度發(fā)展過程中一個重要里程碑,它不僅延續(xù)了產(chǎn)品建立以來的要點,打破歷史包袱,與時俱進地從體驗和產(chǎn)品角度進行了創(chuàng)新,通過全新的整體交互框架與視覺風格,將搜索、語音搜索、FEED流信息獲取、多垂類服務等進行了再設計。在設計過程中,我們也深刻認識到把握用戶需求,結(jié)合技術和商業(yè)模式進行分析和研究是設計工作的要點。只有不斷地探索,才能從諸多可能性中找到最適合的方案,為用戶提供更好的服務。

 

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

作者:百度MEUX

來源公眾號:百度MEUX(ID:baidumeux),百度移動生態(tài)用戶體驗設計中心,負責百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設計。

本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。

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

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

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 陪圖不錯

    來自上海 回復
  2. 百度APP首頁新聞太多,打開加載速度慢,如果用戶是用流量的話只想使用搜索服務,浪費流量。建議新聞其他多余的元素放一個入口就OK了~

    來自廣東 回復
  3. 配圖不錯

    來自日本 回復
  4. 寫的不錯

    回復