UI層級關係?

知乎是內容為主的社交為輔的產品對吧,那在評論區,為何評論者的名稱要比評論內容本身層級優先呢?我指的優先是打開頁面第一眼看到的是評論者頭像其次是名稱,再次是內容。難道知乎設計師不該讓我們最先注意到評論內容嗎

--------此處修改一下----------

(之前可能由於此處表述不當,給部分回答問題的朋友造成誤解,我的意思不是說要把名字頭像放在內容的下方,而是可以通過弱化字型大小,字的顏色來達到主次的平衡,畢竟評論者是叫張二狗還是叫李狗蛋,他是工程師還是醫生對我影響不大,我更關注他評論的內容,如果答得好,我才會去看看他到底是誰,再點擊他的頭像看看他平常的回答是不是符合我的口味,再考慮是不是關注他

剛剛看了知乎首頁, 問題回答頁和評論頁,(首頁找到感興趣的問題--問題頁面找到各種答案--你喜歡的答案下找到評論頁),只在評論頁存在用戶名比內容優先的情況 ,我好像明白了什麼不知是否正確,首頁和問題頁突出問題和答案,弱化答主以及提問者信息,也就是說先用問題和內容對目標用戶進行吸引,當你的回答,或者你很贊同或者很反對答案被評論,你可以在這個答案的評論中找到你認為「志同道合」的人,從而未完成從內容到社交的銜接,不知對不對)?

-----修改結束-----


另外,我之前問別人QQ頭像和微信頭像一個圓一個方的區別,別人告訴我是產品定位導致的,QQ更注重社交,圓形頭像自帶聚焦作用,而微信更注重內容,用戶打開軟體,騰訊更希望引導注重別人回復的消息本身。
那我不禁要問,知乎不也是更注重內容嗎?為何知乎頭像要設計成圓形呢?是為了美觀嗎?還是說因為頭像很小,所以不重要?

奧,對了,對於自己不太懂的知識(包括但不限於ui設計),我總是不自覺問為什麼,就比如
為什麼750*1334的頁面導航欄88px,標籤欄是98px,
當然,這個問題,我還沒搞明白,但是已經能放下了,可是在ui設計中我會有很多為什麼,

每畫一個圖標我就會問自己為什麼這麼畫,
為什麼要用這個比例,
為什麼要這個大小,
為什麼要這個距離,
為啥這個圖標距離屏幕邊緣比距離旁邊的內容近呢這不對啊

我以為當我都搞明白,我這樣去完成一個作品去面試,面試官會認為我有自己的規範,他問我依據我才可以說出來,不至於被面試官認為我在抄襲,

但是這也導致我做一個app兩個月才勉強搞完。

最主要的,是我擔心我去了公司,因為這些為什麼導致自己不能及時做完領導安排的工作咋辦呢?

另外諮詢下大多數公司新手到公司後,剛開始的一段時間(雖然我也不知道多久)除了熟悉公司環境學習公司文化,了解工作流程,主要是幹啥呢?謝謝


早些時候,看過一篇文,說現在的QWERTY鍵盤的效率並不是最好的,但是為什麼現在成為幾乎所以鍵盤的布局?

《通用設計法則》裡頭提到一個「表現—偏好」效應,即有時候,用戶喜歡的反而不是功能性和效率最好的一個。

這裡頭可能更多的是因為社會因素,QWERTY鍵盤普及範圍太廣了,大多數人已經接受習慣並熟練使用了這種布局的鍵盤使得遷移到另外一個更高效更準確的鍵盤的成本太高,況且提升的效率和準確性也並非很顯而易見。

回到你說的這個頭像在左問題。你去多玩一些app,你會發現這基本上成為了一種「標配」,我們稱之為「pattern」,因為用戶已經潛移默化的接受了這種布局。看網易雲音樂,網易新聞的評論,看微博的,看QQ空間,還有知乎的評論,等等,都是這種布局。

(似乎記得)之前知乎有一版把問題回答者的頭像放在右邊,但是還是改回來了。這肯定有原因的。

你創新帶來的用戶的效益提升,遠低於用戶要為接受此創新所要承擔的認知成本,記憶成本和操作成本,等等,這可能不是好創新。

我建議新手還是要先熟悉模式,流程和標準,等有所積累再去做有用創新,否則只是建在沙灘上的樓閣。

還有頭像圓形問題,因為圓的更容易聚集局部焦點,而方的更好展示整體環境。當然也有美觀的考慮,如果頭像是方的,還在頂部垂直居中,可能會感覺犀利冷峻的直線(或者帶有圓角)邊框把畫面分割,而圓形卻傳遞了融合(哈哈,這段是我瞎想的)。

