想成為真正的UI 設計師,光會視覺設計可弗成。這份控件設計指南,可以幫你快速鞏固基礎。本文包含三個部分,今天講第一部分:UI 欄。

學控件之前,先來過一遍設計指南:《看不完 iOS 人機交互指南?高手總結了這份濃縮精簡版!》

iOS 13 設計規范里,UI 欄包含導航欄,搜索欄,狀態欄,標簽欄和工具欄,其中搜索欄較為復雜,所以也做了一個思維導圖,分享的內容主要為以下幾部分:

下面進入正文:

導航欄navigation bars

1. 導航欄在 iOS 規范里的描述:

導航欄在頁面頂部,狀態欄的下方,常見的構成如下圖:

云南体彩网當需要強調當前頁面時,可以使用大題目。大題目的好處:贊助用戶明確當前頁面,同時贊助用戶明確何時滾動到了頁面頂部。大題目的交互效果:上滑時大題目縮放成小題目在導航欄中顯示,如下:

需要注意的點:

云南体彩网顯示全屏內容時,為給用戶更好的體驗,可隱藏導航欄,好比查看全屏照片,觀看視頻時,閱讀類軟件閱讀狀態時導航欄會自動隱藏,然后可以通過簡單的操作喚醒導航欄(如單擊屏幕)。

云南体彩网導航欄不要放置過多控件。一般情況下,導航欄只能包含「題目」「返回按鈕」和「功能按鈕」,當涌現多個控件時,將其折疊。如下圖,蘋果自帶的信息 app,「管理信息列表」「編輯名字和照片」用一個按鈕進行了折疊,點擊「更多」以彈窗形式涌現。

再好比,備忘錄 app,同樣使用「更多」將操作隱藏。

2. 導航欄的延伸設計

云南体彩网導航欄的題目主要起到導航作用,告訴用戶當前在哪,當頁面底部有菜單時,題目可以隱藏,這樣就可以給其他內容留出更多空間。

用戶的閱讀習慣是從上至下,導航欄的位置是用戶進來頁面后最先看到的,所以導航欄被賦予了更多功能,常見的有:

導航欄與與搜索欄結合:好比電商類 app,像淘寶,京東都將搜索欄凍結在導航欄,方便用戶快速進行搜索。

營銷入口:云南体彩网導航欄除了放置功能控件外,為了滿足短暫的業務需求也經常成為營銷的入口,這樣的入口具有很強的不固定性,將其放置在導航欄,不會使頁面結構發生太大變更,同時它也不像浮窗那樣具有很強的打攪性。好比雙十一前京東推出的「超等百億活動」:

搜索欄search bars

1. 在iOS設計規范里的描述

搜索允許用戶通過輸入關鍵字獲得目標信息,搜索欄可以零丁顯示,也可以顯示在導航欄或內容視窗中,當顯示在導航欄時,可以將其固定在導航欄,以便始終可以訪問,也可以將其隱藏,上滑時再顯示。

2. 搜索的作用

云南体彩网當產品內容過多時,用戶不克不及快速準確找到目標功能或內容,所以就涌現了搜索,對用戶而言,搜索能贊助他們在短時間內精準的直達目標,對產品自己而言,搜索是一個巨大的流量入口,在產品運營中起著舉足輕重的作用。除此之外,我們也能通過對用戶搜索數據的收集與分析,探知用戶實際需求,找到產品優化和運營的機會點。

3. 搜索的方式

云南体彩网隨著科技的發展,搜索方式越來越豐富,可以通過文本,語音,圖片,視頻,掃一掃等方式實現搜索目的,文本搜索很常見,不再贅述;語音搜索,一般隨同著文本搜索涌現,好比支付寶的語音搜索:

云南体彩网還有音樂類軟件的聽音識曲功能也相當于語音搜索,再好比網易有道詞典的語音搜索,如下:

圖片搜索:好比淘寶的通過圖片搜同款/相似款,還有百度圖片的以圖搜圖功能。

