在我過往的一份工作中,曾就“是否需要在優化app的視覺感知上投入更多時間”的話題跟我們的CEO進行過有趣的爭論?!八趺词艿昧诉@么過時的設計?!有上百萬的用戶天天在用我們的產品,優化App的視覺設計是一件多么容易的事??!”
但我們的CEO并沒有動搖,他堅信公司正在優先考慮那些真正驅動商業發展的事項,尤其是聚焦于那些高速增長點上。
對他來說,我的設計技能無足輕重,這讓我感到非常沮喪。我非常熱愛用戶體驗和視覺設計,而且我不想在只能發揮我雕蟲小技的公司里浪費生命。
盡管如此,我還是能夠理解他的觀點。我沒有辦法證明他是錯的,公司一直在發展,雖然用戶的抱怨很多,但沒有一個用戶說“我覺得這個頁面太丑了”。
Value > Aesthetics
CEO的有些觀點是對的。如果產品能夠為用戶提供足夠的價值,就不需要在界面美感上糾結。亞馬遜和Reddit這兩個公司就是很好的例子。
此外,如果產品設計的非常漂亮,卻不能提供足夠的價值,也注定會失敗。如果功能不完善或缺少某些關鍵功能,沒有人會使用只剩下美感的產品,哪怕其驚艷程度不亞于Dribbble上最熱的照片。
但他說得也不全對。好看的產品是有價值的,即使每一個微小決策都可以進行A/B測試,但好看的價值卻依然很難識別出來,但這并不影響其對組織的重大影響力。
Aesthetics say who you are
facebook最近的改版
美感之于產品設計,就好比現實生活中的外表之于個人。
日常工作中,我們穿戴整齊、打理發型、噴灑香水,以期給同事留下深刻的印象,讓他們在與我們相處的時候感到舒服。
這樣做并不會改變我們給予他人的價值。但是,這樣做的確能夠改變他人對你意見的接納程度以及后續對你的印象。
這樣做也不會改變你說話的內容,但會改變人們對你在說話前后,以及說話過程中的感覺。
Aesthetics help you against your competition
想要打造出與亞馬遜匹敵的產品很難,但是我們可以另尋出路。很多在相同領域競爭的公司,都是用幾乎相同的價格給用戶提供幾乎無差別的價值。
想想那些已經突出重圍的成功公司,如Slack、Medium和Mailchimp。沒有一家開拓了新市場。團隊協作、博客和電子郵件營銷軟件早在他們之前就已經存在。
但它們還是設法成為了人們在該市場尋求解決方案時,第一個想到的名字。它們也都創造出了獨一無二的、充滿個性的視覺語言。
Aesthetics increase numbers
雖然,價值和信息傳遞通常是影響公司成長的最關鍵因素,但是在恰當的時機使用恰當的視覺效果,依然可以說服更多用戶購買你的產品。
例如,定價頁面就是一個能決定用戶是否會購買你產品的觸點。一個設計整潔的定價頁面能提供內容明確和可讀性高的信息,同時顯著提升轉化效果。
從各種app中找到的擁有優秀視覺展現的購買頁面
在我曾經工作的產品團隊中,人們最常討論的事情是開發任務的優先級。很多團隊成員(通常是那些有雄心壯志的人)想推廣那些他們認為可以幫助公司壯大的想法,但并不清楚哪條路才是對的。
有時候讓你的產品更好看是個不錯的主意,但在推廣這種想法的時候,你需要問問自己“為什么現在這件事情對我們來說如此重要?” 。經驗缺乏的設計師常常會給出類似這樣回答:
“因為它使我們的產品更加好看!!”
這種說辭沒有任何說服力。試著去關注公司的目標,思考如何用偉大的設計引領公司變得更加偉大,這樣你才會成功。
唯有美觀無法構建一款產品,但是打造一個毫無美感可言的產品往往會讓情況變得更加糟糕。
翻譯:優越 審校:Celin | UXRen翻譯組 #364譯文
作者:Ariel Verber
原文標題:《The importance of aesthetics in Product Design》
文章來源:UXRen
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
等待體驗幾乎不可避免、隨處發生,無預期的等待還可能讓用戶心煩意亂。針對等待體驗,我們該如何設計?
如當用戶瀏覽網頁的時候,若在用戶瀏覽到已加載內容的倒數第5條再預加載10條內容,可縮短用戶瀏覽接下來內容時的加載等待時間。再如生活中醫院的預約掛號系統,用戶可以提前一兩天掛號,當預約時間到了直接到指定科室看病,避免了長時間的排隊掛號。
總的原則是:在用戶等待時給予用戶反饋,告知狀態,且盡量讓用戶在感知上縮短等待的時間。反饋可根據等待的預估時間不同、場景不同,選取不同形式。
一般情況下理想的響應時間應該控制在 100 毫秒內,一些響應的時長可允許達到1秒,絕不可超過2秒無反饋。
若是等待響應時長為2-9秒時,可設計循環的加載動效(loading),告知用戶正在加載中。
若是等待響應時長超過10秒時,可設計帶有進度指示的加載動效。此時除了告知用戶正在加載中(即告知等待原因和當前狀態),還要告知用戶預期響應的時間。
如一些頁面內容較多,加載時能分步顯示,可按照框架、文本、占位圖、圖片的順序加載顯示,會在感知上縮短加載時間。又如加載一個新視頻,視頻前幾幀優先顯示最小體積的視頻資源,等較高清視頻內容加載出來時再切換為高清視頻資源,可縮短用戶等待視頻開始播放的時間。
(1)提供一個概念模型。
(2)使等待看起來合理。
(3)滿足或超越期待。
(4)使人們保持忙碌。
(5)公平。
(6)積極的開始,積極的結尾。
下面我們就說說這6個原則在優化等待體驗上的運用:
概念模型是幫助人們把復雜自然現象轉變成可用的,可理解的心理模型。概念模型可以幫助用戶理解事物,了解事物如何運作以及當前處在哪個階段、理解當前為什么處在等待狀態,以及產生對未來即將發生事情的預估和期待。
如用戶通過餓了么下單后,app上會用插畫顯示商家備貨、騎士送貨的過程。讓用戶了解外賣送到手中的整個流程,以及當前處在流程的哪一階段,距下一階段預估還有多久。如果是雷雨天,訂單頁面的插畫還會模擬實時天氣情況,用戶看到插畫想到騎士正在雷雨環境下送貨取貨,也會理解騎士配送辛苦、理解當前配送緩慢,緩解等待時的負面情緒。
使等待看起來合理,即通過概念模型使用戶理解為什么要等待,明白等待是有緣由的。
如用滴滴打車時,當我們按下呼叫快車按鈕,頁面會顯示動效光波信號向外擴散,同時會顯示當前排隊人數。設計師通過設計建立一個簡易的概念模型,讓用戶理解當前的等待的原因,并認為等待是合理的。實際上滴滴派單的算法流程可能與頁面顯示的流程不同。但用戶等待時會理解此時手機正在發出信號請求駕車信息、或此時正有多人在排隊、或此時正在等待司機接單。
滿足或超越期待指用戶給等待時間估算時長時,如果用戶實際的等待時間比心理預期的等待時間要短,用戶會有相對比較好的心理體驗。
心理學專家曾做過一個實驗,同等時間下,同樣長度的進度加載條有三種進度顯示方式:進度條速度勻速、速度先快后慢、速度先慢后快。三種相比較發現,當進度條增加速度先慢后快,用戶的體驗最好。而用戶體驗最差的是加載速度先快后慢,因為如果開始的時候加載速度比較快,用戶一開始就有了較高的心理預期,當速度變慢時便低于用戶的心理預期,感知體驗就會變差。
使人們保持忙碌即讓用戶在等待的時候有事可做。因為當人們非空閑時,對時間的心理感知會比空閑時對時間的心理感知要短。
利用這個原則的設計如:CorelDRAW軟件下載安裝時,軟件安裝等待頁面除了顯示進度條還放映國際優秀設計圖片,CorelDRAW用戶一般都是設計愛好者或設計從業者,通過讓他們瀏覽優秀設計圖片來度過軟件安裝時間,避免用戶純空閑等待。
當用戶正在等待時,如果等待看起來是合理且公平時,不易引起用戶的負面情緒。如果等待看起來是不公平的時候,更容易引起用戶的負面情緒。如:當你正在排隊買票時,同等條件下,你看到后來半小時的人比自己先買到了票。你可能會抱怨,“為什么比我晚來半小時的人都排到了我卻還在等”。
針對公平方面的設計如銀行的叫號辦理業務系統。用戶統一到取號機前取號,每當一個窗口的空出來,叫號系統便叫一個最早的號去該窗口辦理業務。這比人們直接分散在多個窗口排隊會更公平,不會出現早來卻因為這個窗口排隊慢而導致等待時長比晚來的用戶更長的情況。同時把多個小隊伍變成一個大隊伍,用戶感知上也會覺得隊伍移動的更快,也有助于降低等待的負面情緒。
德國心理學家艾賓浩斯曾提出系列位置效應,指記憶材料在系列位置中所處的位置對記憶效果發生的影響,包括首因效應和近因效應。(來源:百度百科)即人們回憶體驗時,在最開始和最后的體驗比中間的體驗更能讓人印象深刻。所以當我們在設計等待流程時,要保證等待開始和等待結束時有較好的體驗。
如當我們在餐館排隊結賬時,一些餐館結賬臺旁邊會放著一盤薄荷糖,收銀員幫用戶辦理結賬時會對用戶說可以拿幾顆薄荷糖。這個小獎勵會讓用戶走出餐館后對剛剛結賬時排隊等待的不好體驗的記憶變弱,而對最后的薄荷糖有更深的印象,從而對餐館也留一個相對好的印象。
關于等待體驗的優化設計案例還有好多,但基本的設計原則是相通的。
我們在實際設計時可先整理用戶整個體驗流程中可能等待的點,看看哪些是可以通過設計或技術縮短實際等待時間的。針對不能縮短實際等待時間的點,我們先預估每個等待的時長,并設計概念模型讓用戶理解等待的緣由且能預估等待的時間,且采取合適的方式讓用戶在感知上盡量縮短等待時間。
文章來源:站酷 作者:醬紫丫
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
從 7 大設計領域、400 多個設計案例中,我們總結出了 9 條屬于 2021 年的設計趨勢。
在 2020 年發生了新冠疫情等許多歷史性的大事件,但世界始終保持著對未來的希望,好設計的誕生也不曾停步。
通用信息平臺 UED 上海團隊歷時一個多月,從數字產品、品牌創意、平面視覺、工業、空間、娛樂與時尚等多個領域收集近 400 個 2020 年具有代表性、前瞻性的設計案例,對它們進行聚類分析,并結合下一年的時事變化來預測 2021 的設計趨勢。
△ 團隊按領域分組收集素材
設計與時代背景有著密不可分的關系,我們認為會影響 2021 年的設計趨勢的因素主要有以下三個:
1. 后疫情時代的影響
新冠疫情的持續除了改變了大眾的生活習慣外,也意外地推動了各行業加速線上化轉型、提供「無接觸」服務,出行上的限制催生了游戲等線上娛樂市場的蓬勃勢態,甚至一定程度上疫情也影響了社會和經濟格局,導致了一些新政策的出臺。
2. 00 后成長為新主力軍
新生代的崛起導致了流行風格的一系列變化:二次元等亞文化成功破圈進入主流消費市場、復古設計的重心從 90 年代向千禧年偏移。他們以更開放多元的思維方式和新視角,影響著下一個 10 年設計題材的選擇。
3. 軟硬件技術的發展
近年來智能設備的性能上限不斷被刷新,誕生了許多創新的設備形態,使更生動的交互體驗成為可能,另一方面,AR/VR 技術經過上一個十年的雕琢,性能和效果逐步得到驗證,具備了量產的技術沉淀,將迎來一波商用普及的浪潮。
我們從去年的設計作品中提煉設計概念,并結合上述的社會背景推測其在新的一年的變化與發展,最終總結出了視覺表現和體驗交互兩類共 9 條 2021 年度設計趨勢。
△ Adobe MAX 2020 視覺作品 by Stu Ballinger
概念闡述
「 酸性平面」風格融合「Y2K」美學的未來感,形成了獨特的「未來酸性金屬風」,典型特征有:
酸性漸變:一種會引起不適但足夠刺激的迷幻漸變色。這類配色打破了傳統美感的標準,追求感官刺激,給人異次元下致幻而不安的感受。
金屬感:以熔融形態在環境光下呈現出詭秘的反射,這種反常規的液態質感所帶來的違和,在傳統科技感上增添了幾分神秘。
透明膠質:液體或是 PVC 半透明膠質,配合流體動感的形態,折射出光的幻彩,給人強烈的亦真亦幻感受。
應用場景
未來酸性金屬風反差感兼具未來感的特征,決定了它在時尚、音樂、潮流以及藝術圈有很好的延展性。服裝鞋包、藝術家創作,以及傳達個性自我的品牌平面廣告,都可以看到其身影。
相關案例
△ The Future Vision of Microsoft 365 宣傳視頻
概念闡述
隨著產品硬件性能的不斷升級,設計語言也開始追求真實感。相比過去,「類玻璃柔光材質」除了更注重「輕」的概念,在質感上也呈現出更加輕盈、細膩以及自然的趨勢。
類玻璃材質的表面呈現微磨砂感的半透明質感,透光而不透視,通過清晰的邊緣來強化物理質感,兩者對比呈現出一種「虛實結合」的美感。該材質多以輕薄的片狀形態懸浮于場景中,減輕重量感以帶來輕盈的視覺感受。
應用場景
「類玻璃柔光材質」輕盈與通透的視覺感受,能營造出未來感十足的場景,很適合闡述科技智能的概念。因此該風格成為了一大波科技背景公司的設計首選,其中主要以硬件系統以及 B 端、工具類的產品為主,應用場景包括界面設計、推廣視頻等。
△ Louis Vuitton × League of Legends Collection
概念闡述
近年來,品牌跨界合作的對象不再局限于品牌之間或明星名流,眾多服裝、奢侈品、數碼產品等消費市場的強勢品牌紛紛向游戲和二次元等虛擬 IP 拋出跨次元合作的橄欖枝。這種合作方式成就了「三次元」品牌與「二次元」IP 的雙贏局勢,將在 2021 年繼續發展并造成更廣泛的影響。
應用場景
游戲和二次元元素大熱,手機、化妝品、服裝等產品通過結合該類元素,以新的形式吸引年輕用戶:為像素風格的游戲設計服裝、為全息的虛擬偶像捏臉塑形、為動漫人物拍攝雜志封面、在一款電子游戲里搭建新品發布會等,相應地,跨界應用對設計師的涉獵領域和技術跨度也有了更高的要求。
相關案例
一線頂尖奢侈品品牌相比以往與動漫游戲類二次元 IP 合作更頻繁,除了經典動漫,也不乏新鮮的熱度 IP。
在《Evangelion 新世紀福音戰士》25 周年,OPPO 聯名這部影響一代人的動畫神作,推出了一款從快遞包裝、外盒甚至是卡針,里里外外都深度融合 EVA 元素的聯名機型。
△ OPPO × EVA 定制版手機 OPPO Ace2
美國說唱歌手 Travis Scott 2020 年在《堡壘之夜》(一款線上競技游戲)中辦了一場虛擬演唱會。這場演唱會共吸引了 1230 萬玩家同時在線觀看。
△ Photographed by Sean Thomas, Vogue, January 2020
概念闡述
「親生命性設計」原為建筑和空間設計中的概念,意為「運用天然材料、自然光和植物創造令人愉悅舒適的建筑環境」。受城市化進程加劇及全球疫情的影響,人們渴望親近自然的欲望和需求變得越來越強。產品和自然元素彼此交融,從主客體關系轉為互相依賴的存在,以更為和諧與自然的交互方式與用戶進行溝通與連接。
應用場景
自然元素將在不同感知維度以更貼近真實自然的方式融入各個領域的設計,比如在工業產品設計中使用更加貼近自然物體的表面肌理,在建筑設計中將人造空間作為自然空間的延伸,在數字產品設計中使用更擬真的自然音效和光照等等。
相關案例:
2021 時尚界不約而同地強調了自然元素的使用和對環境保護的呼吁,各大品牌都用自己的方式演繹了「自然共生」的服裝設計系列。
還原自然界中的真實材質成為了新的設計靈感,被應用到各種設計中。
Vivo OriginOs 系統通過行為壁紙系統將常用的系統功能和展現真實自然場景的動態壁紙進行聯動。
△ Vivo OriginOs
△ 山水 Mountains & Rivers by Particle (Gao Yang)
概念闡述
近年,國人的文化自信逐漸增強,國家擴大內需、擴大消費的政策導向為國內消費品品牌帶來了巨大的機會。「中國設計」的標簽已經成為新一代的時尚潮流,帶有中國本土個性、體現中式美學的設計受到更多品牌的青睞。
應用場景
越來越多中國品牌開始注重漢字 Logo 的使用和設計,更多現代設計力求為中式美學擺脫民俗、皇家的刻板印象,木、石、竹這些蘊含中式精神內核的元素成為了工業設計、建筑設計中新的繆斯。
隨著中國的國際影響力進一步擴大,國際品牌也會提高對中國市場與文化的關注,在設計上融入更多本土元素。
可口可樂中國與漢字文化推廣機構「好字在」和方正字庫聯合推出的這款字體,反映了可口可樂對中國文化的深入理解和對本地化運營的關注度。
可口可樂聯合推出的中文字體「在乎體」
同仁堂旗下「知嘛健康」在北京開設線下體驗店,店鋪設計提煉漢字、中藥、藥房等中式元素作為靈感,用現代化的方式呈現,是極具現代感的「中式」空間設計。
△ 同仁堂旗下「知嘛健康」線下體驗店 by 無象空間建筑
△ Microsoft Haptic PIVOT 微軟腕帶觸覺設備
概念闡述
在增強現實中,人機交互將更多發生在物理空間里,虛擬的數字信息將借助形變和震動被模擬為觸感。得益于新型傳感器的拓展應用,硬件設備實現了對溫度、形態、力量的數據監測,同時各大硬件廠商也逐步對震動馬達等硬件進行了完善升級,從而為進一步的觸覺模態設計提供了支持。
應用場景
涉及領域除了現有的游戲、駕駛、健身等場景外,更有趨勢被應用于創新教育、操作培訓及有風險的試驗演練中。
相關案例
任天堂在健身環 Ring-Con 內加入的力學傳感器實現了對力量(張力、拉力、壓力等)的監測,并利用 Joy-con 震動來對用戶動作的標準性進行反饋提示。
△ 《健身環大冒險》on Switch
微軟研發部開發出了一套 Haptic PIVOT 腕戴觸感反饋方案,通過活動的機械結構,更逼真地模擬出物體的握持感。
△ Haptic PIVOT 使用演示
索尼推出配備了音圈馬達的 PS5 DualSense 無線手柄,扳機鍵內增加了一個由電機驅動的齒輪,通過震動模擬出槍支的后坐力、彈簧的彈力、繩索的拉力等物理效果。
△ PS5 DualSense 無線手柄使用演示
△ Flight Booking AR application by Bala GN
概念闡述
現實生活中,人與人、人與物接觸產生的實體服務稱為線下服務,由網絡等技術支撐的人與硬件設備交互的服務稱為線上服務。在硬件設備、網絡技術成熟的當今社會,線下服務向線上服務遷移的過程中融入了更多 AR/VR 等虛擬服務,也帶來更多新的設計行為和交互方式。
應用場景
原本需要親臨現場才能完成的體驗,現在可以通過線上的方式實現,這不僅體現在因疫情催化產生的線上辦公、線上畢業展等強需求場景,也在購物、試衣、健身等更貼近生活的領域應用。
相關案例
用戶在 Gucci APP 上挑選自己喜歡的手表后,將手機攝像頭對準手腕,就會顯示「試戴」效果。
△ Gucci APP 虛擬試表
各大院校畢業展因疫情無法在線下舉行,一些學校通過線上展廳的方式,讓學生的畢業作品可以通過網絡瀏覽。
△ 中央美術學院 云端美院
△ 香港理工大學 polyudesignshow
Balenciaga 2020 年用一款電子游戲代替了線下時裝發布會。在視頻游戲中,玩家能夠在五個主題場景中欣賞到 2021 秋季系列的新款服飾。
△ Balenciaga:《后世:明日世界》
硬件設備的創新使線上健身指導有了更合理的使用場景和更人性化的體驗,用戶通過線上內容和服務在家也可以獲得接近健身房的體驗。
△ Tempo Studio:家庭智能健身設備
△ POPMART 泡泡瑪特
概念闡述
「情感療愈」是一種有溫度,無攻擊性,注重細節的設計方向。這類設計旨在治愈修補心靈中的創傷,不只注重功能的完善,也更在意情感內涵的打磨。它也可以幫助人們敞開心胸,接納自己內在的所有面。
應用場景
在產品設計中,一些撫慰人心的小功能、小彩蛋往往帶有著治愈人心的力量。在角色形象上,柔軟、可愛的造型在帶給人無攻擊感的同時強調著陪伴的意義。在娛樂領域,也出現不一味強迫用戶達成某個目的慢節奏「佛系」游戲。
相關案例
網易云音樂來自「張開雙臂擁抱別人」動作靈感的抱一抱彩蛋,讓原本只有文字點贊的評論區更有溫度。
△ 網易云音樂的「抱一抱」動效
Switch 游戲《動物森友會》在 2020 年異常火爆,歸功于其萌系治愈的風格和追求自然隨性的生活方式,也讓疫情期間的玩家們暫時逃離嚴峻緊張的現實生活。
△ Switch:《集合啦!動物森友會》
盲盒的精神內核是「收集、陪伴、治愈」,泡泡瑪特簽約的 IP 形象,大多以可愛、萌系為主。
△ 泡泡瑪特的盲盒萌系 IP 形象
Disney 與 Pixar 出品的動畫電影《心靈奇旅》用輕松的方式探討生活的意義和人生的價值,電影用它獨特的美術風格和感人的故事斬獲超高的口碑和評分。
△ Disney · Pixar《心靈奇旅》
△ OceanPlastic 廢棄塑料重造
概念闡述
2020 年世界各地重大自然災害頻發,環境污染嚴重,刺激著人類對生活環境的審視。更多品牌開始探索材料再利用的可能性,從自然衍生產物出發,從而降低對大自然的破壞。年輕一代對于再創造產品有更高的接受度,循環材料轉化為塑料顆粒,組合成獨一無二的花紋和肌理,給人專屬限量感,再生材料成為新的流行元素。
應用場景
消費者將繼續青睞和衛生健康、環境保護相關的價值品牌,越來越多的快消、包裝廠商開始研究材料回溯,組建相關部門,加入循環經濟浪潮中。
相關案例
運動品牌 Adidas 與 Nike 都推出了由回收廢料制作的充滿設計感的產品,在宣傳品牌環保意識的同時也引領了再生產品的潮流。
△ adidas 與 Parley Ocean 合作推出由海洋回收廢料制作的聯名產品
△ 同樣使用了廢棄材料的 adidas 球衣
△ Nike 將生產車間加工過程中產生的邊角料轉化為產品設計的主要材料
由 99% 廢棄奶茶杯+ 1% 廢棄原茶渣再生而成的「真垃圾·手機殼」
△ TRASHAUS 真垃圾再生手機殼
Freitag 的 2020 新款 F601 MALCOLM 是一款個性化背包,用一塊再生的防水油布保護,并由用空 PET 瓶制成的防水織物制成。
△ F601 MALCOLM
除消費產品外,肯德基的可回重復利用餐盤、星巴克倡導的紙質吸管、外賣行業各公司的環保舉措等也體現了餐飲外賣行業對循環經濟的重視。
在充滿未知的 2021,無論是后疫情時代世界的變化、新技術的發明應用或是國際社會環境的走向,都會影響大眾的生活習慣、行為方式和審美取向,同時也決定了未來設計的發展方向。但這其中不變的,是軟硬件發展不斷突破視覺表現的上限、設計師追求「以人為本」的核心理念以及通過設計去提出和解決問題的目標。
我們期待著上述預測性的分析能在今年的設計中被驗證。但設計本身是一個迸發新奇創意的過程,也希望上述的設計趨勢能激發設計師們更豐富的靈感、為設計領域提供更多的可能性。
文章來源:優設 作者:今日頭條UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在日常產品運營活動中,用戶運營設計是不可或缺的一部分,其展示的內容也是各式各樣。本文結合騰訊動漫日常的運營活動設計,淺談一下在遇到需求時,如何根據不同的活動類型快速定位適合的風格,提高運營活動質量,促進用戶轉化。
1. 用戶運營
從定義來看,即以用戶為中心,根據用戶特性和運營核心目標,制定相應的運營策略,對策略效果進行收集和驗證,以達到運營的核心目標。所以用戶運營主要圍繞用戶、活動、目標來展開,借用增長里的 AAARR 概念來說用戶運營的目標:
作為用戶運營設計師,我們應對用戶生命周期 AAARR 模型有一些深刻的理解,以最低的設計成本來獲得最大的運營收益。
2. 運營設計團隊在做什么
目前我們用戶運營設計團隊主要負責的項目是:騰訊動漫會員和平臺類活動設計、運營推廣、增長服務等相關業務?;谟脩舸倩詈蜖I收核心目的延展長線運營、用戶增長、會員服務、大型促銷等工作內容。
1. Q 版漫畫風格
Q 版在動漫設計中比較常見,風格一般會比較可愛、幽默、搞怪···而且有很強的線條表現力,能有效吸引用戶注意力,提升頁面的趣味性、友好度和品牌感。
2. 涂鴉插畫
涂鴉風格是一種有趣且極具創意的風格,在頁面中使用涂鴉設計,充滿自由和力量感,能夠打破扁平化的運營視覺,強化故事感和情感性。
3. 肌理插畫
肌理插畫的色彩明快,畫面簡潔,這種風格通常會加入雜色,增加顆粒感、質感,也會通過明暗色塊增加立體感,適合快速迭代的活動需求。
4. 孟菲斯插畫
使用高純度、對比強烈的配色,和無規律可循的排版吸引人的眼球,該風格大膽、活潑且富有表現力,通常會運用描邊協調畫面并突出重點,給人良好的視覺舒適感。
5. 漸變插畫
漸變插畫運用大量低飽和度的漸變,營造出色彩鮮明、對比強烈的光感,漸變插畫細節豐富,時尚、前衛的視覺沖擊力,在一定程度上也能夠促進用戶的興趣點。
6. 劃重點
插畫在動漫平臺用戶運營活動中是主要視覺觸發器,能瞬間傳達大量信息。在日?;顒又行杞Y合運營主題和用戶的需求,合理選擇相應的風格進行設計,強化頁面的吸引力。同時也應做好運營插畫設計的構圖、元素、配色等,注重頁面細節,強化活動交互,讓用戶可以更快理解和操作。
這里用騰訊動漫開直播系列宣傳活動為切入點,進行案例分享。
騰訊動漫上線全新的系列直播活動,覆蓋唱歌、聊天、手工、繪畫等多種泛次元內容,需要設計預熱期和正式期的頁面,宣傳本次直播活動同時,為騰訊動漫上線直播產品功能打好基礎。
在設計過程中,要結合實際運營需求,充分發揮專業能力,產出匹配的設計思路。當需求方在視覺要求上無法輸出明確風格偏好時,可利用活動主題挖掘用戶核心需求并形成有效反饋,從而找到適合的設計風格。
分析&溝通需求
騰訊動漫將借助此次活動,將平臺的直播內容和品牌印象最大限度觸及給用戶。
為此我們確立了本次活動在需求上的目標
用戶定位
直播運營活動離不開主播和用戶的參與
可以看到直播為觀眾提供更多與喜愛的畫手和偶像互動的機會,同時也為主播作者打開了更快速直接的傳播渠道。
交互梳理
1.預熱頁面
核心:打造用戶認知,對直播活動內容的理解,流量分發,促使用戶關注接下來的直播活動,以及訂閱個人喜歡的主播
頁面的首屏頭部區域是利益點區域和活動氛圍搭建。中部是強心智內容,也就是純運營強控制和活動推薦的內容。最后部分是弱心智內容,主要用于活動流量承接的主播內容推薦。
2.正式活動頁面
場景化氛圍搭建,內容與形式勾起用戶點擊欲望。
頁面頭部用主題文案和視覺元素,在首屏加入當前直播視頻窗口,讓用戶快速沉浸于直播場景中。在直播的表現上,堅持視頻排版為主,融合直播屬性,吸引用戶關注。
關鍵詞提煉
通過對活動定位和用戶進行設計分析,我們把對“騰訊動漫開直播”傳遞的感覺轉化為系列可表達的文字,并提取活動關鍵詞“直播、 互動、彈幕文化、潮流、動漫符號、二次元、沉浸感”進行思維發散。
視覺化表達
基于這些關鍵詞的概念方向及騰訊動漫直播場景內容,對比目前市面上部分直播類設計風格發現更多關注的是直播氛圍營造。因此我們在場景化設計時需將輕質感的二次元化視覺元素融入到畫面中,結合常用的插畫設計類型,我們選取漸變的插畫風格更符合直播沉浸感的主題。
主色調使用炫目的紅黃品牌色漸變設計,應用冷暖對比增加直播場景氛圍,優化增加熒光質感與光影,使用藍紫顏色點綴增加視覺豐富度,凸顯細節,并有效劃分視覺區域,用色彩使設計整體和諧統一,突出活動主題,與體驗者達成情感共鳴。
4.設計發力
直播視覺調性營造
我們立足平臺品牌屬性,從形、品、質三大緯度提煉視覺因子。
二次元平臺屬性融入
針對動漫平臺的直播場景,探索出符合他們審美的視覺風格,需將二次元的要素融入,包括形態(物體符號擬人化),比如在唱見 icon 上將話筒加入眼睛;樣式(元素 Q 版化),比如開播提醒 icon 加上一只軟糯的黑子等
插畫風格鎖定
預熱期在風格上選擇了以企鵝娘為主體,手機外框作為基本型去組合頭圖,熒光黑子和視頻黑子左右打造直播氛圍,同時在畫面上迸發出彈幕和擬人小元素,形成強有力的沉浸感。
正式期在風格延續預熱頁面的組成元素,將主題文字作為頭圖重點,營造與直播相關的場景,使用手機框型作為整體概念圖形,來表現屏幕互動,寓意主播與觀眾的鏈接。采取弧形切割頭圖與頁面,將用戶的視覺聚焦到直播中模塊,突出活動的主題。
用戶運營活動不是做完頁面的視覺工作就結束了,在上線之前,我們還需要延展一系列的物料設計,如:app 首屏 banner、小紙條、通欄、福利頻道等,每種素材的規格不同,要求也不同
面對種類繁多的運營需求,我們可能無法迅速感知哪種風格會比較貼合活動調性,但通過活動定位和用戶需求的分析,可以幫助我們找到視覺方向,然后結合自身的設計方法和技巧,靈活應用到工作項目中。這里要求我們掌握更多領域的能力,發揮出更多不同的表現風格。
在有限的時間和資源下,跨團隊的高效溝通能夠有效的提升效率,針對運營需求風格偏好,快速定位到相應的設計感覺。
不要盲目參考競品的風格,首先要考慮自身的品牌調性,根據品牌特色和用戶特點來確定風格。項目案例中的設計起初就出現了這樣的問題,最后融入了品牌的顏色和二次元屬性,才讓設計變得合理。
針對多時期業務線下的場景搭建,視覺規范化顯得尤為重要,在案例中,預熱期和直播期元素互通,視覺風格統一,提升活動的品牌感知,降本增效,提升設計效率,確保宣傳資源的一致性。
以上是我對運營設計風格選取的一點設計思考,期待與大家一起探討交流。
文章來源:優設 作者:騰訊動漫TCD
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這期節目的嘉賓郎啟旭成長在外婆家的鳥叫蟲鳴之間。啟旭是這樣描述他的外婆家的:「我外婆家在貴州的山村,背后有一座山。每次回去,我都會想起小時候在那里度過的一些日子。夏天五六點鐘,從森林走到村子里,路上一個人都沒有,日光逐漸暗下去,青蛙開始叫,整個山里面都回響起來鳥叫蟲鳴的聲音,安靜、空曠。下雨之后出太陽,如果你在太陽落山的時候去山上,可以采到很多蘑菇?!?
后來,啟旭離開山村,來到城市生活、讀書和工作。他的成長軌跡和我們的很多嘉賓很像,十來歲的時候,開始學電腦、讀《大眾軟件》,在大學里試過創業,畢業之后做了產品經理。那時候,連啟旭自己也沒有想到,若干年后,他懷念的外婆家的聲音,會以一種特別的形式,重新回到他的生命里。
2015 年,那是啟旭在職場的第 3 年,他工作忙碌,卻也波瀾不驚。那時候正趕上國內「創新創業」的熱潮,啟旭的朋友想拉著他出去創業,但被他婉拒了。同年五月,啟旭出差來到硅谷參加會議。會議的間隙,啟旭去了硅谷附近的一個海濱小鎮。他在小鎮的海灘上坐了一下午,聽著海浪拍打沙灘,他暫時忘記了太平洋另一端的繁忙,開始了一場跟自己內心的對話。這場對話后來改變了他的職業軌跡。
Hoka:你說你在卡梅爾小鎮呆了一下午,你當時腦子里面在想什么?
啟旭:我當時就有種很神奇的感覺,有點像你站在太平洋的另外一端,回過頭去看原來的自己。會想到我應該做什么選擇、要去做什么事情?那種感覺是一種抽離,跳脫出日常的環境跟平時工作的軌跡,讓你有機會去思考這些問題。后來好多時候我都會回想起來那個下午。那個下午本身沒有給我帶來突然的這種偉大的靈感、或者很清晰的決策,但我覺得那樣一個狀態很多時候會提醒我自己。
回到廣州,在每天的日常生活之外,我就開始去思考我想做什么事情?我想要通過自己的時間、自己付出的努力,去創造什么樣的產品?這些問題就開始冒出來。
我想要去做一些自己更認可或者說更有成就感的事情。我那個時候應該是 26 歲,也挺年輕的,反正也 nothing to lose。我也一直是一個比較有創造欲的人,想要去做一些自己認可的事情。如果到最后也沒有什么結果,我覺得我也 OK,因為我至少去試過了。所以就開始了創業,離開大公司,自己出來做。所以我為什么說我自己不是一個特別典型的創業者,因為我離職的時候,其實連自己做什么都沒想好。其實后面回想起來整個過程,我也覺得好像確實還蠻有勇氣的。我其實當時沒有這個感覺,但是我后面回想起來,覺得確實可能也不是所有人都會做出這樣的選擇。
Hoka:這之后你就開始創業了,我知道你創業一開始其實做的不是潮汐,而是做了一個 SaaS 軟件。你當時是怎么樣的一個狀態?
啟旭:當時我們自己做的那個項目,坦率說,確實從需求的選擇、切入點來看,我覺得還是有很大的問題的。因為是第一次創業,所以是一個摸索的過程,包括我那一次也沒有融資,都是用自己的錢,所以當時各方面的壓力都會很大。一方面是你出來一段時間,你也肯定希望產品上、業務上看到一些進展。第二是你也會有一些現實層面的壓力,不管是資金也好,還是團隊。當時我們也是有一個比較小的團隊,團隊的伙伴們其實也需要有一些發展上的考慮。
在公司里面做事情,相對來說業務模式都還是很清晰的,它是一個確定性比較高的事情,它可以提供比較安全的環境,你不需要去操心業務,或者說市場變化。但是你創業,或者說自己去做一個產品、推向市場的話,你考慮的問題、思考的角度(會更復雜),包括你也受限于你自己的現實狀況、團隊的現實狀況,所以會有一個挺正常的焦慮或者壓力的過程。再加上那段時間其實自己家里也有一些情況,加到一起,有一段時間挺糟糕的。
Hoka:我在其他報道里也讀到過,說你當時壓力很大,正好你大學的時候學過冥想,所以想到了可以去做冥想緩解壓力。你大學里怎么會想到去上冥想課的?
啟旭:當時我們正好有一個哈佛過來的老師,他開設了關于冥想、佛教的一門課,我當時很感興趣就參加了。我自己在 2016 年這個節點,因為遇到了剛才說的狀態,想起來我大學接觸了冥想,所以決定開始深入去練習。也是很陰差陽錯,就覺得好像可以試一試,從最基礎的數呼吸這些事情開始,每天做十幾、二十分鐘,這樣堅持下來,有時候睡前失眠的話也會冥想。
Hoka:我看報道上說這段經歷也啟發了你去做潮汐。但是潮汐最開始其實是一個白噪音或者說自然聲音的產品,自然聲音這個部分(的靈感)是哪里來的?
啟旭:因為我剛才也分享,我從小是在貴州長大,在一個比較偏原生態、有很多森林、山區的地方,所以這些東西對我來說,還蠻有那種所謂的療愈作用的。上大學的時候,我是第一次離外婆家那么遠,有時候下午兩三點鐘,我就會想起來,這個時候我外婆家的院子里面在發生什么。其實無非就是白云在飄、院子的光影在流動,太陽從很曬然后到下山,整個世界都很空曠、很安靜。但與此同時,我們在城市里面對的是車水馬龍,有很多煩心的事情。有些時候我突然就會想起來這個對比,我們覺得這個世界每天都有很多變化,但其實也沒有那么多的變化。
志珊:所以是不是當你聽到一些自然的聲音,它會把你從現在的創業狀態帶回到另外一種狀態,比如回到小時候那種感覺,讓你感受到放松。
啟旭:對,當時我就是一邊做冥想,一邊找很多這種自然的聲音去聽,這個過程給了我自己蠻大的幫助跟支持。所以當時就想,要不就把這樣一個放松減壓的體驗做成一個產品試一試,大概就是這樣子開始了最早的潮汐。我們當時挑了五個自然聲音,左右滑動就可以切換聲音。
Hoka:當時白噪音可能已經有蠻多人在做了,我看那時候潮汐有一個賣點是結合番茄時間,這個還蠻有意思的,你們是怎么想到這個點的?
啟旭:因為番茄工作法是 25 分鐘工作、5 分鐘休息,我覺得如果 25 分鐘工作的時候,我能夠通過聲音來暗示說你需要專注,就相當于把我們在番茄工作法里面的 25 分鐘通過聲音來填充起來,我覺得這個點就很棒。這其實是一個更完整的時空的概念,休息的時候我就不播聲音了,你就可以站起來去喝杯水。
把白噪音或者說自然聲音跟番茄工作法結合到一起,我們是在這個領域里面的第一個產品。這樣大家會非常明確地對應說這個東西可以幫助我專注。如果我說給你五個自然聲音,你能想到能用它來干嘛嗎?你其實不太容易想到的,對吧?但是當我們這樣設計之后,它就很簡單,用戶大概就知道這個產品可以用來幫助我專注,幫助我獲得心流體驗。
我們當時主要的工作還是在做原來的 SaaS,所以這個項目其實是苦悶工作之余的一個調劑,做一個產品來滿足一下自己的那種感覺。但是這個產品出來之后也很神奇,明明我們當時所有的宣傳語上主打的都是專注、心流體驗,但我們發現用戶會用它在各種千奇百怪的場景,會有人用它來助眠、用它來敷面膜。敷面膜那個場景我印象特別深刻,因為我覺得好 match,我覺得用戶太聰明了,因為敷面模需要大概 15 分鐘到 20 分鐘,你敷上面膜,打開潮汐,然后開始一個 timer、聽自然聲音,這基本上就是一個 mini spa 的概念(笑)。
包括還有一個媽媽用戶,她自己在家 SOHO 工作帶小孩,她小孩剛出生,她一邊工作,一邊打開潮汐,這個時候她突然發現她小孩也睡著了,好像一箭雙雕的感覺。就挺神奇的,用戶會挖掘出來很多用法。但是確實最早那個點是提供一個時間跟空間,大家能夠隨時隨地從現實生活、從很繁雜的當下抽離出來。
Hoka:什么時候你開始覺得這么一個最開始你給自己做的小工具,可以變成一個公司、變成一個嚴肅的事業來做的?
啟旭:我們其實在 2017 年的時候就把 SaaS 給停掉了,也是把那個項目關掉之后,開始去想接下來該做點啥。這個時候自然目光就會看到潮汐,發現原來潮汐在當時那一年中間,差不多有一兩百萬的累計下載。而且我們一開始就做了英文版,還會收到一些海外用戶的郵件,大家也知道,海外用戶寫郵件的方式,就更讓你覺得挺有那么回事的感覺。我們當時收到過一個土耳其的用戶來信,那段時間好像土耳其的政治格局有點動蕩,他就寫信來告訴我們說,特別謝謝我們這個產品,讓他在那樣一個環境下,還能夠去獲得一些平靜跟專注,能夠去投入生活、投入工作,這也是我印象很深刻的一個反饋。
所以我們回過來看 2017 年的時候,就發現也積累了一些用戶,而且還持續不斷地收到很多用戶來信,告訴我們他們的需求是什么。其實這個過程中就有很多人說他在冥想了,也有很多人說他有睡眠問題了。所以基本上用戶已經把我們接下來該做的事都已經講清楚了,從那個時候我們就開始填坑了。確實很有意思,你提出來一個想法,可能一開始沒有把它講得那么清晰、完整,但是用戶其實能夠體會得到你大概在做什么,他會以他的方式去告訴你說他想要什么,你會發現他想要的那個東西,可能跟你最早想要去做的那個更完整的東西是很 match 的。
同時海外像 Calm、Headspace 等一些產品,我發現他們在 2017 年有一個明顯的發展的拐點。所以我覺得一方面我們自己有一個驗證,有用戶的積累、用戶的需求、呼聲,能夠感受到大家對焦慮、壓力、睡眠(的需求),包括在信息過載、過度娛樂化、過度消費主義的情況下,其實大家很需要這樣的產品和服務,去解決身心健康方面的需求跟煩惱,但是坦率說選項并不是那么多,所以我覺得這個事情肯定是有商業上的機會的,也比較符合我自己做事情的價值觀,所以就覺得好像可以嚴肅地去思考這件事情是不是可以變成一家公司來運作。我們就從那個時候開始正式地成立一個公司,而且 all in 到潮汐,就這么開始了。
Hoka:現在潮汐已經遠遠不只是 5 個自然聲音了,除了那些比較常見的雨聲、海浪這樣的聲音,我看到你們還有一些挺特別的聲音,比如「鯨魚」,能不能跟我們講講「鯨魚」的故事?
啟旭:我們的小伙伴真的找了特別多的鯨魚,我可以 99% 地確定說我們潮汐的鯨魚是目前這個世界上你能聽到的最好聽的鯨魚的聲音。真的,我們找了 9 個月還是 12 個月。(為什么這么久呢)其實電影里面也會有這樣的問題,比如說大家真的希望看到真實的 90 年代的場景嗎?其實是不一定的,因為大家對 90 年代的場景,或者比如說 30 年代的紐約,大家會有一個想象,但可能它不是真實的。回到鯨魚也是一樣,其實真實的鯨魚的聲音,可能有些人聽了會不太舒服的,它可能沒有大家想象的那么美好、那么好聽的,所以這個時候我們需要在中間去找一個既是真實的、但是也比較符合大家想象的鯨魚的聲音,所以難度就在這里。就蠻奇妙,所以什么東西是真實的呢?我們產品就到處是充滿了這樣的一些情況:「真實」的東西不見得是大家覺得「真」的東西。
Hoka:你們鯨魚的音頻的時候,是在很多個不同的可選的素材里面一直在聽嗎?
啟旭:對,因為鯨魚的聲音錄音本身就不是那么多,所以我們會去主動聯系一些錄音師,問他們有沒有(鯨魚的聲音),是個漫長的「追鯨魚」的過程(笑)。
Hoka:錄音師這種職業是專門去海底、水下錄聲音的人嗎?
啟旭:對,其實國外這部分會比較多一些,有一些人可能本身就是攝影師,在做(海底)這方面的工作,然后他可能對(錄音)還蠻感興趣,就錄了一些東西。當然國內我們也有一些合作伙伴。
Hoka:除了「鯨魚」之外,我覺得你們很多聲音很有東方傳統文化的味道,像什么「竹林」、「泛舟」、「白馬」、「猿鳴」,這些感覺像是一個主題下的。能講講你們是怎么想到這些的嗎?
啟旭:對,這個有點像策劃一個展覽。你可以想象在這個產品里面有不同的房間、不同的空間,根據你今天的心情,去到不同的空間,它的整個顏色、感受和情緒都是不一樣的。比如說傳統文化確實是一個主題,我自己會覺得這是很東方的東西,也是我們很獨特的東西,我們真的非常需要去在意跟珍惜,它有點像是我們這個社會、地域的人的共同想象,也是我們跟歷史的聯結。當然我們也看到今天很多年輕人也很喜歡中國文化,所以我們也希望能夠通過我們的產品去給大家提供一些這樣的體驗。
包括像「猿鳴」我們是跟繽紛自然(合作),他們是做野生物種保護的紀錄片的機構。他們當時拍了一部電影,是關于云南一個特別珍稀的物種,叫天行長臂猿。我們覺得還蠻有意思的,所以當時我們跟他們合作,也在我們場景里面提供了天行長臂猿的聲音,也是希望給大家在日常生活里面也提供這樣一些關注世界、關注自然的角度。
我們希望推出的聲音場景,是大家會用得上、真的有一定的獨特價值的聲音,所以你可以看到我們沒有說特意追求量,我們更多是追求以展覽的方式來做這個事情。
在白噪音之外,啟旭也開始在潮汐里加入冥想相關的內容。我發現,潮汐里的冥想訓練很特別,有關于做飯、排隊、刷牙的訓練,好像乍一聽和冥想都沒有什么關系。比如說,刷牙訓練的畫風是這樣的:「接下來,你可以輕輕地將牙膏送到口中,開始刷牙。細細地體會牙刷和牙齒接觸的感覺。再留意一下,牙膏留在嘴巴里的味道,是怎樣的呢?」我問啟旭,這些內容和冥想有什么關系。
啟旭:冥想本身在歐美是非常流行的生活方式,大家不會把冥想看成好像是一個藥,也不會把冥想看成是一個所謂很硬核的、很宗教化的東西,而是會看成是我隨時隨地都應該去做的一件事情、一種生活方式,這個其實我自己也蠻認可的。我自己理解的冥想或者正念是提倡大家去活在當下,回歸內心。你能夠有一個 moment,在你的生活中給自己留出來一個空白。所以當時定內容的方向的時候,我們其實首先希望給用戶傳達的是比較輕松的感覺,而不是一個課程。我們覺得你隨時隨地可以開始冥想。
我知道也有一些用戶會接觸到冥想,但是一開始可能接觸的是「21 天(學習冥想)課程」這種,其實每次看到這種事情,我會覺得中國人是挺熱愛學習的,但是我們也沒有那么熱愛學習。尤其是當你是在做減壓放松這樣的事情的時候,我會覺得哪里有點不 make sense,有點奇怪,你知道嗎?
Hoka:非常勤奮地學習如何放松?
啟旭:對(笑)。但是我覺得(體系化課程)它還是有需求的,我們接下來也會去做,我們現在也有一些。但是我們希望呈現給用戶的第一印象是輕松的、放松的,是生活方式的。
岔開一點,有些朋友也會問我說什么是冥想?這個時候我會反問他一句,你有什么愛好嗎?有些朋友平時比較喜歡寫書法,或者喜歡登山、徒步,有些朋友喜歡養一個魚缸,看水草、看魚。我就說其實你在看魚缸的時候,有沒有覺得特別安靜,特別平和、沉靜,或者你喜歡書法的話,你在寫字的時候感受力特別強,沒有雜念,其實那個狀態就是在冥想。其實很多時候冥想它不是我們想象的那樣,是一個特別需要做的事情,其實很多時候它就是一種你能夠沉浸在此時此刻,不會擔心過去,也不會恐懼未來,你就只是在感受此時此刻的這樣一個狀態。
所以回到內容設計上,我們的內容理念是將冥想融入生活,bring meditation to life、bring mindfulness to life,我們非常希望用戶能夠把冥想的體驗帶到生活當中。我們挖掘了很多適合冥想的瞬間,比如說刷牙的時候,大家可以去感受一下刷毛在你牙齒上的感覺。我們有時候覺得刷牙像是一個負擔,但其實可以去感受一下刷牙的過程,它是很奇妙的。包括像很多時候,我們遭遇到一些情緒或者疼痛,當然疼痛本身你肯定還是要去吃藥,但是我們也可以換一個角度來看,疼痛它也只是一個感覺。大部分時候,我們跟我們的感覺、情緒連得太緊了,你沒辦法抽離開,連得太緊之后你就情緒裹情緒、感受裹感受,你就很難受。我們很多人都會有這樣的瞬間。但冥想給你的價值就在于說,比如別人說了一句話,你很生氣,你可能馬上就想一拳打過去,或者直接罵一句回去。當然不是說你一定要變成一個所謂好像很溫和,很 gentleman 的,你不可以罵人,不是這個意思。而是說你罵人的時候,你不是下意識地罵人,而是你可能頓了一下,說我現在是不是很想罵他,我很想罵他,那我就接著罵,但是如果我覺得其實罵不能解決問題,我就可以選擇不罵。
比如說我們可能無意識會打開手機,打開抖音就刷刷刷。其實這個時候長期練習冥想它給我們的一個收益就在于說,當你要去做一件事情,尤其是無意識地去做一件事情的時候,你是不是可以突然頓了一下,想一想「我是要干嘛?我是真的要刷抖音嗎?」這樣一個瞬間可以幫助我們恢復我們對生活的掌控感,找回生活的平衡,而不會被我們的情緒、外在的信息牽著走。這個是我們核心要做的事情,或者說冥想對于我們現代生活的實際意義。
Hoka:聊了這么多內容,我想聽你講講潮汐的設計。我用了一段時間潮汐,不管是極簡的 UI,還是圖片的選擇,都能感覺到你們對設計的重視。志珊說之前看到 Twitter 上有日本用戶對潮汐有設計上的夸獎,你們的設計是得到很多人認可的。你們會怎么去描述潮汐的設計理念?
啟旭:整體來說,我們希望打造一個沉浸式的線上空間,里面有不同的聲音場景、聲音的房間。回到設計上來講,你需要去服務于這個目的,所以我們會很強調沉浸式的設計。所以我們大量地使用了有空間感的設計,比如說高斯模糊,來傳達出空間的層次。還比如說用大面積的顏色,去傳達整體性跟一致性。包括我們設計里面還會有比較多的留白,也是希望有一個呼吸感,因為本身呼吸也是冥想里面的很重要的部分。
我們也會在產品里面有意識地去使用一些隱喻。包括在圖片的選擇也是,這個時候必須要 cue 一下我們的內容伙伴,現在好很多了,但最早做這件事情的時候真的是逼瘋了。比如說大家可以感受一下,我們有一個冥想練習叫「痛經」,其實「痛經」這個選題你去想象一下,你會去選什么圖片呢?
Hoka:感覺不是很美。
啟旭:對吧?大家可以去看一下「痛經」那張圖片,最后我們選擇是一個抽象的表達。它是一個油畫顏料的漸變。你看到了會覺得,這個應該講的是跟女性生理周期相關的東西,而且它好像有一些灼熱感,這個其實就很好地去呈現出來痛經的感受。
△ 潮汐 app 里「痛經」的圖片
Hoka:聽起來你們挑一張圖都要花很多時間。感覺你們花了很多時間去打磨潮汐的設計,但是畢竟你們是一個創業團隊,可能也會有各種各樣現實的壓力,不管是來自投資人,還是團隊的,會不會有人質疑你們為什么要花這么多功夫去做這些追求質量的事情?
啟旭:這里面我也需要去表達的一點是,設計當然是我們做決策的時候非常重要的一個維度,但是它也不會是唯一的維度。做一個決策,我們會有不同的權重,比如設計上的考量、內容上的考量、用戶的角度、產品上的思考,也會包含商業化的思考。在我自己的認知里面,設計在我們整個品類里面,它是一個非常重要的維度。因為用戶很多時候除了要解決問題以外,還需要有這種人文性質,或者說感性的、精神性的體驗。不同的品類是不一樣的,電商產品我覺得就不太需要這種東西,但我們這種品類我覺得它是非常需要的。所以基于業務上的考量,我們會把設計的優先級調得比較高一些。
我們希望如果你的手機里面有 100 個 app,但是你打開潮汐這個 app 的時候,你會發現它跟你打開其他 99 個 app 的感受,從一進來的那一瞬間開始就完全不一樣,這個是我們希望在業務上傳達的理念。所以基于這個角度我們選擇說重視沉浸感、設計感這些事情,但是它不是反過來的,它不是說我們刻意去強調設計,然后最終做出來這樣的產品。
啟旭覺得,冥想不應該只是打坐,而應該融入到像刷牙、敷面膜、痛經這樣的日常里。實際上,啟旭今天接受采訪的時候,也在踐行這個理念。在開始錄音之前,他覺得有點緊張,所以先花了五分鐘來冥想。創業這幾年,啟旭經歷過很多像今天這樣的壓力事件,這些壓力事件,也給了他一個機會,讓他在他的日常里實踐這個理念。
啟旭:比如說當我們去市場上跟不同的人溝通,會聽到各種各樣的聲音。它對于我的壓力的點或者考驗的點在于說,比如說一個你覺得特別牛逼的人,他跟你講了一個完全跟你不一樣的想法,你這個時候怎么樣去消化這件事?
回到業務上來說,因為我們傳統講做一件事情,它除了你自己做的部分以外,還需要所謂的「趨勢」,但趨勢、市場不一定是你完全能掌控的,它還是需要一些 timing、機緣,來到達一個點。但是坦率說,在那個點沒有完全呈現出來的時候,我們整個團隊該以怎么樣的方式去做這個事情,怎么樣去持續地 keep going?我覺得這個時候就是對于一個團隊的心力、對于創始人自己相信的事情的一個考驗。所以在這些維度上來講,我肯定也會經受一些壓力跟彷徨、焦慮。
對于這些壓力,我覺得冥想本身有助于幫我去消化它。真的,比如說當我面臨一個事情,我也拿不準的時候,在冥想的狀態里面,我會更加清晰我自己的感受跟想法。
其實可能到最后的問題是,真正意義上來說,你做這件事情是為了什么?在這個答案比較清晰的情況下,我覺得它有點像我之前看過的那個電影《云中行走》,是關于一個走鋼絲的人,他在紐約雙子塔中間走了鋼絲。其實創業就像走鋼絲,你走上去之后,一開始可能會很有信心,覺得我肯定可以走過去,你可能就很平衡,(產品的)想法也很完整。然后你往前走。走了一段之后,你沒有想到,氣候怎么突然變化了,風突然刮起來,烏云開始下雨了,這個時候你可能會失去平衡。這個時候你需要快速地把自己再調整回來,再往前走。這好像也有一點像冥想或者說正念理論,就是這樣一個(失去平衡再找到平衡的)動態的過程。
對我自己來說,可能某種意義上來說,做潮汐它也是一種修行。你通過這個方式跟世界發生連接,這個過程中接觸到不同的反饋,調整自己,認識自己,重新再去實踐,再去把你心目當中你覺得更好的東西去呈現出來。這也是我自己本身要做的一個修行。稻盛和夫《活法》里面不就這么說,其實修行也不是說你一定要到山林里面去,某種意義上你每天面對這些現實當中的挑戰跟困難,其實它也是一種修行。
文章來源:優設 作者:UXCOFFEE
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
偶然間發現了一本3年前買入的書《侘(cha第四聲)寂》,心里打著哪怕是看上10分鐘至少也是沒荒廢這個假期的念頭,讀了起來;
那么關于“侘寂”,雖然認識不深,但又有一些個小想法,借著假期的余溫跟大家嘮上一嘮:
百度上對侘寂的解釋是:侘寂是現代文學翻譯上的一個誤解,侘び(WABI)與寂び(SABI)。國人將其整理為侘寂一詞。日本美學家岡倉天心的著書《茶之本 Book of tea》把侘び的翻譯成“Imperfect”所指的應是侘び美學中,外表的殘缺…還有人說“侘寂”是一種思想,一種美學,一種世界觀。
我覺得吧,說的太深了不好理解,甚至有點啰嗦了,我嘗試著概括了一下,基于在下有限的語言能力大概是這個樣子:
雖然解釋中有提到殘缺之美,但在我認知里侘寂還真沒有什么殘缺的感覺,特別是以無印良品為代表的日式自然風格,他們對過于裝飾嗤之以鼻,鐘情于“不虛張聲勢,卻歷久彌堅“的設計;我試圖去按照自己的意思揣摩無印良品的設計哲學,結合名詞本身,再次總結了一下:侘寂美學不會執著營造表象,取而代之的是盡量流露事物本質,不會隨著時間的推移而喪失所謂的“新鮮感”;所以回過頭來再看無印良品的設計(不管是平面還是產品),大差不差,我們都會感慨道:真 tm 耐看?。。。?
嗯,結合上文,關于“侘寂”這個詞,我覺著大概也就是這么個意思了。
侘寂是 無印良品 / 宜家家居 等產品設計哲學的靈感之源,也是侘寂理念的追隨者。但最大牌的死忠粉就不得不提喬布斯和他的蘋果了,老喬本人對日本美學的熱愛超越任何人,深受日本侘寂美學影響,也因此成就了蘋果手機極簡風格的設計(說個后話,這種簡約是建立在內在高品質和對細節追求的基礎之上的,一定程度上對侘寂輕度的人為干預)。
插個題外話,仔細琢磨一下,不難發現 20 世紀中后期,從包豪斯的第三任校長密斯凡德羅到博朗的迪特·拉姆斯和蘋果的設計不約而同的在表達類似“少即是多”的設計理念;這種大一統的現象很奇妙,一定程度上結束了工藝美術和裝飾藝術對設計界的統治,這既是開始,也為設計風格的輪回做著準備。
回歸下主題,國際知名品牌的設計風格被分析得透透的了,我也不贅述了,主要說國內的深受影響的產品。在我的印象里,oppo 的 color OS 算是其一,特別是當年 color OS 6“無邊有界”的概念讓人著實興奮一把:
坦誠的講,以侘寂為核心出發的產品在我們的生活中并不少見,他們以突出內容為主,沒有其他什么過度的裝飾;前有 Instagram,Evernote,也有最近大火的 clubhouse;
從產品理念上講他們注重對主線功能的強調,對誘導性功能不太在乎;再聚焦到用戶界面上來講,他們認為保持最舒適的屏效要比塞滿每一個像素更重要;哈,那么問題來了,國內的產品(特別是巨型體量的產品)都不約而同的對屏效有著深深的執念,導致他們看起來難受的一比。這次我們先聊聊屏效:
1. 屏效的取舍
屏效這個詞是“坪效”的演變,后者可以理解成實體店鋪每平米的營業額,是一個經營效益的指標。所以類比下來,手機屏幕也可以這樣計算,就簡單理解成 “每一像素可以帶來多少商業效益” 就行了。
理論上來講,一般用戶最有用的瀏覽區域為手機前 3 屏,如果更嚴格點來說是前 2 屏,按這個思路的話,咱大概就能得這么個結論:每一屏里給用戶看到更多的東西,那么收益(瀏覽量/點擊率什么的)也會成正比,所以這個結論就一直被傳承下去了。但…如果不是抖音的出現,那么怕是我現在還對以上結論深信不疑:
哎,不是說單屏內展示的越多越牛 X 么,為什么抖音這一屏一個的做法立刻風靡了全球,甚至還把快手這個老對手拉上了這條新體驗的船。帶著這個疑問,試圖刨根問底,追溯源頭,冷靜分析下了當前的現狀:這大概是形式影響商業價值的一個絕妙的 case 了。先看以前,從互聯網產品誕生以來,feed 流的廣告形式大概也就是這兩種了:
傳統的 banner 理論上就是“CPM”,是一種展示付費廣告,根據曝光次數收費,這種形式太多見,我們常用的餓了么 / 美團外賣的頂部 banner 都是這樣;CPC 不用過多解釋,就是點了廣告主就給錢的那種,在今日頭條刷新聞的時候經常可以看到,還有公眾號的底部廣告也是這樣的原理。再看看抖音的設計:
抖音的 GD 單頁廣告的形式基本上是集各種模式的優點于一身,既有品牌曝光(CPM),也有點擊(CPC),甚至還有按時長收費的 CPT 整合進來。我猜測創造這種形式的設計師本身也對美學和商業有深刻的理解,不得不說既保證了體驗又提升了商業價值,美的不可方物啊~所以說,通過這個例子也許你會發現,屏效和商業價值并不是“是非題”,更像“多選題”,我們總是對所謂的習慣報以崇高的敬意,但事實上這折射出了人的“奴性”,通常我們認為對的事情也僅僅是習以為常罷了。
話說回來,例子雖然生動且具備說服力,但我猜想你應該跟我一樣,未必有機會去做這么顛覆性的設計(即使有機會也未必有膽量哈哈哈哈哈),我試著找了幾個例子希望能夠幫助你在設計上可以 balance 屏效和商業價值:
最后再給大家分享個壓箱底的小技巧,也是之前看到知乎的廣告突然間被啟發到的:
當然,以上的例子是盡可能的通過屏效來平衡美學和商業之間的關系,總的來說,侘寂這種理念在我國互聯網注重運營的土壤上不是那么的好生長,大家盡力就好~
上點小福利
盡管我一直堅持輸出設計觀點,但我發現好多朋友練就了 “一看就會,一用就廢” 的日常技能,所以還是準備了一些經過我嚴選的模版和素材送給鐵子們,希望鐵子們在學會理論的同時也能手活跟上,眼高手低不可取,眼手雙高真牛 B!
侘寂之美是許多當代設計師所追求的境界,但互聯網貌似就是一灘死肥,無論你怎么施肥,也未必能開花結果,各種方案也會相應的受到各種挑戰,說白了這種以美學驅動創新本就抽象不可具象,甚至又一些玄學夾雜其中。假如你也希望能夠借勢突破,不妨以美學為指導思想,以商業價值為突擊點去嘗試方案的可能性,或許這樣說服力才有可能被大幅提升。
文章來源:優設 作者:負能量補給站
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編者按:這篇文章來自資深設計師 Taras Bakusevych ,他對于產品和體驗有著非常深入的理解,這篇文章深入梳理了如何制作用戶歷程圖才是合理和便捷的,是一篇相當給力的用戶歷程圖終極設計指南:
用戶歷程圖(Journey Mapping)可能看起來是一個復雜的東西,尤其是當你嘗試在小組討論的時候把這個東西說清楚,會發現相當不容易。這篇文章將會為你闡明這一強大工具的使用方法,并且提供一個簡單的模板,并且幫你創建擁有足夠洞察力的用戶歷程圖,讓你像真正專業的 UX 設計師一樣,創建便利、深入、有效的用戶歷程圖。
在數字產品當中,用戶歷程圖可能是用來呈現用戶如何達成目標的最佳、最常用的工具了。當我們故事以可視化的方式呈現出來,就可以沉浸在用戶的體驗當中。這也是為什么說用戶歷程的價值是巨大的。
理解用戶歷程圖,會迫使我們以更加結構化的方式來思考整個用戶體驗,去梳理和定義事件的順序、關鍵階段以及事件之間的過渡。
同時,用戶歷程圖還能建立起用戶和設計師之間的同理心,當你隨著用戶歷程圖推進的時候,能夠更加深入理解用戶的痛苦和無奈,從而幫設計師理解用戶的動機。
用戶歷程圖還能幫你真正定義痛點,這是至關重要的。每種產品都應該在某種程度上幫助用戶,讓用戶生活更加輕松,如果你對痛點有所了解,自然就可以改善體驗。
根據實際的使用場景,用戶歷程圖會有很多不同的呈現形式,里面通常會包括一些圖形化的元素將整個歷程或者流程呈現出來,而余下的元素則采用解釋性的文本來作為支撐。
絕大多數的模板會顯得過度裝飾,且過于復雜,在很多時候,它們會作為項目中的展示性成果展現在PPT當中,而不是作為一種有效的工具,來幫助團隊來洞察需求。
如果你上網搜索用戶歷程圖,你會發現一大堆各式各樣的圖,這些圖和實際的理解是脫節的。
用戶現狀歷程圖反映的是用戶當前的狀態,這反映的是用戶歷程在優化之前、當下的狀態。而用戶未來歷程圖則反映的是用戶歷程在優化過之后,未來理想的狀態是什么樣的。
這兩者在結構和目標上是不一樣的,主要差別在于用戶角色的定義上。有的時候,你的用戶確實是消費者,而在很多情況下,用戶又不一定是消費者,這就是差別所在。
用戶歷程圖側重于呈現客戶的前端體驗,而服務藍圖則重在呈現后端的構成,以及交付方式背后的業務邏輯以及同產品核心之間的關系。
你可以在 Megan Erin Miller 和 Erik Flowers 的這篇文章當中找到更多的信息。
從來就不存在什么完美的用戶歷程圖,不過你可以基于某個版本的用戶歷程圖來著手。而這里準備的這套模板是經過長期測試和實驗之后總結出來的一款,它非常容易上手,復雜度也控制得恰到好處,并且它包含你所關注的絕大多數的指標,甚至更多。下面,我將教你如何逐步完成這個用戶歷程圖。
你可以在這里下載 PDF 文檔
在研討會或者工作坊模式下,開始用戶歷程的研究和搭建,是一個不錯的練習方式。在這種情況下,即使的團隊有較多的人,也最好按照小組來進行(每個小組3-5人)。根據用戶歷程的復雜度和涉及的內容的不同,通常你應該可以在 1.5 小時候完成整個用戶歷程圖的搭建。至于你能用到的文具,僅僅 需要多種不同顏色的便簽紙,筆和紅點貼紙即可。在開始之前,你需要和各個小組先聲明和解釋整個過程,并且確保所有人對于這個過程的流程、原理和方法的認知保持一致。
在這里,我們需要定義地圖的內容,用戶的整個行為歷程,以及他們試圖要達成的目標,都有哪些。這很關鍵,不僅要確保所有的參與者都很清楚用戶場景,而且要借此構建出對于后續設計有幫助的內容輸出。
演員——這個歷程與誰有關?整個歷程圖應該只和一個角色有關,也就是要經歷整個歷程的用戶角色。
場景和目標——描述參與的用戶的行動的情況和狀態,從而增加上下文環境的清晰度。描述用戶的目標,期望以及動機都有什么。
當前/未來狀態——闡明用戶歷程所在的階段。
Ps:即使此刻你要做的是某個未來的產品,也最好不要跳過當前狀態,洞察當前的用戶和產品狀態、痛點、習慣,有助于你去驗證想法。
接下來,你需要定義整個用戶歷程的大的階段。先把各個階段定義好能夠最大程度節省你的時間和精力。最簡單的方法,是先定義第一個和最后一個階段,然后再來填補中間的各個階段,不要創建太多的階段,而是將整個用戶歷程切分成為有意義的部分。
按照用戶操作流程,來逐個執行梳理各個階段用戶的行為、狀態。千萬不要試圖梳理得過于詳盡和細致,盡量專注于關鍵因素,確定用戶需要哪些要素,才能推進到下一個階段。
在這個階段,要開始描述和用戶執行操作緊密關聯的的想法,涉及到的問題,還有感受。在很多其他的用戶歷程圖模板當中,這個部分通常是和整個用戶歷程圖是分開的,但是實際上,只有合并到一起才是合理的。
在這個部分,我不建議將時間花費在用戶情感曲線的繪制上,這樣做的實際目標更多是為了更加具有視覺吸引力,并不具備實際的價值。
在這個步驟當中,我們會高亮標注出用戶在各個階段會接觸到的物理和數字交互點,以及涉及到的工具、人和服務。我相信各個階段所覆蓋的這些觸點,能夠幫助我們更好地梳理和構建出整個心智模型,并且能夠幫助產品和服務,讓它們能夠更加切合用戶的需求,更好地集成到一起。
如果你已經和你的團隊創建了類似移情圖、價值主張畫布,那么你無需在這個事情上重新創建相同的內容,因為用戶歷程圖和以上內容中有大量重復的部分,你只需要遷移過來即可。隨后,你可以將進度合并到當前的用戶歷程圖當中。
這個步驟,需要將各個不同階段的內容填寫進來。
給每個參與者一些紅點貼紙,方便他們在整個用戶歷程圖上,對他們認為是痛點的部分進行標記并投票。痛點可能和情緒有關(比如害怕提供個人詳細信息),也可能與行為有關(比如手動輸入快遞地址等)。這就是為什么最好不要為痛點創建單獨的行列,因為可能涉及到的點非常多也非常分散。如果需要對痛點進行深入的描述,使用紅色便簽紙來進行詳細闡述。
到了最后的階段。在確定痛點之后,我們就可以開始思考如何緩解或者消除痛點。通常,我們需要通過改進整體策略,完善功能,集成服務,來解決痛點,當然,更多的時候,可能還需要我們擁抱一些更加狂放的構思,通過創新來搞定痛點。
在小而無關緊要的細節上進行爭論,很容易迷失方向。我經常會看到某些小組會停留在第一階段,陷入爭論,無法推進。從來都沒有任何一個用戶歷程圖是完美的,因為用戶總會有不同的習慣,并且需要產品設計師從不同的角度來解決問題。
因此,這需要你和你的團隊專注于 80%最關鍵的用例,而不是在所有可能的事情上做復雜的取舍,并且踟躕不前。
文章來源:優設 作者:Taras Bakusevych
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
鳳凰新聞 APP 在 2020 年上半年完成了 Dark Mode 適配,本文主要從規范、設計和實現的角度對整個項目的落地過程進行復盤。
1. 背景色
iOS 平臺在深色模式下的背景色展示是動態的,分為基礎、升起(例如,彈出框或半浮層)。如下圖中 iOS 系統的兩個界面,相同樣式的組件在基礎層與升起層顯示的是不同的兩組顏色。
從 iOS14 的色彩規范中可以發現隨著界面高度的升起,系統定義的三級背景色也同步進行了一級上升。
iOS 通過這種背景色統一升級的處理方式來達到多任務窗口疊加的視覺隔離效果,但相對的開發成本也較高。
再來看看 Android 平臺深色模式下不同層級間背景色的顯示規律。
Android 把頁面分為從“0dp”到“24dp”的 10 個不同高度的顯示層級,通過在同一背景色上疊加不同透明度的白色來區分顯示層級。相對于 iOS 的整體背景色升級,Android 的背景色分級邏輯則更加的簡單易用。
2. 文字色
iOS 的規范中定義了 4 個等級的文字色,一級文字色為黑白純色,二到四級文字色為色相偏藍的半透明色,通過降低同一顏色的不透明度數值來進行分級。
Android 的文字色分為 3 個等級,與 iOS 的共同點是都用了半透明顏色,也都采用了降低不透明度的方式來進行分級。不同點是 Android 文字色使用的黑色與白色,沒有添加色相。
使用帶有透明度的字色能夠避免相同字色與背景色相融的問題。以 Android 為例,三級文字色與 10 種背景色疊加后都具有較高的識別度。
iOS 則通過一套半透明字色可以適應基礎與升起兩種不同背景色的使用場景。
3. WCAG
iOS 人機界面準則和 Material design 在深色模式的建議中,都提到了文字信息需滿足 WCAG 無障礙閱讀的 AA 標準。
WCAG 全稱為 Web 內容無障礙指南,其中包含分為可感知性、可操作性、可理解性、可兼容性四項原則的相關建議,這些建議可使網站內容更容易訪問。WCAG 從高到低分別是 AAA、AA、A 三個等級。其中 AA 要求文字與背景對比度不小于 4.5:1。
感興趣的朋友可以通過下面鏈接進行深入了解: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
也可以通過下面的色彩對比計算器進行對比度檢驗(下圖為翻譯后展示)https://www.msfw.com/Services/ContrastRatioCalculator
這里我拿 iOS 在深色模式下的主次兩級字色與基礎、升起背景色做了一下對比度檢驗,得到的結果均滿足 WCAG 無障礙閱讀的 AA 標準。這里再給大家推薦一個可以同時對多個顏色進行對比度檢驗的網站 https://hexnaw.com
4. 彩色
iOS 人機界面準則的彩色方案中給出了 9 種顏色。如下圖所示的深淺配色方案以 RGB 與 HSB 兩種屬性進行對比。
https://baike.baidu.com/item/HSB
圖中左側以 RGB 屬性展示的各項參數差值較大,沒有明顯的規律性;右側以 HSB 屬性展示的各項參數差值較小,其中靛青與紫色 HS 數值相同,僅有 B 的數值有所差異,但整體來看依然沒有一個完整的規律。
相較 iOS 系統彩色方案的單獨訂制,Android 系統的配色方案則是一整套漸變梯度由“50-900”的色彩庫。
在 Android 的色彩工具中還可以自定義配色方案,在色板中選取一個主題色,對應梯度值為 500,通過一套算法來自動獲取其他梯度的輔助色。
為了在深色主題中提供更大的靈活性和可用性,Android 官方建議在深色主題中使用較淺的色調(200-50),而不使用默認的主題顏色(飽和色調范圍為 900-500)。
總結來看兩大平臺在深色模式的適配上都各有所長,在整體的視覺體驗上 iOS 更加鮮亮突出,Android 則更加柔和舒適。
iOS 更加注重細節體驗,在整體的色彩規范中的很多顏色都是單獨定義的,這也印證了 iOS 13 發布后蘋果官方向用戶所表達的“屏幕上的每個元素都經過精心設計”這一理念。而 Android 的色彩規范中無論從背景色、文字色還是彩色都遵循著一個梯度規律。
深色模式改版設計的前期工作除了調研兩大平臺的指導規范外,我們還對已上線深色模式的競品 app 進行了調研,調研的主要目標是背景色、文字色的色相與亮度展示效果。(以下截圖時間為 2020 年 2 月份)
騰訊新聞,主背景無色相,次級背景無色相,一級文字無色相亮度較高,次級文字無色相亮度極低。文字與背景對比度高,主要信息比較突出。
網易新聞,主背景色相偏藍,次級背景色相偏藍,一級文字無色相亮度較高,次級文字無色相亮度極低。文字與背景對比度高,主要信息比較突出。
鳳凰新聞,主背景無色相,次級背景無色相,一級文字無色相亮度偏低,次級文字無色相亮度極低。文字與背景對比度低,主要信息不夠突出。
以 3 個 APP 首頁來對比,可以明顯的感覺到鳳凰新聞首頁的信息展示不夠突出,在日間場景下體驗極差。
深色模式并不是簡單的把整個界面反色了那么簡單,還是要考慮到所有用戶的需求。鳳凰新聞作為資訊類 app 用戶在夜間使用的場景也有一定的占比。深色模式的改版不僅要在日間滿足使用需求,還要保證夜間的視覺刺激相對柔和。所以,在設計配色方案時就不能使用對比度極高的純黑色背景與純白色文字,只能在各種灰色中搭配出最優方案。
經過多稿背景色與文字色的搭配嘗試后,最終確定了下圖中所框選的配色方案。這個方案整體背景色與二三四級文字色在色相上略微偏藍,相較于無色相背景更具有活力,在視覺體驗上信息層級的區分也更加明確。
在各種方案嘗試設計的過程中對顏色的色相、飽和度、亮度的選取都是隨機的,目的是在短時間內進行快速試錯來確定配色方向。
本次改版的目標中還需要重新構建色彩規范,所以還需要對這稿配色的選用進行細致的打磨,在色彩對應的 HSB 參數中進行細微的調整使整套配色方案有律可循。
最終方案在四級背景的色相與飽和度方面進行了統一,對亮度的遞增梯度統一為 5。對比初選方案在視覺上變動也很微弱,卻使色彩分級規律一目了然。那么依照此方式也可以對文字色與彩色也進行了一輪打磨。
對于文字色在深色模式優化調整的基礎上也對淺色模式下的文字色進行了調整,使深淺模式下兩套字色更具有規律性。
在文字色的使用上鳳凰新聞沒有參照兩大平臺規則使用帶透明度的顏色,主要原因是從自身實際出發,考慮到端內的文字色使用場景部分是用于半透明背景色上的,如果文字色與背景色均帶有透明度,疊加后的體驗會很差。
鳳凰新聞的功能圖標以線性為主,通常搭配文字一起使用,所以對圖標顏色的定義與文字色是保持一致的。
在彩色的規范梳理中淺色模式下保持不變,僅對深色模式下顏色的亮度進行了調整,使深淺色模式下顏色的亮度對比有了統一的規則。
當然我們還需要對新的背景色與一二級文字色進行檢驗,看看是否滿足 WCAG 無障礙閱讀的 AA 標準,也就是常規尺寸文本對比度高于 4.5 : 1。
下圖就是鳳凰新聞客戶端的新版色彩規范,在規范中除了上述的主要的通用顏色外也有部分是單獨定義的顏色,這些顏色多用于獨立或特定的場景下。
在完成色彩規范的重構后,重新輸出界面樣稿與舊版進行對比。
通過設計稿對比老版夜間模式與新版深色模式,能夠直觀的感受到新版在信息瀏覽上體驗更好。
1. 色值替換
在著手進行色值替換時,iOS 開發小哥反饋給我鳳凰新聞全端跟色值有關的代碼有 2000+條,如下圖中是日夜間對應的這條代碼樣式。
如此多的色值代碼多數是相同色值在不同場景中重復使用,但彼此卻又完全無關聯,還有很多是日積月累的舊色值未被刪除。如逐條替換費時費力效率極低,后期的維護也極其麻煩。
為了提高適配效率以及便于后期維護,使得之后的色值替換可以達到全局響應的目的。由設計師與開發人員共同建立一個色值對照表。
此表中設計命名主要基于色彩規范,用于設計師團隊間的溝通協作。工程命名由開發人員提供,主要用于設計師與開發人員的在設計走查中進行高效的溝通協作。
以鳳凰新聞 iOS 端為例,優化后的色值代碼庫如下圖,由原來的 2000 多條色值代碼變成了 30 多條色值代碼「宏」。
在 iOS 開發工具 Xcode 的可視化文件夾中看起來就更加直觀了。
之后的色值使用開發人員只需要調用代碼庫中相應的「宏」即可,后續版本迭代中如有對通用色值的調整只需修改相應的「宏」代碼即可完成全端替換。
以這種方式快速完成首輪色值替換后很多頁面的色值會出現錯誤,需要 UI 設計師持續的進行走查反饋,再由開發人員根據反饋進行修改校正。
以 iOS 端為例在深色模式色值走查過程中設計師分批次以 PDF 格式反饋給開發人員的,開發人員在修改反饋問題的同時設計師也在進行下一批問題的整理,這樣同步進行的效率會更高。
2. 切圖替換
切圖替換場景相對比較多,同樣延用色值走查的協作方式,設計師分批修改開發同步進行替換。開發小哥提供切圖的方式就是直接扔過來一個全端切圖包,需要設計師修改切圖顏色后以原命名重新發回去。當打開切圖包后頓感一陣頭大,切圖總數有近千張之多。
雖然切圖很多但其中有一部分是已經無用的老切圖,在替換的過程中也對端內切圖重新進行了一輪梳理,刪除了很多無用和重復的切圖,同時也對鳳凰新聞 app 的體積進行了瘦身。
在切圖的替換過程中比較費時的是對同一切圖存在多張的情況進行整理,梳理出該切圖的所有使用場景然后反饋給開發人員進行統一調用,之后如再次修改即可完成全局替換。
除 icon 外還需要對默認圖與缺省圖進行替換。
3. 特殊適配
鳳凰新聞客戶端需要進行特殊適配的場景主要是圖集與小視頻界面,這兩個界面僅有一套色值與 icon,界面中的元素需要單獨處理,在切換深色模式后避免出現錯誤。
4. 界面展示
Dark Mode 適配是一項費時費力的巨大工程,也是探索和優化用戶體驗的全新挑戰。本文主要描述了鳳凰新聞 APP 在 Dark Mode 適配中的一整套心路歷程,從規范、設計以及實現的角度對整個項目進行復盤總結。
文章來源:優設 作者:鳳凰網設計中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你是否和我有同樣的困惑,常常無法客觀看待自己的設計,優化的時候又常常不知從哪里下手,看到別的產品設計又無法給出具體的判斷依據。
今天學習一下用戶體驗的結構化衡量標準。不管是日常工作還是作品提升,都可以作為一個方向性的指導。
要想讀懂一個信息,多少文字才能解釋清楚(認知成本)?網頁加載多長時間才算合理(時間成本)?要設置攝像機的時間和日期,設定多少個步驟才算合理(操作成本)?
首先我們來了解一下通用設計法則之——成本效益法則
成本效益法則的概念
百科含義:成本效益法則指的是要從“投入”與“產出”的對比分析來看待“投入(成本)”的必要性、合理性,即考察成本高低的標準是產出(效益)與投入(成本)之比,該比值越大,則說明成本效益越高,相對成本越低;考察成本應不應當發生的標準是產出(效益)是否大于為此發生的成本支出,如果大于,則該項成本是有效益的,應該發生。
從設計的角度來看,成本效益法則一般是用來評估伴隨著新功能或新元素出現新增加成本的最后財務回收狀況。
用戶價值 = 新體驗 - 舊體驗 - 切換成本
從用戶角度來看,成本效益法則也可以用來提高設計的品質。如果與設計互動的相關成本大于收益,就是不良設計;相反,如果效益大于成本,就是優秀設計。用戶成本一般包括認知成本、操作成本、時間成本。
體驗 = 效益 - 認知成本 - 時間成本 - 操作成本
例如:把走一段路到展覽館看展當作成本,把看展的趣味程度當作效益,如果趣味程度超過走路的成本,那么這個展覽設計就是優秀設計。
優秀的展覽設計效益大于成本
糟糕的展覽設計成本大于效益
每個設計的品質都可以用成本效益法則來進行衡量。如果與某項設計互動之后,用戶覺得獲得的效益高于此次互動的相關成本,即是優秀的設計;相反,如果成本高于效益,即是糟糕的設計。
怎么做?
若想提高體驗的價值,可以從兩方面入手:1. 提高效益;2. 降低成本。
提高效益更多是產品層面的決策,所以站在設計師的角度,這篇重點從如何“降低成本”展開。降低成本主要有三方面:降低認知成本、降低時間成本、降低操作成本。
PART 1
降低認知成本
1. 減少冗余信息
a. 去掉累贅文案
為了避免客訴,設計常常會“被迫”在首頁做冗長的文案提示,比如美團民宿的“今天入住、明天離店”的文字提示,彷佛在跟著文案做“今天入住+明天離店=1晚”的數學題,過于平鋪直述反而增加了用戶思考。而且過于具體的文案在小字顯示的效果下閱讀性也不夠好,反而增加了用戶閱讀文案的認知負擔。
同樣是 1 晚,Airbnb的文案表達簡潔明了,日期間的橫杠足以理解是從哪天到哪天的含義。
如果說Airbnb是國外產品,調性不同,那么像馬蜂窩的解決方案也是層次與閱讀都更加清晰易懂的方式。
b. 去掉多余選項
招行銀行的首頁功能并不是我會經常要用的功能,但是卻無法像支付寶那樣自定義編輯首頁的功能icon,去掉不需要的功能入口。
2. 內容好理解,減少思考,減少記憶
a. 文案與圖片匹配度
文案與圖片的契合度高更夠幫助用戶更有效的理解內容,App Store的推薦卡片在這方面表現的非常優秀。
b. 結構框架好理解——格式塔原理
接近原則中指明物體之間的相對距離會影響我們感知它們是否以及如何組織在一起。京喜首頁功能模塊區分的相對距離差別不夠大,加上商品圖的視覺干擾,更加影響信息層次的區分。而淘寶的模塊信息分組則清晰明確,信息辨識度高,視覺干擾少,能夠有效減少用戶區分信息的思考。
c.記憶的局限,降低記憶負擔
人們工作記憶的容量有限,大約是 4±1。由于短期記憶的局限,設計師應該確保用戶可以簡單地識別信息,但不能從之前的對話中回想信息。
比如我們經常會發現考試中的選擇題比簡答題更容易,這是因為選擇題要求我們去識別答案,而不是在記憶里回想答案。
再例如搜索,當搜索結果出現時,我們的注意力自然地從輸入的詞匯轉移到了結果上,因此好的設計應該在搜索結果頁展示搜索詞。把點擊過的結果變色也是幫助用戶記憶已點過的內容。
知乎的搜索結果不記憶已閱覽的內容,而谷歌搜索則幫助用戶記憶已閱覽過的內容。
3. 優先級:信息層級
a.用戶優先級、b.功能優先級、c.視覺優先級
d.交互優先級
常見的是彈窗按鈕,需要區分信息優先級,不讓用戶產生選擇困擾。
4. 文字、圖標的識別性、易讀性
美團Tab icon簡潔明了,圖形與含義符合,文案簡潔清晰。而悅會則顯得復雜難以識別,不僅文案復雜,易讀性比較差,圖標也沒有準確表達其寓意。
5. 一致性
a. 內部的一致性、b. 交互邏輯的一致性、c. 元素的一致性、d. 語詞的一致性、e. 信息架構的一致性
f. 視覺的一致性
Airbnb的版式從banner到下面的標題分類,對齊方式與字體對比都保持一致風格,圖標和插圖都是線與線面的風格。對比之下,攜程的設計語言則相對不夠完整,不僅icon風格不太一致(面和線都有),banner運營位的版式也是比較隨意的(文案沒有統一的排版規范)。
6. 提示、引導、反饋
好的引導反饋能夠大大賦能業務目標,相對于躺平的關注引導,好好住的類似提示引導,則生硬了很多,特別是兩句文案的切換動作比較刻意,加的笑臉表情也跟引導關系不大。而躺平的引導非常的萌,文案與形象風格都很nice,加上形象手指的動態效果,使引導非常的自然討喜。
7. 符合用戶習慣
比如,Windows 與 Mac 系統的軟件關閉方式。使用windows電腦時,我們形成了右上角關閉的操作習慣。后來開始用Mac電腦,關閉入口都在左上角,在一段時間內,每次關閉都要找一下關閉按鈕在哪里。由于Mac的關閉方式沒有比windows產生顯而易見的體驗提升,改變操作習慣成本高,部分用戶可能會認為Mac的關閉操作不好用。
當然,假如最開始用的是 Mac 電腦,后面再使用 Windows 電腦,也會感到 Windows 不好用,這是先入為主的觀念,一旦產生習慣,改變習慣將產生一定的學習成本。
PART 2
降低時間成本
1. 扭轉用戶對時間的感知
今日頭條通過懶加載的方式,將文字內容優先顯示,并且將圖片位用默認底色先顯示出來,用戶可以在圖片加載出來之前先看文字內容,大大避免了等待的焦慮。我們應該避免像移動營業廳這樣的空白加載頁面。
2. 增加等待過程中的價值
王者榮耀游戲開始前的加載界面會有小技巧的提示,等待的時間可以學習一些小技巧。
PART 3
降低操作成本
1. 先價值吸引后行動(先瀏覽后登陸)
每日瑜伽可以先瀏覽內容,想要了解更多的時候才引導登錄,降低了操作成本。而keep卻必須要先登錄才可以瀏覽里面的內容,增加了使用門檻。
2. 預測用戶行為
滴滴出行根據用戶經常使用的地點預測用戶要去的地方,一鍵選擇地址更便捷。
3. 主動替用戶選擇
美團外賣支付時主動幫用戶選擇極速支付選項,一方面讓用戶更便捷,另一方面也能增加銀行卡賬戶的綁定,賦能業務。
4. 簡化關鍵節點
淘寶確認訂單自動選擇優惠券,簡化了關鍵流程,降低操作成本,提高下單轉化?,F在很多購物平臺也都實現了這一點。
5. 減少手動輸入操作
以閃送為例,自動讀取復制信息——一鍵粘貼——智能識別——自動填充信息,減少了用戶的手動輸入操作,大大提高了體驗的質量與效率。
降低成本的誤區
是不是成本越低,這項設計就是越優秀的設計呢?在成本效益法則下,絕不是成本越低,效益就越高,設計決策需要把互動產生的效益考慮在內。
如果一個交互的復雜度能夠提高交互產生的效益,那么就應該適當的增加交互的復雜度。
比如我們常用到的密保鍵盤,打亂的數字順序能夠防止偷窺者從手勢位置竊取密碼,因此這項交互成本的提高相應的能夠大大了我們資產賬戶的安全效益。
所以,必要時是可以通過提高成本換取更高的收益。但同時如果技術允許,通過手機短信驗證登錄與面容識別這種成本更低安全系數更高的方式,還是更好的選擇,要根據具體的場景具體對待。
總結
每個設計的品質都可以用成本效益法則來進行衡量。如果與某項設計互動之后,用戶覺得獲得的效益高于此次互動的相關成本,即是優秀的設計;相反,如果成本高于效益,即是糟糕的設計。
設計師運用成本效益法則提升用戶體驗的維度主要在降低用戶的認知成本、時間成本、操作成本。
降低認知成本包括:減少冗余信息;內容好理解,減少思考,減少記憶;優先級:信息層級;文字、圖標識別性,可讀性,易讀性;一致性;提示、引導、反饋;符合用戶習慣。
降低時間成本包括:扭轉用戶對時間的感知;增加等待過程中的價值、趣味性、小貼士。
降低操作成本包括:先價值吸引后行動;預測用戶行為;主動替用戶選擇;簡化關鍵節點;減少手動輸入操作。
同時我們也要注意降低成本的誤區,并不是成本越低越好,如果提高成本可以換來更高的效益,也要具體情況具體對待。
文章來源:站酷 作者:水原七秒
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每年年初的 CES 消費電子展,是一個非常適合了解前沿技術,了解消費和產品趨勢,甚至在這些量產、準量產以及概念設計產品當中,窺見屬于未來的設計趨勢。
每年的 CES 都是一個特別適合展示新趨勢的地方。雖然很多廠商會傾向于在 CES 上發布新品,但是相比于這些為數不多的新品和發布會,CES 上更加值得一看的是那些正在研發、小范圍內投產并且你即將會看到的新技術和有趣的東西,它們所指向的都是消費級的產品,也貼合我們一直在說的「趨勢」。
今年 CES 大會選擇了線上舉辦,不同廠商選擇使用直播、視頻或者圖文的形式發布了自己的產品,有的是概念設計,更多的是后續會量產的產品,類型豐富。這篇文章會按照幾個大的類別和趨勢,將今年的CES 展上產品進行了梳理,方便和我們之前的設計/技術趨勢相互印證。
銳龍系列的 AMD CPU 以極高的性價比讓廣大電腦用戶喊出了「AMD Yes !」的最強音,而脫離 Intel 陣營的蘋果干脆以 M1 芯片,把牙膏廠 Intel 原本的不安全感直接拉滿,成為了壓垮駱駝的最后一根稻草。在 CES 大會開始之前干脆把 CEO 換成了工程師出身的行業老兵 Pat Gelsinger,試圖重拾工程師文化。
在今年的 CES 大會上,試圖改變的 Intel 發布了針對高性能輕薄筆記本電腦的芯片,H 系列:
H 系列采用 Tiger Lake 架構,全系列搭載高性能的 Iris Xe 核顯,它的性能足以在 1080p 分辨率下流暢運行《古墓麗影》這個級別的游戲(實際上 M1 的發布會上也同樣使用了這款游戲作為性能測試)。
英特爾的11代桌面端芯片也在性能上又不小提升,采用了全新的 Rocket Lake-S 架構,不過最值得期待的是下半年才會公布細節的12代混合架構 CPU,Alder Lake。
老對手 AMD 在 CES 2021 上則發布了全新的 5000 系列移動端處理器,其中標壓的 5000H 系列和低壓的 5000U 系列,都用自身的配置和性能解釋了“便宜大碗”的概念。
最高可選 8核16線程的配置,主頻可飆升至 4.4GHz,充滿電之后日常使用可以達到 17.5小時,電影播放可以長達 21 小時的電影。
而同為御三家之一的 Nvidia 則帶來了桌面級的RTX 3060顯卡以及移動端的RTX 3080/RTX 3070/RTX 3060。
當然,無論是桌面端的顯卡還是移動端顯卡的性能都有著不俗的表現,具體大家可以去官網看看這里就不說了……(一個很重要的原因是由于比特幣的瘋狂漲幅,導致挖礦需求暴漲以至于這波顯卡價格出現了極其瘋狂的增長,一卡難求,鬼知道啥時候能恢復正常)
總而言之,移動端芯片(主要是 針對筆記本電腦)在性能提升的同時還控制好續航,無論是CPU本身的算力還是顯卡的性能,都有著相當明顯的提升。這對于設計和創意從業者而言,意味著有著更加輕薄地電腦和平板可供選擇,并且性能足以支撐從平面到3D渲染、 視頻剪輯乃至于大型游戲,而且很大程度上,性價比有 「AMD Yes」,高性能可以上 Intel H 系列 + Nvidia ,而習慣使用 macOS 地用戶應該也會在未來幾個月內等到新的 M 系列芯片和 Macbook Pro 16 和 Macbook Pro 14 ,當然這和 CES 2021 就沒啥關系了。
目前這些新芯片本身的強大性能和優良的續航,可能需要到后續的電腦和筆記本上才有所體現,好在 CES 2021 本身還發布了不少性能優秀、設計過硬的電腦類產品。
筆記本電腦在歷年 CES 大會上都是重要的組成部分。在這些筆電類產品當中,除了一部分迭代更新的量產新款之外,還會有不少基于特定的需求,在設計和功能上高度特化的產品出現。
比如 HP 的 Envy 14 筆記本就很典型地屬于前者,11代英特爾 CPU 和 Nvidia GeForce GTX 系列的顯卡,傳統的造型和更加精致的工業設計,這種不過不失的產品其實是各大廠商在 2021 年鋪貨時的中堅力量。
而微軟的 Surface Pro 7+ 也只能算得上是小幅更新,多個配置可選,沒有太多好說的。
而出自聯想的 ThinkBook Plus Gen 2 i 筆記本在繼續探索了雙屏筆記本的另外一種可能性,A面的超大尺寸電子墨水屏搭配手寫筆,簡直就是給手繪和筆記愛好者量身定制的創作空間。掀開之后又是一臺傳統的超極本,13.9 mm 的厚度 和 1.3 KG 的重量也非常符合攜帶通勤的標準。
相比之下, 同一譜系的 ThinkPad X1 Titanium Yoga 的翻轉設計則顯得更加傳統,不過在性能和影音上,Dolby Vision HDR和Dolby Atmos揚聲器的支持讓它在影音娛樂上更加突出,少了電子墨水屏,整體厚度也縮減到了11 mm。
不過,更有意思的是華碩ZenBook Pro Duo 15 OLED 筆記本電腦,原本 Duo 系列的雙屏設計已經相當獨特了,這次的新款不僅將配置進一步推升到了 i9 cpu + NVIDIA GeForce RTX 307 的級別,還給副屏增加了一個自然的 9.5 度傾斜,防炫光的同時還更加貼合人體工程學。這可能不一定符合每個人的審美,但是可能正好是某些天天肝視頻跑渲染的設計師同學正好需要的東西。
另外一邊,游戲本也基本上是在堆配置,Alienware M15 R4和M17 R4 老老實實地把顯卡推到了 NVIDIA GeForce RTX 3080,加上 360hz 超高頻率的顯示屏,內存堆到32GB,存儲支持 4TB PCIe,性能夠怪獸,但是別的就沒啥好說的。
而另外一邊的 Razer 推出的 Razer Blade Pro 17 2021 和 Razer Blade 15 2021 這兩款筆記本,本質上和外星人家的差不太多,配置有多高堆多高,機身工藝搞好點,RGB 信仰燈炫起來……
當然這并不重要,這次 CES 2021 上,Razer 真正的殺手锏是這倆筆記本的配件,Razer Project Brooklyn概念游戲椅:
只需按一下按鈕,這款游戲椅就可以從背面展開60英寸的OLED顯示屏,真正沉浸式的游戲體驗,帶有4D模塊化功能的扶手以及折疊可調的桌子,連整個框架都是帶有高保真觸覺模塊的,體驗有多好,就要看你和游戲廠商的想象力了。
對于游戲本本體而言,在配置和外觀上的設計很大概率只能靠添油戰術,互相之間見招拆招,真正能夠打出新意,玩兒出花樣的,基本都是在外設和配件上。
智能手機毫無疑問是大家最關心的事情。支持5G頻段,AI驅動的后置多鏡頭模組,前置挖孔/劉海鏡頭,6英寸屏幕,這幾乎是當下絕大多數智能手機的標準配置,也是貼合大眾需求的最佳實踐。CES 2021 發布的 三星 Galaxy S21 Ultra 5G 就是這種典型,配置到位無懈可擊,更重要的是,后置鏡頭模組的工業設計相當具有識別度,邊角凌厲又富有美感。
不過大家都很清楚未來趨勢肯定不會止步于此,柔性屏幕給人帶來的想象力太過豐富,包括蘋果在內的一線廠商幾乎都在這個基礎上進行探索。
三星的 Galaxy Fold 系列已經發不到第二代,Moto 的新生 Razr 也發布了迭代之后的版本,蘋果早早申請了環繞式柔性屏幕的設計專利:
不過,最有意思的還是卷軸屏幕。在 CES 2021 之前,OPPO 就公布過卷軸屏手機的概念設計:
在今年CES 上, LG 發布的 LG Rollable 則可能是最早量產的卷軸屏的智能手機(預計在今年年內發布):
雖然沒有 LG 這么快,TCL 也同樣帶來了自己的卷軸屏智能手機,不過和 LG 的橫向拉伸不同,TCL 的屏幕選擇了縱向拉伸:
相比于折疊機構,卷軸式的柔性屏幕將不會因為過大的折疊角度而出現屏幕折痕。不過這種收納方式在保持優雅的同時,還會面對和升降式攝像頭一樣的問題:展開和收納結構的可靠性和開闔時間的控制。
可以確定的是,柔性屏幕設備會逐漸增加,而目前技術的快速迭代意味著在未來2年內會有一大批類似的設備出現。無論是折疊、翻轉、卷軸還是翻蓋式雙屏,都意味著 UI 界面的動態延展,而不同的結構設計帶來的是交互方式的百花齊放,這對于UI 和交互設計而言,都是全新的挑戰,以及新的機遇。
不要忽視了這種硬件設計之下的復雜度,即使是最簡單的雙屏折疊,對于 UI 交互和開發而言,都是巨大的挑戰,不信可以先看看微軟的雙屏設計規范:
物聯網和智能家居從提出來到最終落地為消費級產品,經歷了十幾年漫長的過程。在今年的 CES 展上所展示的很多智能家居類的產品,確確實實比以往更加「智能」也更加富有想象力。除了各大廠商原本在工業設計和基礎技術上的積淀,這些產品大多借助了機器學習技術來提升「智能」程度,并且借助語音交互來保持操控的便捷性。
智能家居的花樣就多了。
三星推出的 Bot Care 智能機器人看起來像是一個更具未來感的的 R2D2,不僅能夠識別你的語音命令,而且能夠借助成熟的 AI 技術識別你的行為,它會學習和了解你的日程安排,能夠逐漸了解你的習慣,并且在日常的生活中提供幫助。
而更加進階的是 Bot Handy 智能家居機器人功能就更多一些了,它不僅可以在室內到處溜達,而且能夠能夠識別材質和物品,它自帶的機械臂能夠幫你收拾房間,收拾廚房物品等等等等。
CareOS Themis 的智能鏡子也借助傳感器和 AI 實現了諸多傳統鏡子做不到的事情。通過內置的 IR 溫度傳感器、UV皮膚分析燈以及相機,CareOS Themis 智能鏡子 能夠對你的衛生狀況、皮膚狀況乃至于心理健康狀態進行分析,并且提供切實可行的建議。
傳統家居和傳感器、數字硬件的結合,將家居設備的安全性、可用性和完備性全方位地進行了提升。比如 LOCKLY Duo 智能鎖就加入了雙重鎖定技術,可以更快打開又保證了安全性:
而 Ampere Shower 這個藍牙淋浴揚聲器,不僅可以讓你在淋浴時享受 360 度環繞立體聲,想要播放什么內容完全可以用語音控制,而且考慮到它特殊的使用場合,它干脆借助淋浴噴頭的水流來進行充電:
而便攜式投影儀也是諸多大廠的下一個發力點,在保持高流明、智能可控的特性的同時,進一步縮小提及,提升音響效果,就像華碩的 ZenBeam Latte 的便攜投影儀一樣:
傳統家電設備則在智能化和場景化的探索之下,呈現更加靈活的新玩法。三星定制的4門 Flex 冰箱可以針對不同的食品進行定制化的管理,而傳統固定的冷凍/冷藏式的分區也借用智能化的管理打破,如果你需要更多的冷藏空間,只需要通過設置就能夠進行轉換和調整。
當然,智能電視當然是 CES 大會上繞不過去的門類,只是多數廠商的產品都是在自然硬件和性能迭代上「更高、更快、更強」。
而其中真正稱得上有趣的,還是 LG 的升降式透明電視:
透明屏幕在不同光照條件下的泛用性,應該還是存疑的。畢竟去年8月小米發布透明電視之后,已經有過不少質疑的聲音了。不過這些小眾產品的不斷迭代和推出才有可能讓透明屏幕技術上的不斷前進,更貼近科幻電影中使用場景的小型透明智能設備的普及才有希望。屆時,UI 設計應該又有新的設計需求了吧?
CES 2021 的這些新型的智能家居類設備上,可以更進一步印證之前大家對于趨勢的預測:
可穿戴設備的熱度也一直在逐漸提升。
國外疫情的持續也促使很多廠商開始考慮如何制作更加貼合健康需求的可穿戴設備。
游戲硬件雷蛇的 Project Hazel N95智能口罩應該是 CES 展上最受關注的硬件之一,它并不僅僅搭配了 N95 級別的防護和可更換濾芯,透明的遮罩充滿了未來感,同時雷蛇還將揚聲器和信仰燈集成在過濾器的外側,確保語言交流清晰,視覺風格獨特:
另外,為了確保整體的安全性還附帶了專用的紫外線消毒盒:
相比于雷蛇的科幻感,AirPop Active +智能口罩就顯得更加運動。
AirPop Active + 則是一個專業的運動口罩,借助內置傳感器,這款口罩能夠跟蹤空氣質量以及佩戴者的呼吸狀況,并且通過藍牙和手機同步,方便查看。同時,在濾芯即將耗盡時,也會提醒用戶。這款口罩從外觀到功能都是明顯面向運動愛好者的。
BioButton 這款設備則是一款新冠病毒感應器,將它貼在頸部,它會跟蹤你的呼吸、心率、睡眠和血氧狀況等生命體征,并且識別你是否出現了感染新冠病毒的癥狀,可以說是針對性極強了。不過,對于絕大多數隔離在家的用戶,鍛煉是更重要的事情。
NordicTrack Vault 頂級家庭健身房就是一個這樣的產品,超大屏幕結合 iFit 的互動健身體系,你可以清晰直觀地對自身的動作進行審視和視覺反饋,進一步進行矯正,同時確保在家也可以獲得健身教練 1對1 的指導。
智能手表是可穿戴設備這一領域是一個大類。目前絕大多數的智能手表在各種傳感器功能上都做得不錯,差異主要是在體驗的細節優化、工業設計、品質以及品牌溢價上了。
Fossil 在 CES 2021 上帶來了支持 5G LTE 網絡的 Fossil Gen 5 LTE,芯片用的高通驍龍 3100,心率、GPS、海拔、環境光等傳感器一個不缺。Fossil Gen 5 LTE 提供金色和玫瑰金兩種配色。
相比之下 Amazfit GTR 2e 智能手表則更加關注運動愛好者的細分需求——直接提供了90多種不同的運動模式,它可以識別你是在跑步還是騎車,45 天超長續航,5 ATM 的防水級別,可以說是在專業性上相當到位了。
此外,飛利浦發布的 Sonicare 9900 Prestige 智能牙刷也相當亮眼。通過傳感器,它能夠識別不同位置的壓力,監控清潔位置和刷牙的運動軌跡,并且提供 AI 實時指導和個性化刷牙動作推薦,同樣是通過藍牙連接手機來實現信息的傳達。
其實這些健康相關的可穿戴設備也呈現出幾個典型的趨勢性的特征:
在可穿戴設備當中,涉及到VR/AR的產品需要單獨說一下。
VR 和 AR 你應該比較了解了,虛擬現實和增強現實,那么MR 和 XR 呢?
MR 是混合現實,通俗的說它是介乎 VR 和 AR 之間,虛擬合成的「圖像」和真實的世界相互融合,還可以和現實物品進行一定程度的互動。而 XR 是擴展現實(Extened Reality)的縮寫,它其實是以上 VR、AR、MR 的一個總稱,或者說 VR/AR/MR 是 XR 的子集,XR 所涵蓋的領域和范疇比以上幾個都要寬泛。
比如虛擬觸感就是屬于 XR 的。在今年的 CES 大會上,Senseglove Nova 和 bHaptics 推出的緊身衣套裝,所帶來的體驗就是虛擬世界在觸感上的投射介質。
以 bHaptics TactSuit X40全身觸覺套裝 為例,全身內置 40 個觸覺反饋點,15 個小時的續航,在 VR 和 AR 眼鏡的支持之下,無論是游戲還是看電影,只要有相關的數據支撐,就能帶來真正意義上完全沉浸式的體驗,視覺聽覺觸覺全覆蓋,這大概才是真正意義上的「沉浸式體驗」吧?
Xenoma EMStyle 套裝也是一個針對皮膚和肌肉的新玩意,這款可穿戴設備當中包含 24 個電極,胸部4個,腹部4個,每個手臂2個,臀部2個,每條腿4個,它們可以為全身主要的肌肉群提供刺激,并且可以讓健身教練在安全距離之外,通過電極刺激的方式提供指導,也算是某種意義上的「虛擬觸覺」。
接下來說說我們更熟悉的智能眼鏡。
聯想 ThinkReality A3 智能眼鏡也算是今年 CES 上關注度較高的產品。其中,ThinkReality A3 又分 PC版和工業版兩種,兩者硬件配置上相同,但PC版只能和Windows 同步,工業版可以連接到Android智能手機(基于驍龍800系列芯片),并運行使用聯想ThinkReality軟件平臺構建的定制行業應用。
Vuzix 也在 CES 上發布了下一代智能眼鏡,其中集成了MicroLED顯示引擎,具有完全透明的高級波導光學器件。Vuzix 使用一對微小的高效 MicroLED投影儀提供動力,從而可以為用戶提供高密度像素陣列,在雙眼中投射超級清晰的視覺內容。
上面的智能眼鏡還算得上是科技產品,而 Mojo Vision Len AR 隱形眼鏡就算得上科幻級別的產品了。從尺寸上來說,普通眼鏡和隱性眼鏡就是數量級上的差別,Mojo 的這款智能隱形眼鏡使用微電子技術,內置了微型顯示屏,可以共享重要信息,用 Mojo Vision 來使用增強現實,不僅無縫,而且無形。
可以說,如今的虛擬現實技術已經走到了一個全新的階段了:
新事物正在以無與倫比的速度進化。芯片性能和基礎的技術為消費級的硬件提供了最扎實的工業基礎,繁盛而多樣的企業開始有意識地深耕細分領域的產品,其中留給設計師的空間其實非常大。
各式各樣的筆記本類產品,已經針對不同需求的設計師進行了細分優化,不同類型的設計師應該都會找到針對自身領域需求的硬件設備,多屏幕、多輸入方式的筆電和周邊外設正在快速地豐富起來。
而快速發展的柔性屏幕,則可能正在給 UI、交互設計師提出一個復雜的難題,那就是屏幕延展之后的UI和交互上的提升的問題。而智能家居和虛擬現實相關領域的快速進化,最終的問題同樣會壓到設計師頭上——你要如何為這一新的交互和UI進行設計?
那個時候,交互設計師這個門類應該會真正意義上徹底獨立出來,而不是把交互的活兒讓產品或者UI設計師來完成……因為交互設計本身的工作量會暴增,而且有著更高的要求和更加復雜的情況要處理。
文章來源:優設
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn