概念設(shè)計 | Windows 10 知乎客戶端設(shè)計

0 評論 7126 瀏覽 26 收藏 10 分鐘

知乎自創(chuàng)始以來,已逐步成長為中國互聯(lián)網(wǎng)一只不可忽視的力量。與老師傅Quora和同門師兄果殼不同,知乎走出了一條媒體化、社交化的道路,并借助知識這一人類精神食糧,成功的從屌絲氣息濃重的中國互聯(lián)網(wǎng)中脫引而出,出落的俊秀挺拔。

知乎的官方客戶端只有iOS和Android兩個平臺,且兩個平臺均只有小尺寸的移動版本(知乎iPad版現(xiàn)已推出,但基本是iPhone版的拉伸版),而Windows平臺則只有SunfungApp的“愛知乎”和Rick Zhao的“之乎”兩個第三方應(yīng)用暫時解渴,不過前者已長時間沒有再更新,后者則因不厭其煩的“買設(shè)備”而備受指責(zé),甚至連知乎都出現(xiàn)了相應(yīng)的提問。

筆者并非程序員,無法獨立開發(fā)出并發(fā)布應(yīng)用,因而只得略盡綿力,草草構(gòu)思一款UWP知乎客戶端,希望借此能概覽Windows 10的全新Metro設(shè)計語言并為其他開發(fā)者提供一些設(shè)計上的思路。

d0566437dabe8547f49cce491b355409_b

功能架構(gòu)

89d8329e3e49a9cc31a9b1dd365079b2_b

在iOS客戶端中,知乎將其底部的Tab分為首頁、發(fā)現(xiàn)、消息和設(shè)置四項,前兩者為主要閱讀入口,且首頁整合了搜索和提問入口,發(fā)現(xiàn)入口內(nèi)還有熱門、推薦和收藏三個子Tab,消息則為提醒類入口,設(shè)置內(nèi)分為個人中心和應(yīng)用設(shè)置兩大類。

總結(jié)的說,知乎最核心的入口依然是首頁的信息流,同時提供一個與用戶無關(guān)的系統(tǒng)推薦閱讀,而消息則是一個需要第一時間顯示并快速進入的入口,同時也是后續(xù)社交化發(fā)展的重要媒介,設(shè)置和個人中心使用頻率較低,因而可以適當(dāng)弱化。

相較于iOS客戶端,Android客戶端雖然在整體設(shè)計和細節(jié)交互優(yōu)化上均不如意,但卻更符合知乎的業(yè)務(wù)邏輯:被強調(diào)的消息流置于首頁,消息至于導(dǎo)航欄,明顯且快捷(無視屏幕尺寸的條件下),個人中心和設(shè)置均隱藏于漢堡菜單中,不足之處在于發(fā)現(xiàn)入口也置于漢堡菜單中,考慮到Android平臺對于漢堡菜單的利用方式,這將極大的弱化該入口的重要性。

對于Windows 10平臺,漢堡菜單和操作欄的引入,使其交互語言非常接近Android平臺。

7d21d2cbf3371eefe5852ea2e8f81865_b

通用版知乎客戶端首頁頂端為導(dǎo)航欄+操作欄,其余區(qū)域均留給內(nèi)容展示。操作欄有消息入口,搜索(提問)入口和菜單(夜間模式和無圖模式)。

在字體選擇上也遵循標(biāo)準(zhǔn),暫時選擇微軟雅黑作為主體字體,字號為13pt(考慮到桌面版拉伸的問題,14pt更為合適,該問題將在后續(xù)推進中改進)和16pt。

2cffbbde54a86847ef2fe99c4d76dcfb_b

桌面端在遵循移動端的設(shè)計語言的同時,在消息流卡片中引入了圖片,保證閱讀時的豐富性和趣味性。

通用和漢堡

Windows 10的通用平臺引入了漢堡菜單和操作欄(command bar),但使用方式與iOS和Android卻不盡相同。