視頻搜索:視頻搜索是抖音針對部分用戶剛上線的功能,用戶可以根據視頻中的人物搜索到該人物的其他視頻,隨著 5g 的發展,想必該功能會獲得更廣泛的應用。

掃一掃搜索:淘寶的掃一掃搜索功能,通過掃描目標,搜索相關商品。

4. 搜索流程

云南体彩网這里主要以文本搜索展開介紹,搜索流程可以概括為搜索前→搜索中→搜索后,如下圖

搜索前

云南体彩网搜索前要注意的地方就是搜索入口,下面詳細說一下分歧搜索入口對應的場景:

自力的搜索tab:將搜索作為一個自力 tab 的場景是,搜索對用戶和產品自己都非常重要,用戶使用搜索功能非常頻繁,用戶能通過 tab 欄快捷定位到搜索,例子有app store,iOS 的照片,微博。

搜索框:最常見的入口形式即在頁面頂部以搜索框形式涌現。這種形式又分為以下幾種交互方式:

搜索框隨著上滑操作消失,反向滑動到頂部時涌現,如微信,iOS 的備忘錄都是這種方式。

上滑時搜索框收起變為搜索 icon,反向滑動時搜索框涌現,如支付寶,百度網盤

搜索框凍結在頁面頂部,方便用戶快捷使用,多用于內容,電商類產品,搜索功能很重要。如淘寶,京東,小紅書,知乎,美團都是這種方式。

搜索 icon:以搜索 icon 的形式涌現在頁面右/左上角也是很常見的一種,這種形式對應的場景是:搜索功能必弗成少,但優先級沒那么高,或頁面元素過多,以小icon 的形式涌現節省空間。如支付寶-財富頁面和淘寶-微淘頁面,搜索都是以 icon 的形式放在頁面右上角。

云南体彩网隱藏式搜索框/icon:搜索默認隱藏,通過交互動作觸發。好比微信小法式頁面,搜索是默認隱藏的,下拉才會涌現。由于觸發動作過于隱蔽,導致很多用戶都不知道該搜索功能,因為該頁面自己是通過微信消息頁面下拉涌現,用戶的普遍認知是頁面頂部已顯示完全。既然用戶找不到,微信為什么還這么做呢?我們來分析一下小法式這個頁面的使用場景,這個頁面包含兩部分內容,一個是「最近使用」,一個是「我的小法式」,這兩部分相對來說數量沒那么多,用戶可以通過瀏覽快速找到目標,瀏覽的操作成本低于搜索操作成本,搜索的使用頻率較低,所以將搜索默認隱藏。

云南体彩网再來看從微信-發現頁點擊進入的「小法式」頁,搜索框默認在頂部涌現,這是因為這個頁面承載的內容更多,用戶更多的場景是搜索新的小法式。

蘋果自帶的 app 很多都采取了這種方式,如設置,備忘錄,都是通過下拉操作喚出搜索框,人人可以自己體驗一下。我個人認為這種隱藏體驗并欠好,隱藏可以有,但是需要明確告知用戶如何喚出,像設置和備忘錄以及微信小法式的喚出方式做的過于隱蔽,導致用戶找不到搜索在哪。

特殊形式:還有一些特殊的形式,如蘋果系統左滑進入搜索頁,下拉激活搜索框。

搜索中

云南体彩网點擊搜索入口:點擊搜索入口后,分兩種情況,跳轉新頁面或仍留在當前頁面。

云南体彩网跳轉新頁面是為了承載更多信息,前面有說到搜索是運營的一個機會點,所以在這個頁面除了展示與搜索相關的信息外,還會有運營信息的漏出,這個新頁面的構成大部分情況如下:

搜索框被激活,鍵盤自動彈出,這個時候要注意,鍵盤不要遮蓋住重要信息。還有一種情況是,進入新頁面后搜索框未被激活,鍵盤也不會彈出,需要再次點擊搜索框才會激活鍵盤,這樣的好處是給運營留下更多空間,如抖音之前便是采取這種方式:

