如何評價鋒客網文章《Android Design in Action — 以知乎為例》?
鋒客網的 NovaDNG 對知乎 Android 客戶端界面進行了一系列修改,大家對比修改前後效果圖,不知道有什麼好的建議和看法?
文章地址:? 鋒客網 - Android Design in Action
作為作者來湊個熱鬧~
這個 redesign 是個人作品,難免有疏漏,大家在答案中提出的批評和建議我會適當參考的~
做這個 redesign 的時候有些細節我是直接糊弄過去的 (比如標籤的設計), 另外能從我的素材庫里扒拉的素材我就懶得自己重畫~
字體的選擇這方面更多的是體現我的個人趣味,在可讀性方面確實是有所不足。
爪雞答,先說這些~
不知道大家有沒有看過 YouTube (https://www.youtube.com/watch?v=FocGotjZ8r4list=PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF)上或者 Google+ 上的 Android Design in Action 這個活動? Google 方面的人親自出來講解應該如何改進一個應用. 鋒客的 ADiA 欄目就是官方 ADiA 的追隨者. 大家如果感興趣的話, 可以直接看原版的 ADiA 而不需要看鋒客的渣翻譯... _(:з」∠)_
成品方面我是只用了一天不到的時間畫出這些圖的, 走神的時候做的東西就會匪夷所思專心的時候做的東西看起來就還行這也是沒辦法的 ╮(╯▽╰)╭
最後, 文章已經寫完了, 大家的建議我基本都採納了, 只是改在 PSD 源文件里懶得去一個個畫設備圖, 更新對比圖和文章了... 原諒我吧... _(:з」∠)_
剛閱讀完這個文章,正在找地方吐槽。
妹啊! 怎麼有兩個相同的問題?
知乎 Android 應用設計師如何看待知友 NovaDNG 的 redesign?
- 更 Android 了。
- #eee 的修改挺不錯
- 登陸界面更優秀了。
- 消息,Tabs 替換為 Fixed Tabs 是最正確的決定了。
這篇文章讓我不爽的有:
- 色彩比原來更為扁平了
- 我很不喜歡設置的改變
- Spinner 的樣式更新從深灰色更新到淺灰色讓我很不爽。
- 贊同票的大小樣式很不正方形,也不長方形,更不是16:9或者其他什麼常見比例,而是一個類似正方形的扁扁的長方形。讓我也很不爽
- Thin 系列字體很多時候不具有邊緣的(不會放在某一個邊框內),並且 Thin 和 正文 的字體不同統一,很不舒服。
- 增大後的頭像,和旁邊的字距邊緣不統一。(似乎是中英文混合排版導致的,好好想想吧)
- 為什麼登錄中「發現更大的世界」具有一個巨大無比的箭頭!這是可以點擊麼!!!
- 其實,新版本規範(2013 Google IO)裡面的 Navigation Drawer 所要求的使用「icon」+ Title 的樣式,在「知乎」的風格是否都因為都是文字樣式而導致視覺混亂?(知乎本來的的 icon 就是一種 文字,「知」+Title 看起來很難受)
- 標籤(Tag)的「...」替換為「更多...」的色彩搭配讓我感覺很不舒服。更多字樣也是重複語義。
- Fixed Tabs 的使用的灰度顯示,和以前舊版本的 Tabs 的深灰色顯示缺少對比了,App 整個深度減弱了。
- 減弱了和網頁版的統一情況
這文章有待爭議的地方:
- Scrollable Tabs 替代為 Navigation Drawer 真的有必要嗎?
- 在登錄中的 Action Bar 是否有必要替換為半透明的,因為這樣帶來不統一的感覺。
- 重建後,把 iOS 的小三角箭頭去了,是否會導致入口不明晰?
這次的 Redesign 的總結:
NovaDNG 對色彩的理解不及原來的知乎設計師強大,使原來略有深度的 知乎 Android App 更為平面了。雖然整體更為符合 Android 規範。
若對此 Redesign 簡單改進:- 修正各種 icon 和 文字 的灰度情況
- 還原原來 標籤 Tag 的色彩樣式
- 恢復原來贊成票的視覺樣式
- (個人)恢復原來設置的樣式
其實 知乎 Redesign 真正需要:
1 重建「個人主頁」的視覺樣式,考慮分拆「全部動態」等數字點擊操作以獨立到單獨的 List 界面
為什麼如此?
一個頁面做一件事情很重要,現在「個人主頁」界面承擔著個人資料顯示和全部動態等的入口功能。
2 投票
投票在知乎網頁版本和 App 中都是弱化功能。
需要站在產品的角度來思考這個問題。
把投票放在瀏覽答案的最下方,並且使用「action overflow」作為次要入口。與此同時應該把「贊成票」放在 Action Bar 上。
這有利於鼓勵用戶進行更多的投票。
3 註冊和登陸
我認為需要重建為更自由的頁面。
這個可能需要真正做一個 效果圖 才知道如何設計了。
4 重建和網頁版的統一
知乎 App 更應該和網頁版的設計樣式進行更多的統一。
例如有:1 贊成票樣式
我認為這些才是當務之急應該 Redesign 的事情。
﹣﹣﹣
在編寫這個答案的時候,我才開始 update 了一下 Google 2013 IO 所發佈的 4.3 規範文件的資料。
略有不足,請指正。
嗯,知乎的客戶度從第一版濃濃的IOS風情到現在像模像樣挺值的鼓勵的,儘管最新版加入的黑又硬風格讓我十分不爽啊XD
NovaDNG改的不錯,我還是有一些個人建議
1.反對把贊同票和頭像調大。實際上在pc版網頁里這些東西也都是刻意做的不引人注目,原因無他,知乎確實有交友屬性,但是我交朋友看的是答案質量,不是id,頭像,或者其他的東西。憑文字相知,這是知乎正道。
2.加入Navigation Drawer的創意很棒,但是內容排布在邏輯上似乎有些問題。
如果把頭像和id放在上面,則暗示了這個區域是以「我」為核心內容的,「最新動態」和「我的收藏」大致符合這個導向,但是「熱門回答」和「熱門收藏」夾在中間顯得有些不倫不類
所以我個人還是更喜歡「最新動態」「熱門回答」「熱門收藏」這三項作為Scrollable Tabs的形式存在,可以左右滾動,但是文字標籤部分要明確,不能像知乎現在這樣在滾動中會被隱藏,讓使用者不知道左右兩方向還有些什麼。
3.這個清除通知圖標,是專門為卡片滑動式清除準備的,放在知乎這種高亮消除式清除的情境下,會違背使用者的預期。
所以我建議把所有消息統統改成卡片式,滑動隱藏消息,並且在下面增加一個「顯示全部」按鈕,可以調出已讀消息。
4.首先「確定」可以去掉,另外票數「4」旁邊那個大拇指也應該去掉,因為這個圖標太容易讓人以為這個按鈕是「贊同」,我就疑惑了很久。。。
5.「發現更大的世界→」是神來之筆,但就算是透明的action Bar看著還是不痛快,我建議這個界面上直接取消action Bar以獲得更大的視覺衝擊
下面的按鍵分成 賬號登陸|立即註冊 ,可以輸入郵箱密碼註冊賬號,也可以輸入郵箱密碼登入網站,所以輸入框的部分完全可以共用
差不多寫這麼多吧=__=,其實Android app在按鍵布局上應該儘可能的讓按鈕向屏幕下方集中,這樣才能照顧到大屏設備使用者的感受,不過再考慮這些就太麻煩了。。。。。。
剛在極客公園看完這篇文章,稍微說說自己的看法。
文章充分的體現了 @NovaDNG 對於Android Design的理解。
而接下來的回答比較注重於體驗而不是Android Design。
我就說些自己對於文章中不太贊同的方面吧。
1.用 Drawer 取代 Scrollable Tabs 來作為導航方式。
不知道大家有沒有注意到,在上個版本中,知乎在左上角是有「向上」按鈕的,「向上」的作用在於到此頁面的上一層級。
舉個栗子:如果你在答案界面,那麼點一下「向上」則會回到該回答所在的問題頁面。接下來你按返回就是直接到最新動態,同時進行自動刷新。而「返回」才是回到原來的頁面,乃至回到最新動態繼續剛才未完成的閱讀。
所以個人覺得加了這個操作後反而會影響體驗。目測應該只有少數人能夠合理的利用「向上」和「返回」這兩個功能吧?而且在功能上來說不得不說有點多餘。
然後是首頁上,個人覺得Scrollable Tabs更能讓用戶沉浸於閱讀,並且吸引用戶去閱讀「熱門問答」和「熱門收藏」。畢竟滑一下相比較點擊,選擇,等待刷新來(即使刷新的再快)來的簡單吧?並且盡量做到了讓用戶少思考。
2.頭像的放大
我覺得頭像的放大不合適。原因有三,第一,頭像放大會過分吸引用戶注意力,而忽視對於問題和問答本身的關注。第二,我並不覺得平衡了視覺中心,給我更大的感受是:把重心放到了頭像上去。第三,知乎是問答社區,有社交屬性是應該的,但是問答更應該是其重心。同時手機端給人更多的是閱讀,而不是社交。
其實對於贊同數也有點疑惑,但是以為你作者沒有給圖,自己也不想畫,所以先暫時不提。
3.登陸頁面第一步(當然,如果按NovaDNG的優化,其實這個登陸與註冊頁面就該拆分了)
我不贊同其將登錄按鈕做成了 Buttom Borderless 樣式。頁面為登陸或註冊,功能為二,如果將登陸放置於底部的話,登陸按鈕已經和登陸那個模塊分開了,不易區分。
NovaDNG的第二步還是比較支持的(按其優化的話),但是當你選擇註冊的時候該怎麼辦?我直接拿手機比對了下(尺寸剛好),按知乎目前註冊頁面的設計的,再加上NovaDNG的封面圖片,必然會造成註冊頁面的下拉,造成註冊不夠友好。同時知乎打開顯示的是熱門回答,而不是登陸界面,對於吸引用戶更加好。同時「發現更大的世界」作為熱門回答的入口,可點擊性的顯示不夠強烈。
4.答案瀏覽等
個人覺得顏色太暗了,並且沒有區分度。
贊同個人覺得是比較慎重的,所以直接以文字更顯的鄭重一些。其二,大拇指的內容給人的感覺更多的是「贊」而不是「贊同」,倒拇指亦然。與知乎的原意不符。
部分安卓自帶圖標不如原有圖標更具表現力,比如添加回答。
清除未讀暫時覺得不合適更換為Dismiss,清除未讀更加直觀,減少用戶的思考。
以上。
PS:@黃繼新 提個個人建議:覺得可以將私信放到我裡面,而提醒則依舊與網頁版一樣。
PPS:以前竟然沒發現空格會沒有,早知道就不加了=。=這是那篇文章
這是豌豆莢的知乎安卓客戶端信息
文章發表於8月11日
安卓客戶端更新於8月8日
:)
最大的作用,就是給一些大佬網站開開眼,長長見識。
從用戶角度來說:這種嘗試會讓很多官方應用開發者,看到另一種可能和展示方式,有了更多的改進機會,最終受益的是用戶體驗。
我認為@NovaDNG的本意是做出一個更符合 android 設計思路的範例, 而不是一個成品.
所以在細節上自然會有各種疏漏. 這些疏漏來源於兩點: 1. 過於恪守規範; 2. 對知乎客戶端功能及定位的理解不足.
我覺得這個nova設計的這個界面, 放在 android 里絕對不是更丑了, 因為它和 android 4.0+ 相處更和諧, 用起來應該是可以用 舒服 來描述.
如果nova這個算是成品的話, 我是不會贊成的, 因為做一個真正 美 的界面, 是不可以只在規範上面下功夫的. 但是看看我們市場里的軟體吧, QQ, 微信, 微博, 哪一個在規範上下功夫了? 哪一個又是 美 的? 如果繞開規範, 任何一個平台上的任何一個軟體, 都不會是 美 的.
所以我認為我們需要有 NovaDNG 這樣的人來強調規範, 引導設計思路的方向, 對於他 "以知乎為例" 這件事, 我是很贊同的.改版很好,很好的回歸了Android design主線任務
知乎Android客戶端iOS痕迹太嚴重了先說這個 redesign 積極的一面。
設計這種工作,既需要方法論,又需要不斷積累經驗,我非常贊同設計新人用 redesign 的方式來積累經驗。特別是互聯網產品設計,redesign 過程本身,redesign 帶來的討論,討論之後總結和提升,都是非常好的經驗,對將來工作有不少幫助。(如果招聘,每個公司一定選 @NovaDNG ,而不是某個滿口理論的人。)
下面說這個 redesign 現實的一面。
和一般想像不同,差勁設計往往不是方法不當,而是策略有問題,即:用錯誤的思路 + 正確的方法,最終做了錯誤的事情。
一個合格的商業設計團隊,會按照產品本身的特點,先決定設計策略,再選擇合適的設計方法。舉個最簡單例子:你可以設計嚴格遵循 Holo 風格的新聞 APP,你肯定不會把消除類遊戲設計成 Holo 風格。
回到《Android Design in Action — 以知乎為例》,嚴格遵循 Android 設計準則,這個設計方法本身並沒有錯,但不能憑空地、孤立地說方法,並由這個方法推導出設計策略,這樣的設計策略不一定適合知乎。
最後說這個 redesign 殘酷的一面。
嚴格遵循 Android 設計準則,這種想法往往難以實施。
現實生活中,騰訊也好、知乎也好,都要面對一樣的問題:- 跨平台設計的費用高,每個 APP 因為多平台,而增加幾倍工作量(不僅僅視覺設計,包括交互設計、用戶引導等等)- 我有那麼多錢、那麼多時間嗎?
- 資源有限時,我應該優先考慮哪個平台 - 為什麼是Android 4.X,而不是 iOS 7?
- Android 5.0 也並不遙遠,怎麼跟上 5.0 時代的設計指導?
最好的例子是關於手機 QQ 的設計風格(http://www.zhihu.com/question/21324504/answer/17893070)騰訊尚且不願意在 Android 設計風格上浪費過多資源,何況身為創業公司的知乎?
現實就是這麼殘酷的,很多事情就是超出了你掌控的資源。比如我們自己的產品,產品規劃階段就明確界定了跨平台設計 APP 的策略:參照平台設計規範,避免出錯;但不遵循哪個平台的標準。
我相信很多設計原教旨主義的同學,未必接受這種屈從於現實的做法。最後引用一句話:(Android 設計指導的)遵循和突破並不是完全矛盾的,有時候,要做出突破創新,你必須首先了解現有的規則是什麼。- 這句話來自 Android 用戶體驗主管 Matias Duarte。交互改善,視覺改惡。
我覺得非常不錯哦!
我覺得novadng的設計僅僅是一個拋磚引玉的作用,畢竟這個產品是一個非此專業的人用不到一天做出來的,其實我贊同的就是態度問題,我現在很少用騰訊應用(除了qq)的原因就是這個企業的態度問題
在iOS和Android手機的硬體上幾乎相差不大的情況下(目前最大的區別是Android手機都有硬體Back Button,各別老的手機有Menu Button),追求Design for Android沒有特別大的意義。更重要的是Design for Mobile,好的設計可以在iOS與Android上同時取得好的效果。
另一方面講,Android的Design Guide本生就有很多的問題,很多的設計不合理(比如TabBar放在屏幕頂部)。很多公司Follow iOS的Navigation Model,只是因為它很合理,並不是應為它很Apple。
iOS上的軟體百花齊放,從來沒有人擔心風格不統一吧。推薦閱讀:
※有什麼比較好的設計資源下載站?最好是國外的
※Framer(framerjs.com)如何入門?
※易拉罐拉環為什麼設計成現在的樣子?
※交互設計師如何有效地學習動效設計?
※現在是否越來越多工業設計專業的人都開始做交互設計的工作?
TAG:知乎 | 用戶界面設計 | 用戶體驗設計 | Android | 知乎Android應用 |