UWP對于漢堡的定義并不廣,基本局限于根目錄級Tab的切換,同時在底部整合個人中心和設(shè)置,桌面端利用鼠標(biāo)和漢堡的懸??梢员WC切換的便利性,而移動端則需要喚出漢堡菜單才能實現(xiàn)切換,這會極大的減弱用戶的切換熱情,雖然歷經(jīng)多年,漢堡菜單已被大眾消費者所熟悉和適應(yīng),但依然并非入口切換的最佳選擇。

c63e774ec451d3462d3eb84d24d81444_b

UWP選擇漢堡菜單更多是為了遷就桌面端應(yīng)用的體驗。對于桌面端應(yīng)用來說,漢堡菜單已經(jīng)證明了自己的優(yōu)勢所在,而移動端則只能犧牲切換上的便利性換取全平臺的一致性。

a10ddef7004e50ea1218c72aceeda497_b

消息

f6c321f64e732c316bd3f007f2484029_b

將消息置于首頁操作欄,其實一開始我是拒絕的。畢竟那是command bar而不是入口,消息更應(yīng)該置于漢堡菜單中與iOS端一致,但考慮到提示的明顯性和便捷性,最終還是選擇妥協(xié)。

消息界面最大的變化在于引入了“標(biāo)記為已讀”選項,尤其在“贊與感謝”標(biāo)簽內(nèi),標(biāo)記為已讀是很有必要的一個設(shè)計,畢竟,贊和感謝這種消息,看一看既可,點進去作甚?

問題和回答

5e42c4a577e6d15fa7d7f9020f46ba78_b

問題和回答界面變動不大,不過將邀請和回答從閱讀區(qū)域轉(zhuǎn)移到了操作欄中,同時在回答詳情界面,原問題也單設(shè)卡片列出,這在用戶從消息流入口進入回答界面時,將發(fā)揮著導(dǎo)入和了解原題的作用。

ed23130812c81a2f60865d18160752ec_b

而桌面端的問題主頁則略有不同,在內(nèi)容區(qū)的右側(cè)增加了相關(guān)問題選項,回答詳情頁取消,點擊回答即刻查看回答詳情,長按或右擊便可進行點贊評論等操作。

搜索和提問

2abc7c97af6fcb369029f1a537bc7598_b

搜索和提問界面基本遵循iOS和Android的設(shè)計邏輯,最大的不同在于,提問選項隱藏于而搜索頁面中,而非像iOS客戶端一樣直接展示于首頁,換句話說,這就是為了讓用戶先搜索,保證提問尚未提出再正式提問。

而另一個不同在于搜索子標(biāo)簽?,F(xiàn)有搜索界面中,僅有內(nèi)容和用戶兩個子標(biāo)簽,話題是被列入內(nèi)容一欄,這本無可厚非,但考慮到話題在搜索中的實用性和對其他內(nèi)容展示的干擾,單獨提出作為子標(biāo)簽之一或許是最好的選擇,希望之后知乎還可以進一步加入專欄文章的子標(biāo)簽選項,從而拓寬子標(biāo)簽的廣度,減少深度,方便用戶在最短的時間里精準(zhǔn)的找到自己的目標(biāo)。

設(shè)置和個人中心

2035a0cb3ca08af65a0d4b539ebaf661_b

2857ae701e3b3ef4b5296c10e246bc9a_b

設(shè)置界面基本遵循Windows 10的系統(tǒng)設(shè)置界面。

最大的區(qū)別在于將消息通知的設(shè)置方式進行了重新整理,從單個項目一一設(shè)置轉(zhuǎn)為通知門類一一選擇,減少用戶往返于上下兩冊的切換。

而個人中心則是改動最大的地方,將原本雜亂的個人中心內(nèi)容整合為:個人信息、個人成就和個人動態(tài)三個門類,他人中心和個人中心僅有關(guān)注按鍵和操作欄的區(qū)別。

039ec4537e545edcf12c0f5ce6008868_b

至此,通用版知乎客戶端已大致預(yù)覽完畢,整款軟件尚處于概念階段,還不成熟,設(shè)計中并沒有過多涉及到細節(jié)交互,且很多地方略顯稚嫩,還希望各位海涵,多多指出并給予寶貴意見。

附上原文地址:

通用版知乎客戶端概念設(shè)計 – Metro.X – 知乎專欄

http://zhuanlan.zhihu.com/metrox/20205769

 

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!