但這樣搜索流程就多了一步,體驗不順暢。在抖音最新更新的版本中,已經放棄了這種方式,想來以抖音現在的實力,已不需要通過在搜索頁面漏出更多內容提高內容的瀏覽量了。

留在當前頁面完成搜索的情況,一般適用于搜索內容量小,且搜索范圍為當前頁面的內容。好比德律風-通訊錄頁面的搜索。

搜索又分為即時搜索和點擊搜索按鈕進行搜索,即時搜索指用戶每輸入一個字,系統就會進行一次搜索,非常快捷,搜索效率高,但對法式的計算能力要求也高。輸入搜索信息完畢后點擊搜索按鈕進行搜索,這種方式雖效率不高,但對技術的要求也相對較低。

搜索后—搜索結果:

云南体彩网多數據——結果分類涌現/篩選:當搜索結果數據過多時,為了方便用戶快速準確的找到目標,可以對搜索結果進行分類或提供篩選功能。如微信,淘寶的搜索結果頁都是通過頂部 tab 對結果進行分類,同時淘寶還提供了篩選功能。

云南体彩网少數據——智能推薦其他相關內容:當搜索到的數據過少時,可以通過智能推薦其他相關內容的方式引導用戶擴大搜索范圍,進而獲得目標結果。

無數據——智能推薦其他相關內容:無數據和少數據一樣,通過智能推薦其他相關內容的方式引導用戶擴大搜索范圍,進而獲得目標結果。好比自如搜索房源時,當沒有符合搜索條件的房源時,系統會自動推薦其他與搜索條件相關的房源供用戶選擇,提升了用戶體驗,同時提高了成交率。

毛病數據——智能糾錯:當用戶輸入的搜索信息毛病時,為其提供正確的詞供其選擇,或直接展示正確的搜索結果。如淘寶和微信都是采取的后者的方式:

狀態欄status bars

1. 在 iOS 設計規范里的描述

云南体彩网狀態欄涌現在屏幕的最上方,顯示設備當前狀態的相關信息,好比時間,運營商,網絡狀態和電量,狀態欄中顯示的實際信息取決于設備和系統的配置。

需要注意的點:

全屏情況下,可以暫時隱藏狀態欄,為用戶提供更身臨其境的體驗。

不要永久隱藏狀態欄,如果沒有狀態欄,用戶必須離開當前應用來查看時間或電量,體驗很欠好。好比百度云盤在視頻播放界面,永久性的隱藏了狀態欄,每次看視頻時想看一下電量還剩多少或者幾點了都必須退出當前播放頁面能力查看,讓人很瓦解。

使狀態欄樣式與應用法式相協調,狀態欄有深色和淺色兩種樣式,根據分歧頁面實際情況進行個性化配置給用戶更好的體驗。

標簽欄tab bars

1. 在iOS里的描述

云南体彩网標簽欄在頁面底部,為用戶提供在應用法式內分歧部分快速切換的功能。標簽欄為半透明狀態,可能會有配景色,在顯示鍵盤時被隱藏。標簽欄可以包含任意數量標簽,但可見的標簽數量需根據設備的巨細而變更,如果由于水平空間有限而無法顯示全部選項,則最后的可見標簽變為「更多」,點擊更多后在零丁的頁面顯示其他標簽。

需要注意的點:

標簽的數量,避免過多或過少。標簽過多會使可點擊區域變小,且會增加應用法式的復雜度,使查找更加困難。標簽過少在視覺上會增加頁面的割裂感,使頁面整體感降低,標簽的數量最好控制在三到五個。但這也不是絕對的,需要根據系統實際內容來定,好比 iOS 自帶的「文件」app,底部標簽有「最近項目」「瀏覽」兩個。

頁面的割裂感可以通過視覺設計的手段去折衷,好比將標簽的排版變為左圖標,右文字的左右排版。

當標簽處于弗成用狀態時,不要刪除或者禁用,如果標簽時有時沒有,時可用時弗成用,會讓系統變得不穩定弗成預測,讓用戶感覺弗成控。當某些標簽對應的內容弗成用時,可通過其他方式告知用戶當前內容弗成用原因,而不是對該標簽禁用或刪除。好比 iOS 設備沒有歌曲時,點擊「音樂」應用中的「我的音樂」,會告知用戶如何下載歌曲。