還有你說的iOS導航欄44pt(iPhone6為88px),相應的安卓導航欄48dp(1280*720尺寸為96px),這只是iOS和安卓他們的設計規範,並不是唯一強制的。因為調查研究說,人手指的最小點擊區域差不多是44*44px(iPhone1的導航欄高度是44px),在Xcode中,UINavigationBar的高度就是44pt。

當然也有很多APP的導航欄高度不是44pt,如圖。因為,這的44pt只是iOS開發建議的高度,是基於規範化和設計開發效率性的考慮。我們設計可能只是操作一下滑鼠就可以改高度,而在開發那邊,可能要重寫UINavigationBar。

還有這樣樣式的導航欄(lifesum)

你說的這些問題不一一回答了。我建議你去讀一下iOS和Material Design的官方設計指南,還有多下載體驗APP,去知乎關注一些相關話題的優秀答主,去讀一些比如《設計心理學》《認知與設計:理解UI設計準則》《通用設計法則》等書,相信你可以從中學到很多。

我去年五月份還沒畢業,論文只是有一個大概的時候就來入職。也是很東西自己的經驗能力不足,在團隊融入上遇到問題導致自己的效率低,完成度低。好在同事都很照顧我的,一開始沒讓我接手什麼重要的工作,先學習,看文檔,然後了解產品,熟悉工作節奏,然後做一些小修小補的工作。不知道你的公司是什麼情況,你是新人,可以多和同事領導交流反饋,無論工作還是生活上。

工作快一年了,深刻體會到工作最大的困難反而不是產品,設計和技術上的,而是和同事協調合作,如何保持一致性的問題。試圖說服別人是困難的,但是說服自己放棄某些東西也很困難。我也曾經為了某些細節而爭論固執,現在想想這些爭論,我到底是為我自己固執,還是某個產品設計方案固執,還是為所謂的用戶固執?

在這種意義上講,我覺著設計UI,打磨產品,也是打磨自己,無論是方法論,還是思維模式。

不要害怕錯誤,不要擔心失誤。

加油!


支持樓主,持續為什麼,應該很快就成為優秀的UI設計師。

我在頭7年的時候還沒有這麼好的思考邏輯,基本是圍著自己的喜好設計,相對幼稚多了。
慚愧。


謝邀,首先很支持題主這種刨根問底的學習態度,不管做產品還是做設計需要嚴謹的工作態度,有些人抖機靈的人不想說什麼,不知道沒關係,但不知道又說大話就顯得有點浮躁了。

知乎是內容為主的社交為輔的產品對吧?

知乎最早的確是內容為主,社交為輔,早期的知乎氛圍很好,但用戶量較小,隨著入住的人增多,知乎的性質在無形中有些變化,首先是人多了導致各種提問以及回答五花八門,質量參差不齊,所以專業性就顯得不夠全面,總有些低質量答案。其次社交屬性暴露出一些問題,等級觀念日益嚴重,很多人為了大V不擇手段,騙贊騙關注等很常見。而且可以看得見之前微博的某些娛樂邊緣的東西已經有很大一部分在往知乎轉移,所以知乎從某種程度上來說已經算是個社交軟體了,但說內容為主的應用軟體也不算錯,但現在錯綜複雜,用戶量較大,用戶群體較分散,所以屬性也各異,在單一應用環節體現出多元性。所以也不能一概而論,看從哪個角度看待問題;

那在評論區,為何評論者的名稱要比評論內容本身層級優先呢?我指的優先是打開頁面第一眼看到的是評論者頭像其次是名稱,再次是內容。難道知乎設計師不該讓我們最先注意到評論內容嗎?

這個問題其實不難理解,不止知乎,我們看微博,QQ空間貼吧等都會發現其實在層級感上結構相似,那為什麼要這麼做呢,首先我們在瀏覽一個列表信息的時候看到的是一個個的單元,這個單元裡面又分了不同的小模塊,頭像是一個模塊的標誌,其次是標題,再次是內容,屬於一級一級從表及里的視覺引導,而不能單純理解為用戶就是來讀文字信息的。另一個原因是因為用戶習慣,長期的類似設計已經給用戶養成了固定的信息瀏覽模式,這樣降低了用戶的學習成本。

