<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          10種異常狀態設計

          資深UI設計者

          在做設計的過程中,大部分設計師只專注于主操作流程、主頁面、分支流程、小頁面和頁面的不同狀態。卻容易忽略產品中容易出現的各種異常狀態。

          當用戶停留任何一個界面,進行任何一個操作都可能發生異常狀態。

          如果接到每個需求都去制定一次異常狀態,這樣的后果可能會使得產品的不同模塊、不同流程,異常狀態都不一致。全局規范性被破壞,同時設計師的效率也降低。

          因此全局制定異常狀態規范很有必要,后續就不需要再設計,開發直接復用異常狀態的規范。省時省力、提率、設計規范、運行更流暢、減少代碼重復率、安裝包也會更小。

          異常狀態一共有以下 10 類:

          • 網絡異常
          • 消耗大量流量時
          • 空數據
          • 加載失敗
          • 操作失敗
          • 服務器異常
          • 搜索無結果
          • 無權限
          • 功能建設中
          • 內容被刪除

          網絡異常

          當移動設備網絡異常時,導致無法上傳和下載數據,從而無法正常的使用產品。

          網絡異常存在兩種場景:

          • 網絡異常時,用戶打開 App,這種情況 App 會出現異常狀態提示給用戶,這是 App 主動告知行為;
          • 用戶點擊操作時,由于網絡異常,這時候通過交互反饋給用戶,這是 App 被動告知行為。

          1. App主動行為

          當無網絡時,用戶打開 App,通常有三種方式提醒用戶當前網絡異常。

          tips 提示,通過 tips 提示用戶當前網絡不可用,tips 使用場景一般為用戶打開后,界面停留在首頁,且首頁以列表形式展示,這樣的話, tips 才能合理的融入到界面中,常見使用這種布局方式的有微信、qq等。

          使用toast提示用戶網絡異常,同時提示用戶可以去使用非數據影響的操作。例如網易云音樂,當無網絡時候,告知用戶可以去正常聽已下載的音樂。

          使用對話框,引導用戶進入設置頁面,關閉飛行模式或者打開 Wi-Fi,例如美團進入首頁后的對話框提示。

          2. App被動行為

          當前無網絡時,用戶點擊操作,無法正常使用產品,這時候通常有兩種處理方式。

          一種是當前界面出現 toast 提示。另一種是進入下一級界面,以缺省頁的形式提醒用戶當前網絡異常。

          例如手機淘寶,沒有網絡時,用戶點擊會進入下一頁,出現缺省頁提示,告知用戶網絡異常,同時提供刷新按鈕。

          美團在無網絡時,點擊其他 tab bar,出現 toast 提示用戶當前網絡異常,稍后重試。

          3. 小結

          • 個人覺得,當 App 打開進入列表頁面時,常見的如 IM,則使用 tips 提示告知用戶,非列表的 IM 工具時,可使用 toast 告知用戶。
          • 當用戶進行界面交互時,用戶點擊操作,通過 toast 告知用戶。

          消耗大量流量時

          當涉及需要消耗大量流量數據時,且非 Wi-Fi 情況下,這時候需要告知用戶。常見的例如看視頻,聽/下載歌曲、視頻通話、下載上傳文件等。

          例如B站,當使用移動數據看視頻,則通過提示語和對應按鈕上的流量值告知用戶。

          網易云音樂在非 Wi-Fi 情況下,下載音樂時,通過對話框,告知用戶當前使用數據流量,同時提供可繼續下載的功能,也提供通過辦理新業務解決數據流量的問題。

          空數據

          空數據一共分為兩種類型,分別為初始狀態和清空狀態。

          1. 初始狀態

          用戶首次使用,沒有任何內容數據時,需要用戶進行某種操作才能產生內容的界面,這時候需要提示用戶需要進行某種操作。

          例如淘寶App,當用戶沒有把商品加入購物車時,進入購物車界面,會給出提示購物車界面為空。給出用戶提示,給出相對應的入口按鈕,引導用戶操作。

          如果初始狀態,無任何內容直接給出一個空白界面,用戶可能會以為該界面出 bug 了。

          Gmail 直接用一個插畫提示用戶收件箱為空。

          一般對于初始狀態的設計,常規做法是簡單的插畫配合簡潔的文案,必要的時候給出引導用戶操作行為的按鈕。

          現在流行的設計趨勢是插畫越輕量越簡單越好,以免搶奪了文案信息。

          2. 清空狀態

          當用戶清空當前的頁面內容,產生了空界面,這時候需要有明確的提示告知用戶出現當前頁面的原因,且告知用戶該如何處理。

          清空狀態是對初始狀態的進一步細化。清空狀態的界面和初始狀態設計很相似,唯一不同的是文案的提示。

          有的產品直接把清空狀態的界面按照初始狀態來設計,這樣也是可以的,缺點就是沒有告知用戶產生空狀態原因是初始化還是清空所致。

          加載失敗

          在加載過程中,App 向服務器請求數據,如果是網絡原因導致,則使用網絡異常的設計規范。

          如果非網絡異常原因,則可能因為服務器異常導致接口請求不到數據,從而加載失敗。

          第一次請求失敗,有些場景可能重試 2 次,例如微信支付寶,這種情況可使用 toast 告知用戶加載失敗的原因。

          操作失敗

          任何操作行為的交互界面都伴隨著操作失敗的概率。

          當用戶操作失敗時,在當前頁面給予一個反饋,告知用戶操作失敗,最好告知用戶操作失敗的原因,讓用戶知道接下來如何避免操作失敗。

          服務器異常

          因為服務器異常是小概率事件,但是也會發生。

          當服務器異常時,且用戶在操作過程中,出現這種情況,一般可設計為對話框提示,明確告知用戶,服務器出現問題,讓用戶稍后重試。

          例如下圖的華為云備份恢復界面:

          搜索無結果

          用戶在搜索過程中,除了出現正常的匹配結果,還存在無匹配結果的情況。針對搜索無結果的情況,要給予用戶操作無結果的提示。

          幾乎搜索無結果的狀態都是在內容區出現對應提示。例如 iOS 相冊,通過搜索關鍵詞,當沒有匹配照片時,則出現對應的提示,如下圖右側圖:

          下圖淘寶買家版后臺,當用戶搜索關鍵詞無結果時,出現對應的提示語和插畫。

          無權限

          無權限的場景,通常適用于 b 端產品,對于不同組織架構的企業員工,會存在不同的權限。

          例如部分重要的內容,非同一組織架構的員工無權限查看,這種情況,用戶點擊進入一般給出對應的提示。

          當然最好的方案是在 App 上面過濾掉無法查看的內容,但是存在員工間的轉發行為,這時候無權限的員工,點擊進入,則顯示暫無權限查看的提示頁面。

          功能建設中

          一般 App 功能正在開發中,這種情況不會在 App 界面中展示出來,只有完全開發完畢并上線后才會出現在 App 上。

          但是也有一些產品的特殊業務,會將一些未開發的功能展示出來,例如微信公眾號,長按微信文章,即出現對應的提示。

          也有一些新聞頻道還沒有開發完畢上線,這時候用戶點擊進入下級界面,則出現對應的提示語/插圖提示,如下圖所示:

          內容被刪除

          有的時候,文件或者頁面內容被刪除,但由于文件或者頁面內容的上一級頁面有緩存,所以當用戶點擊進入時,會出現文章/文件被刪除的情況。

          已被刪除的異常狀態,常見的設計是用戶進入新頁面出現對應的插畫和標題提示。

          例如下圖微信公眾號文章內容被作者刪除,讀者點擊進入,加載后的界面就出現內容被刪除的提示。

          以上就是常見的 10 種異常狀態的簡單介紹和說明。在制定異常狀態的設計規范時,可以參考本篇文章。

          當然也有公司特殊的業務導致存在很特殊的異常狀態,針對這種情況,可以適當的增加、刪除或者修改,使其更適用于自己公司的項目。

          文章來源:優設

          如何從0到1構建UI視覺層級?

          資深UI設計者

          如“黃金分割”之于構圖,“視覺層級”之于頁面節奏,都是基礎且必不可少。本文與你分享如果一步步從原型開始構建APP視覺層級。

          工作中,你是否經常聽到“視覺層級”這詞?就猶如“用戶體驗”一樣讓人耳熟能詳。拋開裝逼因素,這兩個詞的多次提及,可見其重要程度。


          音樂有節奏,好的音樂能通過音階的高低起伏變化表達音樂情緒。

          例如:《Main Title》即使你沒看過《冰與火之歌》,光聽音樂你是否能感覺到音樂給你營造千軍萬馬恢弘之勢?!禤laying Love from The Legend of 1900》你是否想到一個寧靜夜晚,佳人與你傾訴衷腸,柔情似水。

          反之,節奏不好,則無法和聽眾達成共鳴。


          繪畫有節奏,張馳有度、大小對比、遠近疏密變化,構成了畫面的節奏。反之,沒有節奏,則畫面平淡。


          同樣的,APP UI也有節奏。頁面良好的視覺層級,方便用戶在瀏覽的過程中抓取關鍵信息,幫助用戶快速達到目的。



          那么,如何構建?


          1.明確頁面目的與需求主次

          拿到原型,明確頁面目的和需求的1、2、3層級,并理解消化。開啟設計師的隱形技能:根據一句話或者一個詞,在大腦開始構建畫面布局。在構思階段,建議同時瀏覽同類型UI設計以及交互布局,在找參考的過程中,結合自身APP的頁面目的一起構思,并在紙上繪出可行性方案。 


          由于,APP是為人服務。那么我們需要知道,人眼瀏覽習慣模式的科學依據。



          2.人眼瀏覽模式

          曾有一數據顯示:如果在3S內無法吸引用戶,你將流失這個用戶。如今我們所在的時代快節奏、碎片化,用戶的日常瀏覽是“掃描”而非“閱讀”。所以,了解人眼瀏覽習慣,變得十分重要。

          人眼瀏覽習慣有:F型;Z型;其他;


          F型瀏覽模式

          Z型瀏覽模式

          還有,其他瀏覽模式,海哥HMI人機交互在他一篇文中《用戶是怎么閱讀的?尼爾森F模型》提到:


          蛋糕模式:眼睛只關注標題和副標題時,水平一層一層;
          斑點模式:跳過大塊的文本和掃描,尋找特定的東西,比如按鈕,數字;
          標記模式:輕掃頁面時,將眼睛聚焦在一個地方,呈圓形分布。(移動端會常發生);
          承諾模式:通篇閱讀,用戶確實充滿動力和興趣。


          在明白人眼視線流程后,我們開始運用視覺手段,吸引用戶來看我們想給他看的內容,并按照我們的預想順序,依次閱讀。



          3.設計手法


          a.對比

          對比,讓視覺有輕重,用戶看起來不累。需要強調的信息放大,沒那么重要的東西縮小。如果同一層級的模塊,通過顏色或者樣式的變化來表達。如:字體大小對比,顏色對比;模塊大小對比;圖片大小對比等。 


          b.字重

          字體千千萬形狀各不相同,然而他們都有著相似之處:字重的大與小。在同一字號大小下,字重大的筆畫,以面構成,會比字重小的,更具視覺沖擊力。

          需要強調的信息,字號變大,字體加粗,這樣就能區分主與次,建立更易讀的視覺層級。 


          c.樣式

          為了各個模塊間的和諧組合和視覺上的凸顯與美觀,我們需要靈活運用各種樣式表達??ㄆ队埃恍螤睿徊馁|等; 


          d.模塊化整合與留白

          同一類別信息,模塊化整合。便于用戶瀏覽操作,視覺上不零散,整體美觀。多模塊化的組合,注意留白以及頁面的節奏輕重。 


          以上要點,要根據實際情況靈活巧妙運用。在做的過程中,通過Mirror工具實時查看頁面效果,不斷改進,加強表達。


          總結


          宗白華說過:“一切藝術都趨向音樂”。確切說一切“廣義的”藝術都趨向于音樂狀態。優秀的UI視覺層級表達,就如音樂一樣有節奏變化,波浪起伏,是一種視覺享受。無論是平面還是UI,視覺層級,需要像“黃金分割原理”一樣,是內化進設計師的身體里一個元素。多多實戰練習,不需要死記硬背,就會刻在我們的大腦深處。 

          文章來源:站酷

          全球都在用的Booking,是如何做設計改版升級的?

          資深UI設計者

          每一次學習改版案例,不僅僅只是去看在視覺層面的變化,更多的應該是要學習到作者改版背后的思考。為什么要這么改,原因是什么,目的又是什么,怎么做,有哪些限制等等,有很多東西要去思考。所以,帶著問題并結合自己實際中所做的項目來看案例,應該會是一個很有收獲的過程。

          項目背景

          Booking.com繽客 是一家荷蘭初創公司,并已經發展成為全球最大的旅游電子商務公司之一。
          在Booking上,旅客可以選擇世界上任何一處的住宿地點,包括公寓,度假酒店,民宿,五星級豪華度假村,樹屋甚至冰屋等等。每天,通過平臺預訂的房間數超過155萬。無論是商務旅行還是休閑旅行,人們都可以快速輕松地預訂到理想的住處。

          競品分析

          自從Booking發布以來,許多競爭對手都采用類似的商業模式瘋狂跟進,搶占市場,并且在某些方面比Booking本身做的還好。

          在調研的前期階段,我去搜集了一些競爭對手和類似的平臺,分析UI,用戶體驗,用戶地圖,信息架構和關鍵功能。但是我并不會花太多時間過于深入的去分析這些產品,因為我希望將重點放在Booking這個產品本身的訴求上。

          使用場景

          在之前的調研過程中,我發現了許多不同的使用場景,經過匯總歸集,我集中關注以下3個場景:

          • 場景1:用戶知道其行程的日期和目的地(默認場景)
          • 場景2:用戶明確了日期但對其旅行的目的地不清楚
          • 場景3:用戶知道目的地但不確定其旅行日期

          典型用戶

          在進一步的研究中,我明確了4位具有不同需求和不同目標的典型用戶,這些數據對于改善不同用戶的體驗非常有用。

          這個分析的目的是通過梳理最佳的用戶流程并提升產品體驗,來為不同需求的用戶提供最好的用戶體驗。

          △ 數據來源:在線研究和用戶訪談(30個用戶樣本)

          用戶反饋

          收集用戶評論,從中我收到了很多有價值的反饋,這些評論中沒有特別明確指出是可用性或功能性的問題。我將這些反饋分為4類(譯者注:對反饋的問題進行提煉整理):

          • 預訂被取消
          • App的Bug
          • 投訴的處理效率
          • 反饋的進度

          毫無疑問,最相關的是預訂被取消的問題。太多用戶會注意到不合理的費用或與房間的主人取得聯系時遇到困難。

          用戶訪談

          基于30個用戶樣本,我試圖獲得進一步的用戶反饋,從中注意到以下的幾點事實:

          • 與其他平臺相比,booking的平均價格通常更高
          • 產品過于突出好評,用戶很難發現一些真實的差評
          • 當房屋主人接收到用戶的回復時聯系用戶也很困難

          我想引用一段話,來總結這里面遇到的問題,這段話也蠻有意思的,它說的是:

          「與其他應用比較來看,套路顯得有點多,會讓你覺得一切看起來都蠻劃算,總是想多賣一些東西給你?!?

          用戶痛點

          總結之前的分析,我提出了以下幾點觀點:

          • 沒有一個完美的解決方案能夠滿足所有用戶,用戶需要盡可能多的掌握有用信息。
          • 沒有的功能沒有太多考慮到個性化需求。
          • 可以改進UI并使用戶更加集中于他的目標,而不是完全「以推銷為中心」
          • 優化用戶與房東之間的聯系問題

          解決方案

          從用戶痛點出發,嘗試找到合適的解決方案,來提升產品體驗。

          1. 主頁

          總的來說,我對首頁進行了大手術。主頁的搜索功能已經完全重新設計,減少過多的干擾信息。

          導航:我設計了一個新的導航欄,剝離出「已保存」功能,這樣用戶就可以快速找到自己所收藏的商品。此外,我也優化了「交易」的模塊,后面我會詳細的說說這塊的改動思路。

          其它功能 :至于之前的版本,我保留了搜索和相關推薦的功能,重新設計界面以改善UI的可用性。

          2. 社交功能

          如今,社交網絡在用戶的生活中扮演重要的角色,那沒理由在booking中做的這么差。我搞了一個新功能,允許用戶關聯自己的好友并查看他們的選擇,包括他們的評價(喜歡/不喜歡)。我已將此功能放置到主頁的下方,因為我希望在將其推廣到其他模塊之前收集更多有關它的數據。

          3. 搜索功能

          把這個功能分解為多個步驟。在輸入第一個詞后,即使沒有指定日期或其他信息,也能顯示相匹配的酒店。此外,我也加入了語音搜索,使搜索更容易?;谥拔覍Σ煌脩艚巧亩x,搜索的結果將根據最后的信息進行推薦:

          • 1名成人 ——背包客 ——酒店
          • 2名成人——度假夫婦——酒店,賓館或B&B(某種酒店形式)
          • 2名成人+兒童——家庭——民宿公寓或酒店
          • 1名成人+商務選擇——商人——酒店

          4. 列表頁面

          列表頁針對易用性方面做了整體的優化:

          • 我將篩選功能從3個按鈕更改為2個按鈕以減少用戶的操作步驟——將它放在頁面底部,方便使用
          • 我添加了標簽功能來更好的區分屬性類型
          • 在第一時間向用戶展示物業的主要設施特點。注意:根據不同的用戶,可以智能突出顯示不同人正在尋找的不同信息。
          • 我將報價的方式轉換為「單晚」而不是「總價」,以便在不同商品之間進行比較

          5. 詳情頁

          我列出許多可以在詳情頁面中加入的修改。將總價格突出顯示,以免有些隱形消費用戶可能會被忽略。

          增強了一個與評論相關的次要功能,允許用戶通過不同標簽篩選它們。

          6. 交易功能

          在優化開始時,我確定了操作場景2—— 「用戶還不知道自己的目的地」作為優化方向。為了提供更好的用戶體驗,我增加了一個新的功能,用戶可以在其中找到不同目的地的區間。利用篩選功能,用戶可以選擇最適合其需求的區間(區間 – 大陸 – 國家等…)

          動效原型

          最后,我還設計了一個整個項目的動效原型,把之前所有重設計的頁面串聯起來。

          結語

          由于時間限制,分析和結果是基于我的個人經驗和少量數據,需要進行深入分析和其他測試,以便完善和驗證解決方案。

          文章來源:優設網

          交互控件科普系列! Sheet 的常見樣式和設計注意事項總結

          資深UI設計者

          還在頻繁地使用彈窗對用戶展示重要提示嗎?明知這樣有損體驗卻沒有更好的選擇嗎?那么不妨來試試干擾度更低,卻依然可以用于重要提示的 Sheet 控件吧。

          什么是Sheets

          Sheets 控件并非彈窗,通常會被熟稱為「浮層」或「浮窗」。

          該控件在 iOS 和 Android 系統規范中都有相關定義,屬于多才多藝的控件,可以用于給予信息提示,也可用于展示更多的拓展信息。

          從用于提示的角度來看,Sheets 控件和 Dialogs 控件的相同點和不同點在哪里呢?

          1. 共同點

          模態化

          二者都可以設置模態,當模態控件顯示時,頁面背景會顯示深色遮罩,并立即打斷用戶當前操作。

          承載操作和信息

          二者都可以承載豐富的操作和信息,支持嵌入列表、選擇器等控件及圖片、文本信息。

          2. 不同點

          觸發方式不同

          Dialog 可以不通過用戶操作而自動觸發,Sheet 必須通過用戶操作才可以觸發顯示,因此用戶對 Sheet 的顯示會更有預期。

          關閉方式不同

          Dialog 的關閉方式較少,通常會要求用戶進行選項操作后才可關閉;Sheet 的關閉方式較多,對于用戶而言有更豐富的選擇權。

          因此綜上所述,我們可以發現,Sheet 對比 Dialog 的優勢在于,它的顯示會更符合用戶的預期,它的干擾層度也會低于Dialog(因為更易關閉)。

          • Sheets 在 Google Material design 規范中被分為了 Bottom sheest 和 Side sheets 兩類;
          • 在 iOS Human Interface Guidelines 中被分為了 Action sheets 和 Activity views 兩類。

          下面就由我來依次詳解其特性和玩法吧。

          Bottom sheets 底部浮窗

          專屬于 Android 的 Sheets 控件。

          1. 使用場景

          用于補充內容相關的更多信息(非模態)、提供可交互的菜單或對話(模態)或其它關鍵功能/任務的拓展。

          2. 注意事項
          • Bottom sheet 通常用于 Android 豎屏場景,在 Android 橫屏場景建議使用 Side sheet。
          • 在 iOS 中不建議使用 Bottom sheet,建議使用原生的 Action sheets 或 Activity views。
          3. 樣式類型

          菜單樣式

          可嵌套 Menus,展示多個選項內容。

          宮格樣式

          可使用宮格布局,展示多個選項內容。

          迷你樣式(非模態)

          一個非模態底部浮窗可被設置固定展示在頁面底部,用戶可以隨時用它來對其它功能/任務進行快捷操作,如進入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。

          4. 模態/非模態

          非模態浮窗:如左下圖所示,非模態浮窗與內容保持在同一層級,用戶可同時對內容和浮窗進行操作。

          模態浮窗:如右下圖所示,模態浮窗層級高于內容,背景深色顯示遮罩,用戶僅能對浮窗進行操作。

          5. 顯示與消失

          顯示

          浮窗顯示時從底部向上滑入,非模態浮窗顯示時不會打斷用戶操作,模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。

          消失

          浮窗消失時會向底部滑出。

          模態浮窗在以下情況下會消失:

          • 用戶觸發浮窗上的對應操作(自定義);
          • 用戶點擊浮窗外的區域;
          • 用戶下拉浮窗達到收起閾值后(自定義);
          • 用戶點擊 Android 系統返回鍵。

          非模態浮窗在以下情況下會消失:用戶選中浮窗上的對應按鈕(自定義)。

          6. 支持高度延伸

          當浮窗底部仍有未顯示的內容時,可設置通過滑動或拖動浮窗來使其變為全屏展示,并在頂部顯示 Toolbar 來展示關閉/收起操作。

          7. 支持深層鏈接

          模態浮窗中可以展示其它應用的深層鏈接內容或操作,譬如調用 Google 翻譯。

          8. 范例

          抖音的評論功能使用的是模態 Bottom sheet;百度地圖的路線切換功能使用的是非模態 Bottom sheet。

          Side sheets 側邊浮窗

          專屬于 Android 的 Sheets 控件。

          1. 使用場景

          用于補充內容相關的更多信息(非模態)或提供可交互的列表信息(模態)。

          2. 注意事項
          • Bottom sheet 通常用于 Android 豎屏場景,在 Android 橫屏場景建議使用 Side sheet。
          • 在 iOS 中不建議使用 Bottom sheet,建議使用原生的 Action sheet 或 Activity views。
          3. 樣式類型

          菜單樣式:可嵌套 Menus,展示多個選項內容。

          宮格樣式:可使用宮格布局,展示多個選項內容。

          4. 模態/非模態

          如左下圖所示,非模態浮窗與內容保持在同一層級,用戶可同時對內容和浮窗進行操作(在移動端較少使用,通常用于 PC 端)。

          如右下圖所示,模態浮窗層級高于內容,背景深色顯示遮罩,用戶僅能對浮窗進行操作。

          5. 顯示與消失

          顯示

          浮窗顯示時從左/右邊緣滑入,非模態浮窗顯示時不會打斷用戶操作,模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。

          消失

          浮窗消失時會向左/右邊緣滑出。

          模態浮窗在以下情況下會消失:

          • 用戶觸發浮窗上的對應操作(自定義);
          • 用戶點擊浮窗外的區域;
          • 用戶側拉浮窗達到收起閾值后(自定義);
          • 用戶點擊 Android 系統返回鍵。

          非模態浮窗在以下情況下會消失:用戶選中浮窗上的對應按鈕(自定義)。

          6. 滑動說明

          支持上下滑動,不支持左右滑動。

          7. 范例

          淘寶的篩選功能使用的是 Side sheet。

          Action sheets 操作浮窗

          專屬于 iOS 的 Sheets 控件。

          1. 使用場景

          用于呈現一組與當前操作相關的選項,如啟動某個任務,或者確認是否開始執行某個可能具有破壞性的操作。

          2. 注意事項

          在 Android 中不建議使用 Action sheet,建議使用原生的 Bottom sheet 或 Simple dialog。

          3. 樣式類型

          如下所示,支持單個或多個操作的展示,以及說明文案的展示:

          4. 顯示與消失

          顯示

          浮窗顯示時從底部向上滑入,會顯示深色遮罩以打斷用戶操作。

          消失

          浮窗消失時會向底部滑出。會在以下情況消失:

          • 用戶觸發浮窗上的對應操作(自定義);
          • 用戶點擊浮窗外的區域;
          • 用戶點擊浮窗「取消」按鈕。
          5. 顯示位置

          豎屏時顯示在頁面底部,橫屏是居中顯示在頁面底部。

          6. 范例

          微信的選擇朋友圈發布類型及清除聊天記錄的二次確認,都是使用的 Action sheet。

          Activity views 活動浮窗

          專屬于 iOS 的 Sheets 控件。

          1. 使用場景

          用于呈現一組與當前操作相關的選項表,如復制、收藏或分享。

          2. 注意事項

          在 Android 中不建議使用 Activity views,建議使用原生的 Bottom sheet。

          3. 樣式類型

          列表樣式

          宮格樣式

          混合樣式

          4. 顯示與消失

          顯示

          浮窗顯示時從底部向上滑入,會顯示深色遮罩以打斷用戶操作。

          消失

          浮窗消失時會向底部滑出。會在以下情況消失:

          • 用戶觸發浮窗上的對應操作(自定義);
          • 用戶點擊浮窗外的區域;
          • 用戶下拉浮窗達到收起閾值后(自定義)。
          5. 顯示位置

          豎屏時顯示在頁面底部,橫屏是居中顯示在頁面底部。

          6. 支持高度延伸

          當面板底部仍有未顯示的內容時,可設置通過滑動或拖動面板來使其高度進行延伸,從而展示更多信息。

          7. 范例

          愛奇藝的分享功能和泡泡圈選擇發布內容類型,都使用的是 Activity view。

          用法總結

          建議針對非系統級或業務級的重要提示,使用 Sheets 控件進行提示;Dialogs 控件僅用于最重要的信息提示才算是「好鋼用在了刀刃上」。

          另外在調用原生 Sheets 組件時,記得分端的差異性。

          文章來源:優設網

          iOS 13 隱秘的細節②:原生APP的細節變化·上

          ui設計分享達人

          拆解iOS 13原生APP的細節變化,及其“影響”。

          undefined


          0.前言

          在上一篇《iOS 13全局組件》中,主要講述了新版系統中的分段控件、Switch、Sheet彈窗、Context Menu等組件的細化及影響。

          從這篇開始,開始講述iOS 13原生APP的設計細節,以及對設計師的影響。


          開始前,依舊先明確下文中用到的機型和系統版本:

          設備1:iPhone 7,iOS 12.4

          設備2:iPhone X,iOS 12.2

          設備3:iPhone 6S,iOS 13 Developer beta 6


          -


          下面開始原生APP的相關內容:




          2.1 計時器

          iPhone的計時器是個特別好用的功能。

          日常生活中,類似“小睡一會”、“蒸煮東西”、“女友敷面膜”這些場景都能用到計時器。過去4年,我平均每天使用8次以上計時器。


          雖然iPhone的計時器已經非常好用,但在某些場景下,尚有不足:

          比如,設置一個80分鐘的計時,中途看時間,雖然屏幕上顯示還剩28分鐘。但卻無法直觀掌握計時的進度(百分比)。有時睡迷糊了,忘了最初設置的總時長,導致不清楚睡了多長時間...

          在iOS 13新版計時器中,Apple做了一些調整,很好的解決了上述問題:


          變化1:新增圓形的進度條,如下圖:

          進度條可以方便用戶掌握計時進度。


          變化2:新增“到點”的時間(幾點幾分)

          用戶不用自己換算,就能知道計時結束的具體時間是幾點幾分。


          變化3:鈴聲入口位置下移:

          一般而言,用戶在使用計時器時,通常的操作是:第一步:選擇時長、第二步:點擊開始。

          并不會出現調整鈴聲這步操作,可以說,過去鈴聲放在中間的布局就很雞肋。要么礙事、要么被忽略...

          PS:過去四年,我從未察覺到有設置鈴聲的功能。囧

          UI 工作流程指南:切圖標注

          資深UI設計者

          當界面設計定稿之后,設計師需要對圖標進行切片,提供給開發工程師。切圖與標注是為了能夠滿足開發人員對于效果圖的高度還原需求,直接影響到工程師對設計效果的還原度,并且也是設計師重要的輸出物之一。合適、精準的切圖可以最大限度地還原設計圖,起到事半功倍的效果。

          通常我們只需要對 icon 與圖片進行切圖即可,文字、線條和一些標準的幾何形狀是不需要切圖的,例如搜索框只需要在標注中描述它的尺寸、圓角大小、背景色值、不透明度即可,開發工程師可以用代碼實現這種效果。

          切圖基本規范

          1. 切圖的尺寸必須為偶數;
          2. 同一模塊內,切圖大小應保持一致;
          3. 如果有背景,盡量用平鋪的背景圖案來設計(減少程序體積);
          4. 可點擊的部件要把相關狀態都切圖輸出,比如:正常狀態、點擊狀態、不可點擊狀態;
          5. 輸出的切圖應當盡可能的壓縮大小,以降低 APP 的總大小,提升用戶使用時的加載速度(推薦在線壓縮:https://tinypng.com);
          6. 所有的變形字體把它當成 icon 來切;
          7. 切圖輸出格式:png-24;
          8. 重復的東西只切一個。

          切圖輸出類型

          1. 圖標切圖輸出

          桌面圖標切圖輸出

          App 的桌面圖標會被運用在很多不同的地方,比如手機桌面、APP store、手機的設置列表,所以 app 桌面圖標需要很多個不同尺寸的切圖輸出。兩個平臺對應的桌面圖標設計輸出尺寸也不盡相同,在輸出的時候要把雙平臺的尺寸全部輸出切圖。桌面圖標切圖只需要提供直角的圖標切圖即可,手機系統會自動生成圓角效果。

          系統圖標切圖輸出

          一套圖適配雙平臺:iOS平臺(iPhone 6plus版本除外)和安卓平臺公用 44*44px 切圖素材,即可實現一套切圖適配兩個平臺的開發。

          適配大屏幕:為了適配 iPhone 6plus、iPhone 7plus,單獨切一套比原有 44*44px 切圖大 1.5 倍的切圖,即 66*66px 大小的切圖。

          APP內功能圖標

          圖標是可以有留白區域的,建議圖標尺寸盡量不要過多。

          2. 圖片類切圖輸出

          圖片類切圖主要是指啟動頁、新手引導頁、默認提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的尺寸大小,以便于工程師開發使用。另外一般這些切圖的文件較大,在切圖過程中需要控制切圖文件的大小。

          全屏類切圖

          局部類切圖

          3. 動效元素切圖

          動效元素切圖一般是指在 app 中加載動效所需要的切圖元素。

          gif 動圖切圖一般分為三種:

          一是只需要給到 gif 圖動效的部分即可。

          △ 城易logo

          二是,導出序列圖片壓縮打包給開發人員。

          三是導出 json 。

          Airbnb 開發了一款動效神器:Lottie,這是一個將 After Effects 動畫提供給任意一個 iOS,macOS,Android 還有 React Native 原生 APP 的文件庫。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件,以 JSON 文件的形式進行輸出。Lottie 通過 JSON 格式下載動畫數據并實時提供給開發者。

          相關鏈接

          如何導出json動畫文件

          打開 AE,首選項 – 常規,將允許腳本寫入文件和訪問網絡選項勾選上。

          窗口 – 擴展 – Bodymovin,選擇好合成和保存路徑后,點擊 Render 導出 data.jason 文件,再把該文件交給 iOS 開發 (其他同理),具體如下圖:

          這里設置選擇 Demo ,可以導出 html 文件,在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉換成圖形形狀。

          導出文件:

          在線測試結果:可以直接上傳 json 文件,可以提前知道動畫是否有問題,然后再交付給開發。

          網址:https://nicolasjengler.github.io/bodymovins-json-tester/dist/

          切圖命名規范

          1. 通用切圖命名:組件_類別_功能_狀態@2x.png

          舉例:tabbar_icon_home_default@2x.png(對應中文:標簽欄_圖標_主頁_默認@2x.png)

          2. 模塊特有切圖命名:模塊_類別_功能_狀態@2x.png

          舉例:bill_icon_search_pressed@2x.png(對應的中文為:賬單_圖標_搜索_ 默認@2x.png)

          3. 常用英文單詞表

          標注軟件

          現如今市場已有很多設計交互的平臺,如:國內的墨刀、藍湖、摹客等,國外的 Figma、invision 等,各自都有優秀的特點,既滿足交互需求,又能有標注切圖功能,選擇適合自己團隊的工具與開發一起協作即可。

          1. Figma

          支持 sketch 導入,Figma 也像 Zeplin 一樣,標注頁面間距與尺寸,并且支持各種圖片格式、尺寸、形態輸出,開發人員也有相應的代碼可用參考,分享鏈接即可。

          2. 墨刀

          支持 sketch 上傳頁面至客戶端,分享鏈接即可。支持多種切圖格式下載,開發人員也有相應的代碼可用參考,操作簡單清晰。

          3. 藍湖

          支持軟件 PS、sketch 上傳在線標注,在設計源文件上切好圖片,開發人員可在線上下載,且有相應的代碼可用參考,分享鏈接即可。

          文章來源:優設

          設計規范制作流程

          資深UI設計者

           

          產品發展日趨平穩時,產品定位和品牌形象已進入穩定狀態,參與設計的人越來越多,設計的統一性和效率的問題也漸漸顯現。因此,為了保證平臺設計統一性,提升團隊工作效率,打磨細節體驗,就需要我們定義和整理設計規范。

          確定規范內容

          UI 設計中,設計規范是一個關鍵步驟。知名大廠基本上都有一套自己的完整規范體系,在整理設計規范時,以大平臺規范體系作為參考,針對產品自身情況增刪,整理出我們自己所需要的規范內容,能有效地避免規范內容遺漏缺失。

          拓展鏈接:各大官網設計規范集合

          截屏2024-09-20 上午11.36.39.png

          色彩規范

          顏色是設計中最重要的元素,顏色的運用與搭配決定設計的品質感。在 UI 設計中,顏色的使用規范主要在于:品牌主色、文本顏色、界面顏色(背景色、線框色)等。

           

          字體規范

          不同的字體氣質不一樣,并且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字體的設計效果,然后在設計規范中注明。

           

          圖標規范

          在 UI 界面中,具有標識性質的圖形就是圖標。作為 UI 設計中重要的設計模塊,產品的每個頁面中都有可能存在圖標。設計規范中,圖標一般按照用途分為兩類:應用圖標、功能圖標。

          應用圖標:各種應用程序的識別標志,在應用商店里下載的一些應用程序的標志。

           

          功能圖標:規范中最好標明圖標格式與使用方式。比如 Web 設計,圖片可以使用 iconfont 管理,可生成代碼交付給前端開發;如果是原生 APP,那么需要標注圖標導出格式與尺寸。

           

          圖片規范

          圖片作為界面設計的重要組成部分,需要標明尺寸規范,分為不同用途的種類。

           

          設計尺寸&柵格系統

          設計尺寸,是指進行設計時,選擇的畫板尺寸。例如是 750*1334,還是 375*667,每個公司設計的基準都不一樣,所以設計尺寸并沒有規定只能用某一個尺寸,我們在設計時,使用的 1 倍圖為基準進行設計的,基準尺寸為 375*667。

          柵格系統,是運用固定的格子設計版面布局,在 UI 設計和前端開發中被廣泛應用的一套體系。在設計尺寸中提到柵格系統,是因為現在的設計基本都是一稿適配多端,而柵格系統能很好的解決這個問題。

          △ Christie Tang

          柵格系統拓展鏈接:《看不懂不會用的柵格系統,這篇幫你徹底掌握它!》

          界面布局

          布局是頁面構成的前提,是后續展開交互和視覺設計的基礎。設計規范中可以提供常用的布局模板來保證同類產品間的一致性,設計者在選擇布局之前,需要注意以下幾點原則:

          • 明確用戶在此場景中完成的主要任務和需獲取的決策信息。
          • 明確決策信息和操作的優先級及內容特點,選擇合理布局。

           

          △部分布局類型展示

          控件規范

          控件是指產品界面中可操作的部件,與組件是有一些區別的??丶g為 Control,組件翻譯為 Component。

          通俗的解釋說法就是組件為多個元素組合而成,控件為單一元素組合而成。

          常用的 UI 控件(Control):按鈕、輸入框、下拉列表、下拉菜單、單選框、復選框、選項卡、搜索框、分頁、切換按鈕、步進器、進度條、角標等。

          以下列舉一些我們在 APP 設計規范中整理的內容。

          1. 按鈕

          按鈕有 5 個狀態:正常、點擊、懸停、加載、禁用。需要在規范中分別羅列出這五個狀態,標注上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度,按鈕文本大小、顏色值。如果是圖標按鈕的話,除了上述參數值以外,還需要標注 icon 和按鈕文本之間的間距,icon 圖標的大小。

           

          2. 輸入框

          用于單行信息錄入文字上下居中顯示,支持鍵盤錄入和剪切板輸入文本,對特定格式的文本進行處理:密碼隱藏顯示、身份證、卡號分段顯示,標注寬高。

           

          3. 選擇

          選擇可分為單選與多選,并且也有五種不同狀態:未選擇、已選中、未選懸停、已選失效、未選失效項。規范中需展示出所有效果狀態。

           

          4. 選項卡

          用于讓用戶在不同的視圖中進行切換。標簽數量,一般是 2-5 個;其中,標簽中的文案需要精簡,一般是 2-4 個字。每個標簽所占的寬度可適當調整。

           

          5. 滑動開關

          滑動開關有兩個互斥的選項(例如開/關、是/否、啟動/禁止),它是用來打開或者關閉選項的控件。選擇其中一個選項會立即執行操作。

           

          6. 進度條

          用于向用戶展示步驟的步數以及當前所處的進程。

           

          7. 角標

          用于聚合型的消息提示,一般出現在通知圖標或頭像的右上角,通過醒目的視覺形式吸引用戶眼球。

           

          組件規范

          常用的 UI 組件(Component):表格、對話框、提示條、氣泡提示、日期選擇器、多級選擇器、標簽輸入框、組合框、上傳等。△ Ant design 移動組件

          在 skecth 中設計時,使用 Symbol 創建的組件,在后期整理時,可以節省許多的時間。

          推薦閱讀:《Sketch 進階教程!利用Symbol 建立一套設計規范組件庫?》

          當然,Figma 也同樣具備這樣的能力,你所創建的組件都存在于 Assets 中。

           

          缺省頁面

          • 空狀態頁面:顯示對應的頁面空狀態的圖標,增加相應的引導按鈕。
          • 無網絡狀態:在沒有連接到網絡時的提示頁面。
          • 404&505頁面:發生未知錯誤時的頁面。

           

          規范優先級

          了解規范的內容有哪些之后,我們需要確認的是規范優先級,規范內容龐大復雜,基礎的、必要的、高性價比的放在第一個版本中,復雜的往后放,隨著產品的迭代,規范才會越來越完整。

           

          一個好的規范應該是的、簡單易懂的。具體執行時,我們應該確保分類合理、規范本身保持一致、布局排版易讀,來提升設計師查閱的效率;確保定義清晰、描述準確、場景完備,來幫助設計師理解和使用。但值得注意的是,設計規范并不是「圣經」,不要因為規范而限制了自己的思維,當發現規范有問題的時候,要及時去修正,而不是做了一次之后,一直沿用,永不修改。

          以下是藍藍設計(北京蘭亭妙微)給中國移動研究院設計三套軟件,制作的部分UI規范。

           

           

           

           

           

           

           

           

           

          藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          WechatIMG27.jpg

          關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發

          如何理解設計中的統一和打破?

          資深UI設計者

          在日常的設計工作中,我們也許會遇到這樣的情況:作品缺少變化導致枯燥乏味;而變化太多又會顯得雜亂、沒有章法;這就對應了設計中統一和打破的關系,那么為什么統一和打破這兩種看似矛盾的關系,卻總是能同時出現在我們的設計作品中?如何更好的理解二者之間的關系并運用到日常的工作中去?希望本期內容能對大家有所幫助。





          在設計中統一并不是所有元素1:1的一模一樣,它可以體現在:板式、配色、元素屬性、處理手法等等,那么為什么要統一?統一的目的是什么?下面我們具體來說:


          統一:讓作品更整體

          作品不夠整體,會給人一種信息散亂、沒有視覺焦點的感受;而將視覺元素進行“統一”,就能很好的解決這一現象,這無關乎技法的熟練與否,在我們的日常生活中就隨處可見:比如:我們的書本排版,會有統一的頁眉、頁腳、段落留白、文字間距等等,其目的就有讓文本內容在視覺感受上更像一個整體;下面我們看個設計中的案例:



          如圖所示,上側案例給人的感覺比較雜亂,不夠整體,原因在于:元素與元素之間的關聯性不強,且視覺形態及色彩屬性各不相同,導致整體各元素之間的呼應不夠明顯,所以會給人一種不夠整體甚至雜亂的感覺。而下側案例通過在形態、色彩、屬性等方面的統一化處理,加強了每個單獨視覺元素之間的呼應,使得畫面更整體!



          統一:讓作品更整潔

          不管是在設計工作還是日常生活中,干凈整潔的東西都是更易于大眾接受的,在設計工作中,做好統一是最重要的一環,在此前提下,才能做好另一環“打破”!所以當設計作品出現亂的現象時,我們需要對其視覺元素進行規整及相應的處理,比如:

          通過左右對比我們發現,很明顯右側給人的感覺雜亂無章,而左側干凈整潔、有條理,原因在于:


          ①、元素與元素之間并不是相互孤立的,而是在視覺上存在著一定的呼應關系,相互關聯,這樣畫面整體性也會更強。

          ②、視覺上將原本各不相同的形態以及色彩重新進行了統一處理,目的是通過減少視覺元素形態及色彩變化而進一步提升畫面的整潔。

          ③、視覺元素在物理關系以及屬性上也做到了統一,即統一元素與元素之間的間隔、形態、顏色等等。


          下面我們再看組案例:


          上圖中,相比而言案例二比案例一給人的感覺更整潔、干凈、也更像一個整體,原因在于:案例二中配圖的屬性做到了視覺上的統一,具體體現在:①、圖片的顏色屬性:統一藍色色相屬性;②、圖片的內容屬性:統一高端、仰視角度建筑屬性;③、圖片的留白屬性:每一幅配圖在視覺上都會有一些留白性質的屬性,給人的感覺很舒服。


          所以:出于讓整體更整潔的統一,大多是在做減法或者合并的過程,目的是減少一些造成視覺整體雜亂的因素,比如:色彩雜亂、圖形雜亂、文字形式雜亂、視角角度雜亂、以及過多無關聯的視覺元素等等,統一的過程也是整合視覺元素的過程。


          注意:設計中的統一并不是絕對的,而是相對的,如果所有的視覺元素、屬性都嚴格按照統一化去處理,那么就會滋生另一個問題:整體視覺太過平滑、缺少變化甚至會給人一種單調、枯燥的感受。那么在強調統一的同時,“打破”就是為了解決這難題的。





          在日常設計工作中,打破是建立在統一基礎之上的操作,那么既然已經做好了統一,為什么還要打破呢?打破能為作品帶來什么?下面我們具體分析:



          打破:提升作品視覺層次感

          當作品過于統一時,很容易會給人一種單調、乏味、缺少層次變化的視覺感受,而在統一的基礎上做一定的打破操作,就能起到很好的解決這一現象的作用,那么什么是打破?舉幾個簡單的例子:


          如上圖所示,圖①就屬于過于統一的表現形式,很明顯整體平淡、乏味,缺少視覺變化;而其他都是在統一的基礎上做了一些“打破”的處理,只不過各自切入點不同,下面我們逐一分析:


          圖②:切入點是打破了一成不變的排列形式。

          圖③:切入點是打破了一成不變的配色形式。

          圖④:切入點是打破了完全統一的配色形式以及形態。

          圖⑤:切入點是打破了統一的元素屬性值。

          圖⑥:切入點是打破了統一的元素屬性。


          以上這些雖然切入點都各不相同,但是目的都是通過打破過于統一的視覺現象,增加整體視覺變化程度,從而提升整體視覺層次感,也打破了呆板、乏味,增添了一些視覺上的跳躍性。



          下面我們再看個設計中的例子:

          如圖所示,上側案例屬于很好的貫徹整體統一的理念,而下側案例則是打破了固有的統一、卻也保留了大部分統一的屬性,通過兩者對比我們發現,其實單只看這一組案例:兩種表現形式都是可取的,只不過相比而言下側案例給人的視覺感受變化更多、層次感更強,所以相比而言給人留下的視覺印象更深刻。


          上面說兩種表現形式都可取的前提是:單單只看這組案例,但是很顯然這組案例只是頁面的局部,如果整體頁面都如上側案例那樣嚴格的按照統一進行,那么頁面整體就會過于平淡、缺少視覺層次感、甚至主次不分明。



          打破:劃分視覺主次

          在現實生活中,具有差異化的人或實物會很容易引起周圍人的注意,甚至印象深刻、難以忘懷。在設計中亦是如此!其具體表現形式參考上圖①-⑥,因為打破過于統一就是在營造具有差異化的視覺元素,從而會很容易在視覺上形成先后、主次之分,所以就起到了一定的劃分視覺主次的作用。


          注意:打破也不可盲目的進行,過于統一會單調、乏味、重復感強;而過于追求差異化也會出現雜亂、沒有章法的視覺現象。所以一定要結合實際情況靈活運用。一幅作品中大多情況下:打破的次數要少于統一,即作品整體絕大不多保留整體統一的屬性,通過局部打破處理提升整體出彩度,這樣容易給人一種干凈、整潔且不失視覺變化、層次感的感受!


          不妨找一些優秀的網頁分析一下,是否很多優秀的設計作品都符合這一規律?





          綜上所述,統一是為了讓作品有視覺條理性、更整體,而打破則是增加視覺層次變化,讓作品更出彩!統一和打破看似是兩個矛盾的名詞,實則在設計中是相輔相成的作用!不管是統一還是打破,兩者的切入點都是相似的,一般體現在:形態、屬性、色彩、大小、位置關系、留白等等。但是無論如何統一都是打破的前提,如果作品整體性都不夠,再一味的追求打破關系,只會讓作品越做越亂。所以一定要先做好統一,其次才是進行打破、改變。當然文中提到的只是一部分,希望大家能活學活用、舉一反三!

          文章來源:站酷

          Material Design暗色主題設計指南

          ui設計分享達人


          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          本文是我學習Material Design設計規范的學習筆記和個人理解,希望對大家設計暗色主題有所幫助。

          undefined


          暗色主題是什么?

          最近,Material Design中新增了關于暗色主題的設計規范:暗色主題(Dark theme)是指在UI界面中使用大面積的深色來構成界面的一種設計,它是產品默認主題的一種補充。很多朋友可能認為暗色主題就是現在新聞客戶端的“夜間模式”,這個說法其實并不正確。因為暗色主題是可以由用戶自己選擇是否開啟的,它的使用場景并不局限于夜晚。很多用戶偏愛暗色模式是因為暗色更“酷”。比如前段時間蘋果電腦增加了類似的“黑暗模式”(Dark Mode)的設計,大受用戶的喜愛。用戶沉迷使用暗色主題,而不是以前灰色的默認設計。暗色主題不但顏值高,而且可以在保持色彩對比度的同時降低設備屏幕的亮度,還可以根據當前照明條件自動調節亮度,這有助于改善視覺疲勞。除此之外,暗色主題還可以節省設備的電量,可謂是一舉多得。那么,暗色模式都有什么樣的規范呢?

           

          undefined 

          首先,暗色模式用深色視覺元素來構成界面的UI

           

          undefined 

          使用深灰色進行設計

          在設計暗色主題的時候,我們應該使用深灰色來進行界面設計。黑色由于太過于深邃,無法讓用戶感知當前界面的高度和空間感,而不同級別的灰色就可以暗示給用戶這些信息。

           

           undefined

          使用強調色彩突出組件

          在暗色主題下,我們可以使用少量的強調色彩來凸顯一部分功能或者組件,大部分的界面全部為深灰色,所以這些被凸顯的部分會更加突出。

           

          undefined 

          節約能源

          在很多帶有OLED屏幕的設備中,暗色主題可以通過減少亮色的使用來有效地延長電池壽命。試驗表明,使用暗色主題可以讓設備的續航時間變長。

           

          undefined 

          增強可訪問性

          暗色主題對于色弱及有其他視覺障礙的用戶非常友好,可以提升他們使用產品的體驗。

           

          規則

          對比度:深色背景和100%白色正文文本的對比度達15.8:1以上。

          信息層級:組件和元素通過較深和較淺的灰色來表達信息層級。

          飽和度:界面中主要色彩與文字信息的對比度應該高于4.5:1(根據Web可用性指南的標準)。

          設計少量強調色彩:我們在設計時會使用大量深灰色來設計背景,也會用少量強調色彩來表示更重要的信息,與背景產生對比。

           

          undefined


          關于信息層級

          暗色主題的UI界面主要使用深灰色的背景和少量的強調色彩,它們不刺眼但仍然保持著很強的可用性。用戶使用起來不會有任何的不舒適。界面按信息層級的重要性依次讓用戶注意到以下四部分:主強調色、次強調色、較亮的灰色前景、較暗的灰色背景。


          undefined

           1 背景(高度:0dp);2 表面(高度:1dp);3 主強調色; 4次強調色;5 在背景上的元素; 6 在層級上的文字色; 7 主強調色上的文字色; 8 次強調色上的圖標色

           

          undefined


          觸發暗色主題的開關

          我們可以設計控件來讓用戶打開(或關閉)暗色主題,這個控件可以使用很明顯的方式來進行突出強調:比如在明顯的位置設計開關圖標來讓用戶切換;也可以使用不太明顯的方式:在菜單或者設置界面中放置開關。


          undefined

           形式1:頂部應用欄中的暗色主題開關

           

          undefined

           形式2:在氣泡中切換暗色主題

           

          undefined

           形式3:在設置界面中切換暗色主題

           

          暗色的屬性

          暗色主題使用深灰色而非黑色作為組件的主要設計配色。深灰色表面可以表現出更廣泛的高度和深度,因為我們仍然可以在深灰色之上設計更重的投影。除此之外,深灰色的設計還可以減少視覺疲勞,因為深灰色表面上的淺色文字與黑色表面上的淺色文字相比對比度更低,對眼睛刺激較小。


          undefined

           推薦的深色主題默認顏色為#121212

           

          海拔高度

          在暗色主題中的組件和在默認主題中的組件可以使用相同的海拔和陰影大小,然而在暗色主題下它們的色彩會根據信息層級的排序而改變,這一點是通過明度不同的灰色來表現的:海拔越高則越亮(暗示接近光源)。我們在這里通過給深灰色上疊加一層不同透明度的白色來改變亮度(不是直接做灰色的形狀)。


           元素的海拔越高,顏色就越亮


          undefined 

          通過使用半透明白色覆蓋層來暗示海拔:1.形狀 2.帶有透明度的白色疊加層

           

          undefined 

          默認主題使用陰影來表示海拔,而暗色主題則通過表面顏色來表示海拔


          undefined 

          不同的海拔高度與白色層不同的透明度之間的換算關系(透明度從0%到16%)

           

          undefined 

          A. 高度為1dp、5%白色疊加的卡片式設計; B. 高度為6dp的FAB按鈕,使用了次要強調的顏色 C.高度為8dp的底部應用程序欄,12%白色疊加


          undefined 

          錯誤1:輔助色的配色所表示的海拔不應該過高

          錯誤2:陰影的顏色應該暗于界面元素的顏色

           

          可訪問性和對比度

          暗色主題表面必須足夠暗才可以顯示白色的文本。為保證信息能夠被良好的閱讀,文本和背景之間的對比度應不少于15.8:1。也就是說,我們不可以用純白色來設計所有的文本信息,而要根據背景色和文本的對比度來調整。

           

          如果需要創建帶有品牌色的暗色界面,請在推薦的暗色主題默認顏色(#121212)上疊加帶有不透明度的主要品牌色。這個案例中,界面深色#1F1B24是暗色主題默認顏色#121212和8%的品牌紫色疊加的結果。

           

           

           

          科普一下,在顯示純黑色的時候,屏幕需要消耗更高的電量。為了節能,某些設備(例如帶有OLED屏幕的可穿戴設備)可以關閉所有顯示黑色的像素以節省電池電量。

           

           

          使用調色板中較少飽和的紫色可以提高在深色背景中的易讀性并減少視覺上的突兀

           

          輔助色飽和度過高,和背景不融合

           

          主體色

          主體色是應用里最常顯示的顏色。Material Design暗色主題使用原色的200色調(在所有背景和層級上均需通過WCAG的AA標準:文本和背景至少對比度達到4.5:1)。

           

           

          暗色主題中的主體色示例:1.主要顏色 2.色調變體

           

          主體色變體

          在我們設計界面時,某些淺色界面上的組件需要使用主體色的變體。

           

          這個暗色主題使用了主體色(紫色200)和主體色的變體(紫色700)

           

          輔助色

          大多數的時候我們都無法僅僅依靠主體色這一種顏色撐起畫面,我們還需要輔助色。輔助色一般來說是主體色的臨近色或互補色。在暗色主題中,輔助色可以用來顯示用于突出的部分內容。當然,輔助色同樣必須滿足背景與文本4.5:1的對比度要求。

           

          暗色主題中的輔助色調色板1.輔助色指示符2.色調變體

           

           

          這個界面中使用了主體色和輔助色變體

          強調色

          在暗色的主題中,暗色占據了UI的大部分空間。而在暗色之上我們也會運用強調色。強調色通常是淺色或明亮的色彩,這樣的顏色能讓我們希望突出的元素在暗色中脫穎而出。

           

           

          為了提升靈活性和可用性,建議在暗色主題中使用較淺的色調(200-50),而不是默認主題顏色(飽和色調范圍為900-500)。1.默認主題原色指示燈2.暗色主題原色

           

          選擇色彩時要考慮飽和度對界面閱讀的影響

           

           

          暗色主題下頂部應用欄使用的顏色不可以是主體色

           

          品牌色

          為了保持品牌的識別性,品牌顏色可以在暗色主題中使用,但應當僅限于一個或兩個品牌元素,例如Logo或品牌按鈕。界面中的其他部分如文字和次要元素仍然可以使用飽和度低的顏色來設計。

           

           

          1. 暗色主題色2.品牌顏色

          飽和度很高的品牌色應用于FAB(2),而不飽和的暗主題色應用于文本(1)

           

          暗色主題色板

          我們設計一個產品的時候需要完成一套專屬的色板,它包括:顏色(主體色、輔助色、主體色變體、輔助色變體)、表面(背景和組件)、狀態(例如錯誤狀態) 內容(排版和圖像)等的色彩選擇。

           

          暗色主題的色板實例


           

          1 Material Design默認主題色板 2 Material Design暗色主題色板


           

          錯誤顏色

          錯誤顏色在產品中用來指示錯誤狀態,當看到這個色彩,用戶就知道有些事情出錯了。暗色主題的默認錯誤顏色為#CF6679。

           

          這種顏色是通過默認的錯誤顏色(#B00020)并使用40%白色疊加來創建的,這種顏色通過了AA級對比度標準。


           


          文本顏色

          當淺色文本出現在深色背景上的時候時,應使用以下不透明度:高度強調的文本(87%)、中等強調的文本(60%)和禁用文本(38%)。

           

           

          高度強調的文本、中等強調的文本和禁用文本的顏色

           

          狀態

          通過使用疊加顏色來傳達組件或交互元素的狀態。在暗色主題中,狀態應使用與其默認主題相同的疊加值,并且可以調整它們以通過AA級對比度標準。


           

          懸停、聚焦、按下和拖動狀態時組件的不同設計

           

          使用什么軟件設計?

          Material Design旨在為設計師設計一套可以應用在所有平臺的設計語言。在目前的UI設計界較為通用的軟件都可以支持Material Design的設計,比如我們可以行業里比較流行的Adobe XD、Sketch、Figma等UI軟件來設計界面。Material Design提供了暗色主題的Sketch文件,大家可以在支持Sketch格式的設計軟件如XD、Sketch、Figma中打開它。

           

           

          使用Adobe XD打開暗色主題模板

           


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。


          頂部導航欄設計樣式匯總

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          本篇文章主要匯總了常見的四種頂部導航欄設計樣式,希望能幫助自己和小伙伴們更好地理解導航欄這個組件。

          頂部導航欄作為我們使用APP時每天都要遇到的組件,出鏡頻率極高,看似簡單,其實我們在繪制界面的時候還是有許多細節需要注意的。本篇文章主要匯總了常見的四種頂部導航欄設計樣式,希望能幫助大家更好地理解導航欄這個組件。


          一、常規導航欄

          所謂常規導航欄,主要是指固定在狀態欄下,能清晰分辨出的一行導航欄,主要由操作圖標、標題、搜索框、背景等組成,大致分成三種,分別是簡單標題導航欄、搜索框導航欄以及Tab/分段控件導航欄。


          1.簡單標題導航欄

          簡單標題導航欄常見于二級詳情界面或導航簡單的一級界面,主要由操作圖標與標題組成,如下圖:

          (以下涉及的尺寸大小都是二倍圖下的設計大小)

          該類型的導航標題的大小一般是36px,操作圖標的設計大小一般是40px,切圖大小一般是48px,背景色多采用白色或APP主題色。并且很多APP為了保證整體界面的簡潔,還會去除導航欄底部分割線,僅采用白色作為背景。


          2.搜索框導航欄

          常規搜索框導航欄是在簡單標題導航欄的基礎上,增加了一個搜索框,一般去除了導航標題。如下圖:

          搜索框的寬度隨導航欄中操作圖標的多少決定,搜索框高度多采用56~60px,搜索框中的圖標設計尺寸多采用32px(為了減少切圖尺寸,也可采用48px的切圖大小)。

           

          在擺放圖標時,采用左右間距等分,距離搜索框的間距與邊距相等,看起來會更舒適。如下圖所示:


          3.Tab/分段控件導航欄

          Tab左右切換頂部導航欄與分段控件頂部導航欄,都是頂部有多個標題切換的導航欄樣式,分為選中標題與未選中標題,如下圖:


          分段控件頂部導航欄一般有2~5個可選項,且不能左右滑動。Tab左右切換頂部導航欄的可選項可以擴展很多(如愛奇藝的首頁頂部Tab切換有24個可選項),并且可以左右滑動切換,選中樣式也比較豐富,常見的有底部加上小短線、字體顏色變化、字號放大等(多個合并使用更能突出選中標題),如下圖:



          二、通欄導航欄

          通欄導航欄與常規導航欄的構成基本沒有區別,最大的不同是,通欄導航欄的背景層一般與下方的模塊打通了,在視覺上看起來更為統一,還能一定程度上節約界面空間。如下圖:

          通欄導航欄常用在電商、旅游等界面復雜或是需要烘托氛圍的界面中(多伴隨著背景處理),有些也會放在頂部通欄Banner上,節省空間的同時減少割裂感。


          通欄導航欄的背景處理方式一般有三種

          1.特殊背景處理:與下方模塊整體風格保持一致,多采用與下方一致的圖片背景;

          2.顏色、漸變背景:采用純色或是漸變背景,常見于卡片風格的界面;

          3.黑色透明漸變蒙層:采用一層漸變蒙層,常見于圖片Banner上,保證導航欄文字的可識別性。




          三、大標題導航欄

          自ios11發布后,大標題風格的導航欄便開始流行起來,尤其是飛機稿總能看見大標題導航欄的影子。普通的導航欄在二倍圖下高度只有88px,標題字號為36px,而大標題導航欄在二倍圖下高度足足有192px,標題字號為68px。


          但并不是所有APP都適合使用大標題導航欄,并且即便使用大標題導航欄,整個APP中也不會全部使用,使用中界面向上滑動也會切換成正常狀態的導航欄或直接隱去導航欄,便于內容的查看。

           

          有些APP也會折中使用,在常規88PX(二倍圖)導航欄高度下,放大字號,隱去分割線,使標題看起來更大。



          使用大標題導航欄,你需要考慮以下兩點:

          1.是否需要幫助用戶快速確認所處位置(多為產品頁面重復性多,或是功能單一的APP);

          2.APP整體風格是否偏向簡約大氣。

          大標題導航欄總給人一種高逼格的感覺,這也是為什么飛機稿喜歡使用大標題,但卻沒見國內的電商APP使用。



          四、小程序導航欄

          微信的小程序導航欄,在頂部右上方有一個不可去除也無法編輯的Titlebar按鈕,微信配置了一深一淺兩種風格。

           

          從APP轉換到小程序時,要注意調整APP的頂部導航欄的位置以及搜索框的大小,避免被Titlebar遮擋,如下圖:

          上圖中,豌豆公主的頂部導航欄整體下移,并且減小了搜索框的高度,提高屏幕的利用率。


          五、劃重點

          ·常規導航欄主要包括簡單標題導航欄、搜索框導航欄以及Tab/分段控件導航欄通欄導航欄

           

          ·通欄導航欄要注意導航背景的處理,常用的有特殊背景處理、顏色漸變背景、黑色透明漸變蒙層

           

          ·大標題導航欄使界面整體更有逼格,但不是所有APP都適合的,要根據情況合理使用

           

          ·微信小程序導航欄在頂部右上方有一個不可去除也無法編輯的Titlebar按鈕,從APP換到小程序時要注意重新調整導航欄

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計 、 圖標定制  用戶體驗 、交互設計、 網站建設 平面設計服務。


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合