的App類別是游戲,而健康&健身幾乎沒有進入前10。2020年雖是艱難的一年,但它提供了很多機會,可以為移動應用市場引入一種新的經濟回報和有意義的醫療解決方案,直接影響人們的健康行為、并幫助他們生活得更輕松、更愉悅。
為此,你需要一個功能強大的App,因為如果不能運行的話他就是無用的產品。但是這種強大的功能還需要通過設計來將它呈現出來。一個優秀的醫療App設計將醫藥類App最重要的細節呈現出來,并引導用戶使用,以及建議用戶接下來如何操作,最終完成必要操作。
一個App能憑借自身成為一個的客戶開發工具和公司的核心產品。對于與健康或醫學相關的產品,UI/UX設計更為重要。
呼吸監測應用程序-作者: George Frigo
在這篇對設計師和公司都有幫助的文章中,我們將探討一些醫療App設計中的最佳實踐是如何發揮作用的。
醫療類應用類型
值得注意的是,“醫療保健App”是一個多方面的概念,包含了大量與健康和醫學相關的數字產品。
這里有很多類型的醫療類App,包括:
醫療專業人員遠程病人會診的App(遠程醫療)
電子病歷App(EMR)
記錄和管理患者生命體征的App
提醒患者服藥、鍛煉等的App
醫療計算App
提供醫療信息參考的App
健身和運動類App
健康的生活方式和健康App(每日飲水量、睡眠管理等)
這似乎是一個過于寬泛的主題(例如,將卡路里計數器app與醫學教育解決方案相比較),但是也有一些通用設計經驗可以使得醫療健康類App更、讓人們有辦法得到他們想要的。
醫療應用程序作者: Victor Nikitin
如何為醫療健康打造移動應用
即使一個App不是企業的主要產品,它也有可能產生巨大的價值。例如,如果它是一個醫療辦公室的配套應用程序,它可以減輕員工的負擔,為客戶提供信息和服務。如果一個健康App是企業的主要產品,比如健身或冥想應用程序,那就比較危險了。有時候,健康App的缺陷是人們放棄使用這些App的原因。
為了避免這種情況,我們來看看醫療App設計中的一些最佳實踐技巧,以及它們如何幫助App聚焦、直觀和快速。
醫療保健: Anatoly
調研—成功的第一步
在設計原型應用程序界面之前,你需要知道誰是你的目標用戶,以及他們的地理環境、社會經濟背景和心理特征,畢竟沒有產品可以迎合每個人。用戶的興趣和能力決定了他們如何與軟件互動。所以解答以下問題將有所幫助:
誰是你的目標人群?
他們喜歡什么?
怎么樣的app他們每天都會使用?
使用目的?
通常,醫療健康軟件要么被患者使用,要么被醫生使用(如果我們將生活服務類軟件的用戶也計作患者的話)。這兩種用戶的需求在功能和UI設計上都有不同。因此,醫務人員通常需要快速獲得某些數據項:EHR/EMR(電子健康檔案/電子病歷),藥品規格標準,診斷和治療建議,參考資料等。然而患者需要的是盡可能精簡的、易于理解的信息項。因為這一群體中有相當一部分老年人或者有某種特殊障礙。
只有進行了恰當的用戶調研,得出了相應的結論,設計師才能繼續醫療健康軟件的真實有效的設計。
Chahua的健康管理軟件
細化明晰每個案例
醫學對普通人來講是復雜的學科,最好的方法反而是將醫療健康設計得相對簡單,以安撫用戶并讓他們保持專注。
“世人總將事物搞復雜,殊不知,簡單才是至理?!?——Richard Branson
想要給人留下深刻印象,將醫療UI設計得過于詳細是沒有意義的,最好的是界面和邏輯易于理解,即使軟件是專為醫務人員設計的(當然,不要居高臨下)。
醫療App/檔案和活躍度-作者: Igor savalev
設計醫療健康軟件的UI,提供有益的新用戶引導流程,使界面可直觀理解。否則,用戶會對糟糕的體驗失望,甚至等不到進入核心功能就會退出。
所有相關方,不管是醫生還是患者,都會喜歡清晰極簡的軟件,這樣,你就不需要讓用戶學習如何操作軟件,這對醫療機構來講是個解決辦法,他們已經習慣了這些事。
幫助用戶穩定發現功能,循序漸進地給予指導。以用戶引導流程開始,將app中每個動作劃分成可處理塊,一次提供一個操作說明。
使用恰當的顏色(更進一步)
利用被動輸入和自動補齊功能限制用戶必須輸入的信息的數量,調整鍵盤,動態驗證字段值。這篇文章里還有更多表單設計相關。
所有醫療信息都得由擁有一定學歷和專業知識的專家提供,否則,這些內容要么不完整,要么包含錯誤,這在醫療健康中是不容允許的。
醫務人員使用的醫療軟件-作者: yurig
功能的重要性(及特色)
醫療保健應用程序的特性和功能類型取決于它的用途和目標用戶。例如,醫療中心的應用程序需要一個賬戶,病人可以在那里查看他們的就診、推薦和預約記錄。如果沒有安全加密的視頻會議和通信功能,遠程醫療應用程序就毫無用處。
與其他一般APP不一樣的地方,“首頁”是醫療類的app的主要功能的位置。先來回答一個問題: 為什么有人使用您的應用程序(或類似的醫療類App) ,如果一個人訪問一個應用程序來記錄或接收一些信息,聯系醫生,檢查他們的進展等,這個功能都放在“首頁”上?
呼應前面的觀點,就是避免過多功能同時出現時的混亂。不可否認,這種情況在傳統的醫療類App中更為常見,這些應用程序有時候會分散注意力,不斷添加新的和新的功能,直到只有資深的用戶才能理解并熟練使用。
根據二八定律的法則告訴過你,80%的用戶傾向于使用不超過20%的功能。區分優先次序,決定哪些功能對用戶最重要。
醫藥應用App作者: Manoj Dalvadi
導航的研究和鑒賞
清晰的導航結構是醫療應用程序用戶界面設計的骨干必需組件。沒有它,這個App將會不再受歡迎。導航代表和易用,因此從用戶的角度來看是有價值的。一個醫療專業人士需要一個能輔助工具,因為他們已經有太多的時間花在處理EHR(電子健康記錄)上了,【類似國內的病歷本】。
經斯坦福醫學院進行的調查發現,醫生花在每個病人身上的時間中,有62%的時間花在EHR(電子健康記錄)上。如果設計的導航不夠,那么這個App就沒有任何使用價值。就算病人目前在使用導航的頻率很低,但他們也不會樂意看到混亂的導航而放棄二次使用的機會。
重要的導航信息應放在屏幕上顯眼的地方,并根據要求提供詳細信息。有一個“三次點擊規則”說系統的設計應該使任何信息都可以在三次轉換中使用。如果用戶在三次點擊之后找不到他們想要的東西,他們可能會感到沮喪,放棄他們原本要做的任務。
目前采用標準的應用程序導航有:
-漢堡菜單
-標簽欄
-導航抽屜
醫療應用-作者: Alex Samofalov
色彩的運用方法
一般來說,應用程序的顏色選擇取決于目標用戶和應用程序的主題來決定。
醫療保健應用程序的設計通常是在中性色調與流行的冷色調的藍色和綠色,白色為背景。在大多數情況下,設計師這樣做是為了達到某些效果: 利用舒緩柔和的顏色與醫療保健行業的共同聯系,緩解焦慮,增加可信度。所以你很少能看到明亮的紅色或黃色在醫療類App的界面。
藍色為主的醫療類App,作者Adam Sokoowski
然而,考慮到醫療軟件的通用性,在顏色的選擇方面沒有特別的限制。要考慮到的是,應用程序的整體外觀應該創造一個積極的印象,而不是引起擔憂,恐懼,或其他不良情緒的感覺。
例如,下面這個健身應用程序的深色調的設計看起來很漂亮,也不過時:
深色為主的醫療類App
健康與鍛煉應用程序-作者: Saepul Rohman
或者用明亮的顏色來增加一些活力:
移動健身應用-作者: Michal Parulski
追求個性
移動App的個性化設計是近年來最顯著的設計趨勢之一。某些功能需要適應特定的用戶模式。
這樣設計的目標是幫助用戶更地利用App解決他們的問題。這個系統提示了一個人接下來要指示的操作,否則這些可能會被忽略。要做到這一點,必須識別和分析用戶特征,并通過數據跟蹤用戶的行為變化。就像每個人都有自己不同的身體狀態一樣,他們也希望自己使用的App能根據他們的身體狀態提供相應的差異化體驗。即使不是醫療保健行業,也有33% 的客戶會因為個性化不足而放棄某款產品。
在醫療App設計中,個性化定制選項有很多: 顏色主題、通知、交互元素、使用 AI 創建個性化推薦等等。
最大化可訪問性設計
易訪問性設計對于每個App設計都很重要,特別是醫療App。
醫療App的用戶通常有不同程度的視力和聽力,年齡,身體和心理障礙。醫療App的功能設計需要讓不同的用戶在使用過程中都有比較好的用戶體驗??紤]不同用戶的局限性,并幫助他們努力克服局限性帶來的負面影響非常重要。例如,暈動病患者不太喜歡過多動效。
這并不意味著在醫療App設計中只能有兩種顏色,所有的字號都必須非常大,但這確實意味對于醫療App,設計師會面臨更多挑戰。不過這是一個額外鍛煉機會,而不是負擔。從WC3的網頁內容無障礙指南開始,使用像這樣的色盲模擬器。
App無障礙設計的例子: 把主要元素放在拇指區,不要忘記選擇改變視圖為水平模式,字號需要更大,等等。
色盲模擬器-作者: keithar
積極態度的力量
醫學不僅復雜,而且通常讓人望而生畏。比較聰明的設計手法是讓你的應用看起來和醫學毫無關系。這樣可以消除人們對醫學壓力的刻板印象,讓用戶體驗更加愉悅。
比如在用戶使用的不同階段運用積極的文案、有趣的圖片、舒緩的顏色或其他元素。醫療App界面設計中的圖片和圖標需要能夠用戶調動積極、愉快的情緒,營造一種無痛感和安全感。
冠狀病毒APP-作者: Mahdieh Khalili
不要將App設計成網頁
在有醫療網站的情況下設計醫療App,老板甚至是設計師可能會將網頁頁面復制到App當中,這樣通常會導致用戶放棄使用App。
移動端和網頁端的交互存在一定的差異性。手機的物理尺寸比電腦屏幕小。在手機上,我們的任何交互都是通過手指來完成,所以不愿意輸入冗長的文案,同時期望產品運行得更快。
在大多數情況下,人們使用網站獲取信息,使用App完成工作。此外,App集成了手機的功能,比如加速器和攝像頭,使App的設計不同于網頁。
健康醫療應用-作者: Grace Saraswati
適得其反
保持吸引力與功能平衡都很重要。醫療保健應用程序必須不能分散用戶對其內容的注意力。仔細看看上面的要點,注意好分寸就行。
圖形元素、包括動效,應該始終履行他們的使命,即數據輸入,并說明微交互的用戶與系統,而不是僅僅只為了使一個應用程序看起來很炫酷。
不要過度使用漸變和陰影,只將用戶的注意力集中在主要文字信息上。只使用一種字體,你可以通過改變字體的大小和其他特征來改變它,比如斜體、粗體。
多使用簡單的配色可以獲得更清晰的品牌信息和導航。
健康與活動跟蹤互動-作者: Dibbendo Pranto
抄還是不抄?
你可能會在某個時候想,如果覺得抄這個方案有用的話?是不是應該拿一些成功的競爭對手的應用程序復制一份。
其實,照抄其他產品是不明智的行為,因為他們的設計可能很容易就不夠好。你最終可能正好抄了競爭對手的錯誤方案,從而阻礙未來應用程序市場運作。
另一方面,你肯定應該對其他應用程序進行分析,進行競爭對手的研究。一個應用程序應該與用戶以前使用其他應用程序的經驗相關。如果事實并非如此,而且你添加了太多的原創性,那么使用這個應用程序的用戶就會覺得很麻煩,用戶也不會容忍“一切都錯了”的設計。蘋果和谷歌都有人機界面指南和材質設計。
用戶把大部分時間花在其他事情上 ——Jacob’s Law
有必要根據你的品牌、服務和產品的具體情況進行設計。好比如一個健身APP與一醫療APP,兩者使用方向有很大的差異。所以說必須完全符合目標受眾的要求、細節,以及應用程序的主題情況進行針對性設計。
藥物提醒程序-作者: Martyna Zielińska
實用性測試
最后,要記住最重要的一點,每個設計師都可以認為這個決定是否合理。他們可能會對應用程序的架構和導航的一致性,深思熟慮的設計,以及最重要的實用價值深信不疑,以至于完全忘記了通過實踐進行測試,設計師可以提高他們的同理心水平,更好地感受客戶的需求。但事實上,這種陷阱會給應用程序帶來很多負面影響。
只有在分析了與用戶與應用程序界面交互相關的數據之后,才能得出結論。多進行一些測試將有助于及時地獲得反饋,解決應用程序中的所有可出現陷阱一樣的場景。
積極的用戶參與是成功的關鍵。在年齡、職業、地理位置、性別、文化和宗教背景等方面,選擇盡可能接近目標受眾的相關測試對象。越接近越好。讓他們執行你的應用程序的主要功能并收集反饋。
病歷本App應用-作者: Alex Samofalov
最后
設計不單單是討論顏色搭配和字體的運用,而是能夠帶來價值和解決業務問題。健康和醫療類App是一個敏感而富有挑戰性的課題,需要特別關注。設計師們一直在努力平衡醫療應用程序極高的安全性和可用性要求與其界面的美學性,經過深思熟慮體驗和用戶界面設計成就一個很好的醫療類工具,讓用戶在一個簡單和直觀的界面的幫助下參與使用。
文章來源:花火圓桌(ID:huahuoyuanzhuo) 作者:Kate Shokurova
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。
APP UI設計一直在變化,就像網頁設計一樣,不停的創作新鮮、友好的產品,設計師要跟上這個趨勢,最好的方式就是多看優秀案例,下面大家一起來看看今天的精選,建議訪問官網查看更詳細的展示哦!
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了12款優秀并富有創意的交互作品,為你的產品設計注入靈感。
精美的天氣app賞析
--手機appUI設計--
--精美的天氣app設計--
(以上圖片均來源于網絡)
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了12款優秀并富有創意的交互作品,為你的產品設計注入靈感。
還有精美的天氣app賞析
--手機appUI設計--
--精美的天氣app設計--
(以上圖片均來源于網絡)
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
在9月底雙十一臨近的關口上,淘寶上線了 9.13 新版本,對首頁做出了巨大的改版,堪稱這 5 年來力度最大的改版幅度。
我們先來簡單看看新版本有哪些重要的改進:
如果只是通過視覺角度上來看,新改版必然是比過去的老版本 “清爽” 得多,畢竟精簡掉了大量的內容。尤其是兩個分頁器組件,除了占空間外,實在找不出什么要去點擊的必要。
輪播圖從頂部撤離和瓷片區進行合并,是一個比較有趣的設定,不僅廣告圖的面積減少,而且營銷推薦位全部集中到一起,使得模塊的劃分更集中。
現在的首頁從上到下的結構即:
如此化繁為簡的改造發生在淘寶APP身上,就像看一出浪子回頭的感人戲碼…
但不要這么容易被結構上的改造欺騙,改版后的淘寶降低了模塊的數量,但只是把減少的元素在其它地方呈現。即這次改版的重點——推薦瀑布流。
細心的同學應該都發現了,瀑布流卡片已經出現在了第一屏的底部,即使不用上滾也可以看見卡片的頭部了。
并且瓷片區也采用了瀑布流式的雙列布局,通過瓷片區白色背景的襯托,這半截露出的圖片反而顯得越發顯眼,越能吸引我們控制不住自己去上滾一下康康推薦了什么東西。
當我們開始瀏覽瀑布流的推薦內容以后,淘寶夾帶的大量私貨就進來了,我們來統計下總共有哪些類型:
實際的卡片類型,可能還不止我羅列出來的這些。這個本來是用來推薦商品的列表,已經演化成一個聚合了算法推薦內容的 “巴別塔”。
而其中最重要的商品卡片,甚至也不能直接點擊就跳轉到商品詳情頁中,而是添加了一個中轉頁面,進一步根據算法推薦相關商品,能直接跳轉進詳情頁的少數商品卡片,應該是有做廣告投放的定向導流。
這樣改版后的目的,不難分析出目的是為了進一步增加用戶 “逛淘寶” 的幾率和時間,讓本來打開應用就搜索—購買—關閉一條龍的用戶,也會不自覺陷入信息流的海洋中去。
可能很多人會覺得,難道不應該讓流程更短,購買步驟更容易,才符合優秀交互設計的定義嘛?
下面我們就做一些具體的分析吧!
對于一個商業應用來講,交互不是為了無條件迎合用戶的,雖然無論是 UX 還是 UED 的概念里,都愛強調用戶至上論,體驗為王之類的。但是…
1. 商業訴求 > 用戶體驗
只有在用戶量高速擴張,商業目標是需要用戶獲得良好體驗、口碑的情況下,用戶體驗的重要性才和大家在童話里了解的一致。更多的時候,是產品想喂用戶吃金坷垃時,我們要想辦法讓用戶心甘情愿的吃下去并快速成癮。
淘寶通過不同的方式獲取了大量用戶的數據,資料、喜好、購物傾向等等,在龐大的商品數支撐下,可以通過算法給你推薦無窮無盡的商品,總有你會感興趣的部分。
只要增加了信息流的曝光次數,不要讓用戶那么快完事,過早的陷入剁手的悔恨,抽起事后煙……
那么他們就會被這種簡單的產品形式俘獲,做多巴胺的奴隸。抖音是這樣的、微博是這樣的、知乎也是這樣的。為什么一個購物應用不想著最快的方式促成交易,而是讓用戶在里面繞圈子,原因也只能有一個 —— 流量。
大家都知道雙十一將近,各家電商平臺作妖時間又到了。但這兩年的電商行業已經發生了巨大的改變,那就是直播、短視頻帶貨形式帶來的變局。
這兩年,以抖音、快手為代表,興起的短視頻、直播帶貨風潮,已經成社會的熱門話題,薇婭沒事就在綜藝里和愛豆們一起帶貨,李佳琦身體有恙上微博熱搜,羅永浩靠帶貨上演 “真還傳”……
本來,購物方式的多元化,對于大型平臺來講是非常有幫助的。無論是十幾年前就開始出現的社會化電商平臺、返利網、或值得買,都可以促進電商行業的繁榮,促進平臺和整個產業鏈的發展。
但是,直播、短視頻的興起和過去的這些行業全部不一樣,它們本身并不依附于電商平臺,但卻擁有海量的流量和用戶基數。而當這樣的流量引擎在變現問題聚焦在電商時,直播和短視頻頭部平臺就有了和電商平臺們叫板的資格。
2. 直播電商規模,不算短視頻
主流的數據預測報告中,20年的直播電商規模都會達到萬億級別,直播電商的高速發展是沒法阻擋的大趨勢,它的發展會搶奪存量用戶的注意力,有大量的用戶購物逛商品,不在淘寶APP內,而是通過其它平臺轉化,再進來下單,或干脆在外部下單,這是絕對不能被容忍的。
所以淘寶不僅要緊跟趨勢,也要對抗外部的競爭,在今年加大對短視頻、直播的投入,也就順理成章。根據淘寶研究院的數據,過去三年直播帶貨的規模增長在 150% 以上,是全球增長最快的電商模式。
同時,雙十一的直播觀看用戶 18 年為 1793 萬人次,19 年為 4133 萬人次,同比增長 131%,對比 618 數據,毫無疑問今年肯定也會保持的增長。
并且前幾年淘寶雙十一喜歡玩的病毒式推廣活動成效已經越來越差,再讓用戶去集福,首頁上增加一大堆煙花繚亂的游戲和活動,已經不能再幫助雙十一獲得快速的增長了。
所以今年,淘寶在國慶前,上架了首頁新版本的設計,在應用形態上押寶信息流的算法推薦機制。不僅要開始改變用戶使用淘寶的習慣,也在為后續的雙十一做預熱,相信屆時會有大量的直播內容露出和短視頻推薦。
至于還有什么新花樣或殺手锏還沒秀出來,我們就拭目以待吧……
文章來源:優設 作者:超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
蘋果在2019年6月發布的iOS13中增加了“黑暗模式”,用戶打開“黑暗模式”后,應用界面將會變為深色,隨后Google Android 10的發布同樣搭載“黑暗模式”。為了適配系統,不少APP紛紛推出了深色模式。
使用OLED屏幕的設備,在純黑色下可以有效降低耗能,進一步延長續航時間。除此之外,深色模式還可以有效解決OLED屏燒屏、費眼的問題。小摹對幾款常用APP的深色模式進行了體驗,并為大家分享我的體驗感受。從這些案例中,或許我們可以找到深色模式流行的原因。
微 信
深色模式是一種可以降低視覺疲勞且有助于用戶專注的全新外觀。與傳統夜間模式最大的區別是,深色模式不僅保證了弱光環境下的體驗,在強光下仍具有可讀性。
雖然深色模式也被叫做暗黑模式,但并不代表要將底色變為純黑。如果使用100%的純黑底色,長時間閱讀時,反而會造成眼睛疲勞。微信的深色模式里,聊天背景及主頁面底色采用的就不是純黑,而是深灰色。
此外,純黑和純白的高對比度也會造成視覺疲勞,因此微信的深色模式中,使用了淺灰色作為字體顏色,既能保持清晰顯示,又降低了對比度,減輕了用戶的閱讀負擔。如果設置了聊天背景,聊天背景圖片也會自動調暗,便于閱讀。
雖然整體色彩加深,但微信在設計時仍保持著清晰的層次。比如置頂聊天窗口的灰色會比其他窗口稍淺,聊天消息的標題和摘要也采用了明度不同的淺灰色來區分層級。除此之外,微信的彩色線型圖標在黑色背景上也變得更具科技感,顏值提升了不少。
微信的深色模式除了可以幫助用戶緩解夜間視力疲勞外,在白天使用也幾乎沒有障礙,總體來說,體驗感覺較好。
Q Q
如果說微信的深色模式更加注重顏值,那么騰訊旗下的另一款社交工具QQ則更加注重用戶的深夜閱讀體驗。
首先,微信在切換深色模式時,需要重啟軟件后才能生效。QQ在切換夜間模式時,則采用了一個平滑的漸變過渡,讓用戶可以快速適應場景切換。其次,為了減少夜間光線對人眼的刺激,QQ降低了信息與背景的對比度,對用戶頭像等圖片增加了遮罩,使其在弱光環境中看起來更加柔和。
當用戶開啟夜間模式時,還會有一個設計彩蛋:部分圖標會根據模式切換而改變。如消息圖標會從笑臉切換為休息的狀態,這種具有趣味性的設計,也會拉近用戶與產品之間的距離。
豆 瓣
普通模式下的豆瓣APP背景色為純白色,白天看偶爾都覺得有些刺眼,更不用說睡前必刷豆瓣的用戶有多煎熬。在被用戶罵了一輪又一輪之后,豆瓣APP終于也推出了夜間模式。
豆瓣的夜間模式和微信一樣,同樣保留了五顏六色的圖標。同時,豆瓣在設計時始終保證內容有良好的對比度和清晰的視覺層級,保證了信息結構的準確傳達。
在配色方面,為了避免“死黑”讓整個界面太過死板,豆瓣在黑色中還混入了藍紫色,讓背景色看上去更加通透。底部導航等主要按鈕則使用了豆瓣的主色調綠色,在夜間模式下既能清晰展示,又不會顯得過于刺眼,同時也保證了在強光模式下可以正常瀏覽。
知 乎
另一款社區APP知乎和豆瓣存在同樣的問題。知乎在設計夜間模式時,知乎采用了主色調藍色+深灰色的搭配,深藍和灰色作為背景,展示出的效果既有強烈的對比,又擺脫了深色的壓抑感。
與豆瓣不同,知乎的文本顏色選擇了對比度更低的灰色,通過字重進行區分。雖然這樣會讓整體頁面看起來比較和諧,但內容變得不夠突出,無法在最短時間看清標題,對于一個以內容為主的社區來說,無疑會給用戶帶來不太好的體驗。
知乎在設計夜間模式時目標應該很明確,即只考慮用戶在夜間的使用,因此整體色調都很暗,在強光環境下無法正常瀏覽。
bilibili動畫
B站剛推出深色模式時收到了許多批評,字體和背景色對比不強,視頻封面仿佛蒙了一層霧,一刀切的暗化處理,導致用戶瀏覽體驗極差。
在最近一次更新中,B站終于對深色模式進行了優化,適度提亮了視頻封面和圖標的亮度,將多彩型圖標調整為了單線型圖標,既統一了畫面風格,又提升了界面閱讀體驗。
設計深色模式時,必須注意各頁面的配色及對比度都要盡可能地統一。在深色模式下點開B站創作中心或推薦服務中的版塊時,加載畫面仍然是白色,突然出現的強光無疑會對眼睛造成刺激,對于用戶來說體驗感也極差。
百度網盤
高飽和度的色彩會在深色背景上產生炫光的視覺效果,引發視覺疲勞。百度網盤的深色模式下,背景接近全黑,圖標卻沒有太大的調整,給用戶帶來的閱讀體驗并不好。
同樣,由于背景顏色太深,導致百度網盤的文本和背景對比度太大,也存在難以閱讀的情況,對于誦讀困難癥患者來說,在閱讀時會感覺文字在旋轉、模糊。
在設計深色模式時,除了背景顏色盡量使用深灰色以外,還需要確保絕大部分區域保持深色,盡可能使用數量有限的色彩。把握好對比度和飽和度,才能設計出舒適的深色模式。
綜上所述,合理使用深色模式,可以降低屏幕亮度,不僅可以減少耗電量,還能減小對自己或他人眼睛的刺激。除此之外,深色模式對背景色、文字以及系統圖標的顏色都進行了優化處理,可以提升閱讀舒適度。對于喜歡深色或黑色系的朋友來說,深色模式更是一種不同于普通模式的全新體驗。
除了APP,不少生產力工具也都采用了深色界面,比如PS、摹客等。以摹客為例,用戶在進行設計時,深色界面不僅僅能降低眼睛疲勞度,還能突出你的設計內容,打造沉浸式的設計體驗。
隨著蘋果“黑色模式”的推出,深色模式逐漸成為APP設計的流行趨勢。作為設計師,也一定要掌握APP深色模式的設計技巧。從上述APP設計案例中,我為大家總結了以下幾點建議以作參考:
1.避免使用純黑色;
2.避免使用高飽和度的顏色;
3.文本顏色選用高亮色,但不宜使用純白;
4.做好情感化設計;
5.注意結構和層次感;
6.允許用戶自由切換深色模式和普通模式。
文章來源:UI中國 作者:摹客產品協作設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
所謂的“左右橫滑”交互英文名叫做“Horizontal Scrolling Lists”,最早可能起源于 Windows Phone 的橫向內容滑動設計。用于在同一個頁面的 X 軸方向拓展內容空間,“左右橫滑”的交互方式被廣泛應用于各類 App 中。
橫向滑動作為手勢交互的一個拓展,目的初衷是提升信息“內容和操作”的拓展性。
1. “內容”拓展性:
移動端的任何類型頁面內容都可能無法在一個界面呈現完整,因此滑動去呈現更多的內容,常見的當然是縱向滑動。但它無法承載所有類型內容呈現的問題,這個時候就需要橫向滑動來解決。
2. “操作”拓展性:
當一個頁面的內容已經是固定完整的,這時候需要用戶進行一些行為操作,如常見的下載、刪除、添加、管理…,而這些行為如果直接呈現在界面上必然導致混亂,因此需要配合一些橫向滑動激發這些行為,從而保證界面的流暢體驗。
橫向滑動從移動端手勢出現到現在十幾年的時間已經有了非常典型的使用場景,接下來我們就來列舉一下有哪些常見的類型:以下從「清晰度、效果」兩個緯度進行分解
解決內容拓展問題
這類場景通常是用戶最熟悉的,不論從認知清晰度、效果角度都是不錯的,主要原因是場景曝光度非常高、頻次非常高;比如Android\ios首頁橫滑切換app入口每天上百次的操作頻次;
解決內容拓展問題
這類切換方式適合內容相對聚焦和單一的產品,比如垂直類電商:wish、唯品會,所有內容僅僅是通過類目來區分的產品;微視:內容統一為小視頻…;百度地圖:橫滑查看更大范圍地圖…;由于內容的高度統一和整合,因此切換難度低,但在認知的初期會稍有一定的門檻,原因是大部分app都是縱向滑動feeds流,而且用戶記憶是海馬記憶,不會特別清楚記得app的操作,所以新打開app和新用戶會有一個認知過程,但門檻不高。
解決操作拓展問題(管理列表、IM列表、通訊錄list…)
解決操作問題
在所有類型中的橫滑,只有這種方式不是瀏覽型手勢而是操作型,通常這類功能隱藏在列表中,為了保證列表信息的有效性和美觀度,選擇隱藏操作功能,由于是低頻操作,所以初期需要用戶發現并成功使用該功能;不過目前很多list頁面都采用這種通用的交互手勢,因此用戶并不難發現。
最復雜也是最容易出現問題的
解決內容拓展問題
這是最容易出錯的一種場景,就是在整個界面中只有一個模塊采用橫向滑動,而其它內容又是縱向feeds流滑動;由于移動端內容的路徑多、入口多,因此用戶的核心操作流是:找入口——看信息——做任務;在這個過程中任何一個隱晦的、不常見的交互都很容易被用戶忽略,比如說:餓了么品質優選、唯品會二級類目、去哪兒旅游推薦…,這些案例其實是為了橫向空間拓展更多的內容而做此選擇,但通常情況下隱藏內容點擊率會驟降,很少有用戶耐心的橫滑瀏覽完成,因此設計師要嚴格把控數量以及內容的質量;在這里還有一種情況是很嚴重的,就是模塊級的橫滑內容與縱向列表之間有疊加交互,就會導致用戶反復在2中操作中完成任務,這一點非常不建議使用此手勢,當然以下案例并沒有這種情況。
1. 幾乎能夠100%適配到所有設備,保持了一致性
2. 為二級信息提供了展示空間,并且不占用頁面空間。
比如在圖片畫廊里的圖片,橫向滑動可以讓用戶預覽內容,可以劃過或者點擊查看。
3. 橫向滑動節約了縱向屏幕空間。
而不是將所有內容都展示在一個很長的頁面??v向布局讓所有的信息都成小塊展示。但是橫向滑動更加靈活?,F在,內容可以在橫向和縱向兩個方向同時展示。
4. 橫向滑動可以讓用戶預知分類里的內容,通過往一邊滑、向下滑,差不不同類別的內容。
兩個維度讓用戶可以在同一個界面中看到更多的類別和選擇。
5. 橫向滑動的內容需要保持高質量和持續吸引力才能提升點擊轉化。
1. 挑選合適的使用場景
單頁多維度的信息結構是“左右橫滑”最適合的應用場景。傳統的 List 適合縱向無限呈現單一屬性的內容(比如朋友圈或知乎的回答),而對于 App 首頁等多種信息聚合的頁面,就適合橫向開拓內容維度。
2. 顯眼并適宜的主題展示
3. 引導左右滑動(可見性)
4. 控制數量并避免極限情況
5. 低效率和錯誤的優先級
設計師們都喜歡“左右橫滑”的設計,不僅因為信息密度大,頁面層次好梳理,更多也是因為操作方式“酷”。但有經驗的設計師會盡可能拒絕“左右橫滑”,因為它的效率還是太低。而效率低,體現在兩個方面:
首先,就像上面說過的,更多的小白用戶對左右滑動的預期并不強,還是更加適應縱向滑動的傳統交互方式。違反了“Don’t Make Me Think”的基本原則。
其次,縱向和橫向優先級常常導致預期錯誤。以下圖 App Store 為例,所謂的內容都是 App,泳道只是用不同的維度把 App 組織起來。
如果你要購買其中一個資源位,你要更高優先級“泳道”中的第二屏位置,還是低優先級“泳道”中的第一屏位置呢?
文章來源:優設 作者:Jingwhale Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務