我之前問別人QQ頭像和微信頭像一個圓一個方的區別,別人告訴我是產品定位導致的,QQ更注重社交,圓形頭像自帶聚焦作用,而微信更注重內容,用戶打開軟體,騰訊更希望引導注重別人回復的消息本身。那我不禁要問,知乎不也是更注重內容嗎?為何知乎頭像要設計成圓形呢?是為了美觀嗎?還是說因為頭像很小,所以不重要?

圓形頭像和方形頭像在產品交互或視覺設計上的根本區別概念是什麼? - 知乎

這裡有篇文章就是專門講解圓形方形頭像的區別,建議自行腦補,附上鏈接了,上面可以直接點擊。

就比如為什麼750*1334的頁面導航欄88px,標籤欄是98px,

前面看了有人回答因為調查研究說,人手指的最小點擊區域差不多是44*44px,所以就這麼來嘍?我不否認這個回答,但也沒理由支持,以前見過類似的文章有提到但是我找不出,猜測下來源可能就是這樣吧,但我一定鑽牛角尖改為42了我相信也能做出來,或者做大點做了46開發也能實現,但是這樣不是很亂么,之所以稱為規範是讓大家都遵循一些有必要統一而不影響開發或使用的一些固定模式,這樣降低設計成本,也能進行良好管理,在視覺上建立統一,這樣不是更好么。

我以為當我都搞明白,我這樣去完成一個作品去面試,面試官會認為我有自己的規範,他問我依據我才可以說出來,不至於被面試官認為我在抄襲

我很支持題主的學習態度,對自己負責就是對工作負責,希望繼續保持。

我擔心我去了公司,因為這些為什麼導致自己不能及時做完領導安排的工作咋辦呢?

工作還是比較直接的,不會有人問你為什麼做44還是88,肯定不會在這裡糾結,不妨多看看產品,有產品思維對做產品很有幫助,另外UI很重要的一塊是視覺,一方面是硬功夫,只有多練沒辦法,另一方面多思考,想想為什麼這麼設計就像你前面提到的圓形方形頭像。


另外諮詢下大多數公司新手到公司後,剛開始的一段時間(雖然我也不知道多久)除了熟悉公司環境學習公司文化,了解工作流程,主要是幹啥呢?

基本小公司一進去就丟給你一個原型,開PS擼界面了,有些會讓你先看看產品,產品定位,目標,用戶群體,設計風格,有些事情不是一下子就能搞清楚的,創業公司的產品自己有時候都不明確一邊做一邊在摸索,希望題主先進去自己多看看多去適應,進去如果有人分配任務就按時完成就好,如果空檔期較多可以主動點多了解下自己公司產品各方面的問題吧。


謝邀,

樓主的問題確實帶著思考,我勉強看完了……

對你的第一個問題,為什麼突出名字而沒有突出答案的問題印象比較深刻。

雖然我不知道知乎產品經理的初衷,也不知道是不是設計師為了好看而這樣。不過現在理論的基礎上,我是支持你的。

事情總有兩面,細節過於執著有時候也挺累的。從不同出發點考慮問題其實答案也不一樣。樓主搬出一個社交和內容的理論,我覺得首先把自己限定死了。知乎雖然標榜內容,但是你依然可以在知乎上約炮吧?釣魚吧?上車吧?所以知乎的定位是一個大方面的概念。或者說主營內容,也沒有跑偏。但是設計細節功能是否都需要去附和這個大的概念其實還是需要一個論證過程。

當然了,我現在我的角度去看待,我覺得其實並沒有什麼不好的。而且我覺得反而是好的。評論區我在乎的人有沒評論?評論區有沒妹子評論?評論區有什麼有意思的人評論?很多時候更注重的是人,並不是他評論的結果。站在這個維度看,是不是就覺得有點道理了?


我覺得題主的這種精神是對的, 任何設計都應該有所依靠, 不然出來的只能是設計師的幻覺.

稍微按我的思考說一下題主的幾個問題.

知乎是內容為主的社交為輔的產品對吧,那在評論區,為何評論者的名稱要比評論內容本身層級優先呢?我指的優先是打開頁面第一眼看到的是評論者頭像其次是名稱,再次是內容。難道知乎設計師不該讓我們最先注意到評論內容嗎?

知乎並不是一個十萬個為什麼一樣的工具類的網站, 每個答案後面都是各種各樣各行各業的人, 所以把人名放在最前面, 第一個是符合約定俗成的習慣, 第二個是增加答題人的積極性, 增加曝光率, 我們看的人自然是關注答案本身, 但是答題的人回答問題是需要驅動的, 而放在最醒目的位置能滿足這一需要.