云南体彩网使標簽欄的圖標在視覺上堅持一致和平衡,如 iOS 自帶的 apple store 和 app store,底部標簽在體量與顏色上都堅持統一和平衡。

云南体彩网表達明確:如果標簽可以用系統圖標來表示就盡量用系統圖標,如果非要自己設計,要注意轉達意思的準確度,也可以用輔助文字來說明,但文字不宜過長,避免涌現換行。

當有新消息時,可以在標簽欄上使用數字氣泡或小紅點進行提示。

云南体彩网以上是 iOS 設計規范中對標簽欄的描述,我們在遵循基礎規則的同時,要根據實際的業務場景勇于立異。如,為了突出某個標簽,涌現了如下的形式:

中間的「發布」標簽體量上明顯高于其他標簽,通過這種方式提高了該標簽的點擊率,引導用戶發布內容,提高內容存量。

2. 標簽欄的位置形式:底部標簽欄;頂部標簽欄

在講每種標簽欄位置的優劣勢前,先來看下圖,這是史蒂文·霍伯通過研究發現的拇指熱區圖,研究發現 49% 的人依靠一個拇指在手機上完成任務。其中綠色為用戶可輕松觸及的區域,黃色表示需要伸展的區域,紅色表示需要用戶改變設備握住方式的區域。

底部標簽欄

底部標簽欄是最常見的一種導航形式,它已在用戶心中形成固定認知,用戶打開一個系統,會本能的去底部查看標簽,希望通過底部標簽快速了解系統能提供的功能。除此之外,隨著手機屏幕的增大,用戶通常是單手握住手機下半部使用手機,通過上圖可以看出,標簽放在底部在使用時更快捷舒適。

頂部標簽欄

頂部標簽欄通常會與底部標簽欄結合使用,其優點是符合用戶從上至下的閱讀習慣,且標簽數比底部標簽欄承載的更多,當存在多個標簽時可以通過左右滑動的形式承載,一般用在新聞資訊類產品中,如下圖的新浪新聞和今日頭條都采取了這種方式。缺點是它放置在用戶最難觸達的紅色區域內,不易單手操作,很多產品允許用戶左右滑動來實現標簽間的切換,這種方式雖方便用戶快速切換,但與系統自帶的右滑返回操作有沖突,所以這種方式更多涌現在一級頁面。

工具欄toolbars

工具欄通常在頁面底部涌現,包含了對當前頁面的相關操作。工具欄為半透明狀態,有時有配景色,當用戶不需要時通常會隱藏。例如,在 safari 中,向上滑動開始閱讀頁面時,工具欄自動隱藏,向下滑動或點擊屏幕底部時自動顯示。同時當鍵盤涌現時,工具欄也會被隱藏。

需要注意的幾個點:

工具欄的按鈕是使用圖標還是文字:當工具欄中涌現三個以上的按鈕時,使用圖標會更合適,因為圖標所占空間比文字更小,更容易承載多個按鈕。其次,當按鈕涌現三個以上時,字符太多會使頁面變得凌亂。當按鈕為三個或三個以下時使用文字更加直觀,更易讓用戶理解,好比日歷 app 中,使用文字是因為圖標會使三個按鈕的含義造成混淆。

避免在工具欄中使用分段控件。分段控件允許用戶切換頁面,而工具欄只作用于當前頁面。

如果需要切換頁面,可以使用標簽欄進行切換。

云南体彩网給文本按鈕留有充分空間。文本按鈕之間留有充分間距,更利于用戶理解與點擊。

云南体彩网好了,今天就說到這,文章較長,希望人人能耐心消化

希望此文對你有一點贊助,poppy。

歡迎關注作者的微信公眾號:「設宴」

點贊 21
收藏 84
繼續閱讀相關文章

發表評論 已發布 1

還可以輸入 800 個字
 
 
載入中....
1 收藏