Case 03 | Imitate design: Clubhouse App with Human Interface Guidelines in it

Case 03 | Imitate design: Clubhouse App with Human Interface Guidelines in it

Clubhouse作為新興的語言社交軟件,看起來和iOS內App的標準化設計不太一樣,但實際它的設計是非常符合Apple公司的Human Interface Guidelines(HIG)標準,讓我來解構分析一下Clubhouse App的設計吧

被邀請註冊之後出現在首頁的是待探索的語言“房間”

最上面一排是導航欄的一個個“按鈕”
可以切換到不同功能(Search, Calendar, Notification, Profile) :搜索,日歷,消息,用戶設置

對應HIG裏:"Design an information structure that makes it fast and easy to get to content. Organize your information structure in a way that requires a minimum number of taps, swipes, and screens."
“Use color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly.”圖標上謹慎的使用顏色來引起用戶的註意,比如“通知”小鈴鐺圖標上的紅色數字提醒用戶關註消息

SF Symbols裏"Calendar"圖標

“Bell" (Notification)通知消息圖標

🍺思考:
・導航欄的設計遵循了HIG的“盡可能簡單”的原則,導航欄的圖標選用的也是iOS用戶所熟悉的SF Symbols裏的通用圖標,用戶學習成本低可以很快知道每個圖標所代表的含義

語言房間裏的文字內容的字體
標題使用加粗,與下方房間裏的用戶名字的字體相比,標題字體略小。一可以容納下長標題,一是更突出下方的房間裏的用戶。作為社交軟件著重在把大家聯系起來,feel connect with each other.

每個box的中間偏左是2個用戶頭像,2個圓圈連接在一起,像2個小圓窗在對話。整體的文字的排版是工整的上下左右,而這2個頭像圖片是有一些從左上到右下,不是完全horizontally或者vertically,有了這2個小圓圈頁面變得更有趣了。
Box右上角的“...”和🔒圖標,與上一篇分析Airbnb App的設計中把“收藏”“分享”功能按鈕放在右上角,有異曲同工之妙

下方的CTA按鈕“Start a room"和一個“+”的符號,圖標加文字,用戶可以更好的理解和看到這個button。顯眼的綠色給這個button增加了顯眼度。

🍺思考:
・文字部分使用字體大小,字重來區分不同重要性的文字
・CTA button使用了圖標+文字的方式,容易被看到又不會產生困惑

進入語音房間
裏面的用戶分為3類:Speaker, Followed by the Speakers, Others In the Room。
不過個人比較想吐槽的一點是:說話的人的圖標亮起來的顏色不明顯,基本上註意不到。而且有些用戶會把自己的頭像照片換成加一個邊框的照片,這樣一來整個屏幕感覺都是有邊框的頭像,腦殼疼啊有時候聽到很棒的講話內容但找不到是誰在說話。

五彩的文字背景像是馬克筆標註的手寫筆記本
可愛平實的風格,比之白色背景的文字內容嚴肅感較少,輕松感增加

🍺思考:
・隨著彩色的iPhone系列再度出現,使用五彩顏色作為文字背景或是大背景的設計增多了。樸實可愛的彩色增加fun,在最近居家辦公的大環境下大家更是需要一些娛樂化的事物
・Clubhouse App的背景色是紙張的淺黃色,沒有很突出的個性但溫和可接近的風格。也比較Clubhouse作為一款語音設計軟件,為各類愛好,各類話題在App上的討論平台