另外,我之前問別人QQ頭像和微信頭像一個圓一個方的區別,別人告訴我是產品定位導致的,QQ更注重社交,圓形頭像自帶聚焦作用,而微信更注重內容,用戶打開軟體,騰訊更希望引導注重別人回復的消息本身。

那我不禁要問,知乎不也是更注重內容嗎?為何知乎頭像要設計成圓形呢?是為了美觀嗎?還是說因為頭像很小,所以不重要?

這個就是設計師的選擇問題了, 手機端是圓形, 網頁端是方形. 應該是基於整體設計的考慮.

奧,對了,對於自己不太懂的知識(包括但不限於ui設計),我總是不自覺問為什麼,就比如
為什麼750*1334的頁面導航欄88px,標籤欄是98px,
當然,這個問題,我還沒搞明白,但是已經能放下了,可是在ui設計中我會有很多為什麼,

每畫一個圖標我就會問自己為什麼這麼畫,
為什麼要用這個比例,
為什麼要這個大小,
為什麼要這個距離,
為啥這個圖標距離屏幕邊緣比距離旁邊的內容近呢這不對啊

88px 的問題我相信題主應該一早知道答案了.

至於為什麼一上一下, 一個是 88px, 一個是 98px, 我的理解是導航欄一般只有一行, icon 跟文字會並列. 而標籤欄一般是 icon 跟文字上下排列, 比導航欄單行多了一個呼吸的空間, 所以安排的比上面高10px.

這樣也有一個好處, 就是我們經常見到的導航欄都是跟狀態欄在一起的, 顯得更高, 而標籤欄加了10px會顯得不那麼被弱化.

我以為當我都搞明白,我這樣去完成一個作品去面試,面試官會認為我有自己的規範,他問我依據我才可以說出來,不至於被面試官認為我在抄襲,
但是這也導致我做一個app兩個月才勉強搞完。
最主要的,是我擔心我去了公司,因為這些為什麼導致自己不能及時做完領導安排的工作咋辦呢?
另外諮詢下大多數公司新手到公司後,剛開始的一段時間(雖然我也不知道多久)除了熟悉公司環境學習公司文化,了解工作流程,主要是幹啥呢?謝謝

說的對, 當你都搞明白了, 你的作品才能言之有物, 現在的慢只是暫時的, 熟悉了以後, 都會好起來的, 萬事開頭難.

加油!


哎,UI的本質是交流,難道你跟一個人說話,連臉都不看名字都不問就會相信他說的話么?

特別是在知乎有意創造的環境里,更不可能先放內容再放作者,如果真是這種構造,誰願意回答?

問題作者做什麼設計都求個意義理由我覺得還是好現象,畢竟我們做什麼都得先搞清這個產品的目標,目的,人群,然後你再去搞清為什麼方為什麼圓什麼距離好了。不然面試官你對付過去了,工作你可對付不過去。


可以回答樓主的一個關於頭像方圓的問題:

https://zhuanlan.zhihu.com/p/24811640

這算不算官方吐槽?


看到題主彷彿就看到了自己,想起自己曾經一段時間內也是這個樣子,對於每一個元素都回去深究,自己不認可的細節就會想問為什麼。現在覺得做設計優先順序真的很重要,包括做產品。關於題主說到的一些細節問題,個人覺得或許他們都沒有你想的這麼多,或許他們的思維里就認定標題的字型大小應該比內容字型大小大(標題字數基本情況下比內容字數少,因此通過字數少字型大小大,字數多字型大小小從而達到視覺平衡)。其實每個設計師都是一個個體,都有自己的設計思維,也無法硬性說哪個設計一定是對的,只是表達的側重點不一樣,只要不影響到主體設計目標,不同的設計師會在視覺暗示上做一些不同的設計讓用戶感到舒適的感覺。

很喜歡題主的性格,同新人,希望以後多交流~


個人認為應該是從產品層與視覺層共同出發才設置的頭像在內容上方。

從產品層來說,知乎是雖然是內容為主體的社區,但內容的產生是用戶所為,為了讓用戶更積極的參與到回答與互動,產品建議會員信息優先展示,是為了更好的促進內容產生的積極性以及會員的自我榮譽感。

從視覺層來說,這樣做的好處是在閱讀上更有節奏,點-面-線的結構,舒適性要高過於面-點-線。

至於頭像圓形或方形,目前我也沒理解清楚真正的原因。
圓形優點是柔和、環境適應強、年輕
方形的優點是規範、視覺基線明顯、嚴謹
如果作為開發,我更喜歡是方形的頭像,我能少寫幾行代碼
但是作為設計的話,我會更喜歡圓形的頭像,空間以及舒適性會比方形的高很多
再怎麼地,最後還是產品拍板的,聽產品的就好

最後再說一下工作效率以及新入行的設計師一般都做些什麼
工作效率這塊,取決於公司對你的安排,比如APP的迭代,需要在1個月內完成,你按你目前的工作習慣,每一項都去深入做研究,那麼你根本無法完成工作。正常工作中,項目日程是優先程度最高的一部分,保證日程是每一個職業都必須遵守的職業素養,這一點要是達不到的話,很難生存,因為要背的黑鍋實在太多了。
如果你公司不限定你時間,那麼你就可以細細的來做研究,一步一步把自己的想法融入到產品了,但這個幾乎現實中不存在。

新入行的設計師,根據公司不一樣,所以工作內容不一樣,互聯網公司剛入職的設計師大部分都是從BANNER、專題等運營物料設計開始的。如果你能力不錯,那麼到需要迭代或者開發新的產品線的時候,就會需要你開始做界面了。

不請自來... 歡迎多交流...


看到你說的頭像問題,如過說是圓形注重社交,我只能說純屬扯淡。

看了你提了這麼多為什麼,但是這個為什麼是你站在用戶的角度提出來的,你考慮過知乎的創始人是怎麼想的呢?知乎也是需要培養很多解決問題的大牛才能穩定它的位置的,如果只是答案,你卻忽略了幫你的那個人,是否會影響到創造內容呢?

你下面說了一大堆規範的問題,這都是那些大公司留下來的的經驗而已,只是這樣比較合適,不是絕對一定就要這樣來,沒這個要求。

你要想知道層級關係,建議你多和產品溝通,站在他的思維角度去看


設計本身就是一個比較感性的事情,沒有那麼多為什麼。如果每個間距像素、色值、字型大小大小等都能通過計算算出來,就沒有那麼多扣細節的處女座設計師了。

更多時候產品設計是分析用戶、分析使用場景、分析產品功能、分析用戶使用情況等通過經驗總結設計出來的。比如同一個頁面,為老人設計可能字型大小、間距會大很多,因為老人視力不好操作沒那麼敏捷;同一個某打車產品,為用戶與司機設計也不一樣,司機端很多信息可以語音交互、或是極簡化操作、或是操作入口很明顯,因為司機正在開車...;

至於為什麼750*1334的頁面導航欄88px,標籤欄是98px的問題,這是iOS平台的基本規範。其實平台『規範』不僅僅只是UI設計,還包括各種。

詳見:Apple Developer (蘋果官方開發者文檔)

iOS Human Interface Guidelines (iOS設計規範部分)


很欣賞樓主的問題和思考,我是一名遊戲策劃,對於ui理解可能沒有樓主深,個人對於ui理解如下:

1.首先顯示參照行業標準吧,樓上也有人提到了,用戶的學習成本是一個很重要的考量標準,不能單純的為了美觀而創新,或者為了像素對齊(強迫症),而改掉用戶習以為常的控制項或要素。

2.個人覺得,界面的排版和控制項是基於功能開發的,先滿足功能需求,再方便用戶理解,交互,最後才到美觀性。

3.另外一個體會比較深的是,在大多數公司,創新的成本意味著風險,不如直接按照已有的好的模式來,或者在已有的模式上進行改造。

以題主問題本身為例,為何先顯示回答者頭像和名字不是先評論評論。這就是一個重要程度的問題,評論本身所佔據的panel就比頭像和名字大很多。在我看來在大小上面拉開了差距反而就是凸顯了內容的重要,反而參見微信聊天窗口之類的,內容只有單行簡略,頭像和名稱都是比較引人注目。

個人意見,歡迎探討


「知乎表面上做的是問答,本質上做的是社交。」


哪來那麼多原因,就是產品審美決定的


推薦閱讀:

Motion Graphic到底屬於什麼領域,為什麼覺得似乎很小眾?
UI 設計是如何讓受到法律保護的?關於征途網站的這種 UI copy 的行為,在中國可以告他嗎?
為什麼現在這麼多人黑魅族?
針對一款產品(任何產品,以APP為例)的UI設計一個用戶研究方案,請問如何設計?從哪幾個方面考慮?
如何對美工進行績效考核?

TAG:用戶界面設計 | 用戶體驗設計 | 視覺設計師 | iPhone交互設計 | UI設計師 |