醫療行業的交互設計,跟其他行業有何不同?有什么要特別考慮的點?設計師應該注意哪些方面?
產品體驗設計通道中有條簡單好記的定義: 1+X。
「X」這個字母常被定義為更多可能性,它的誕生往往是為了更好地服務行業與產品。
例如在醫療健康行業中,不再只有C端用戶,我們要面對醫院管理人--員、患者、醫護人員還有企業用戶等;環境也不單是線上場景,它可能是醫院、企業大樓、社康、疾控中心等等;合作方式同樣獨特,我們做出的任何一個設計都是需要客戶過目的,每一個字段甚至都涉及到生命健康與安全,所以會要求我更高標準地了解行業與用戶,促使我們在項目前期去不斷學習和應用一些用戶研究知識,使設計更加貼近用戶。
過往經歷中,總結了用戶研究在各階段的介入場景和方法,接下來會具體講下在醫療健康項目中的運用。
企業健康項目是從一個合作開始的,公司的行政部門想要通過我們提供的健康管理產品來提升員工整體的健康水平,并將該方案進行復制從而提供一個企業健康管理的行業解決方案。
的確,員工是一個企業的寶貴財富,健康有活力的員工群體對提升企業生命力有著非同一般的影響。通過網絡文獻調研,我發現國內企業的亞健康狀況并不樂觀。
△ 國內企業健康現狀
第一階段用研——產品定義與設計方向
為了更了解員工和企業的真實情況和痛點,我們規劃了用研計劃,列出了三個用研目標:
目標1: 員工們的主要健康問題都是什么?
通過和企業方的溝通,我們發現員工的體檢報告是挖掘健康問題的源頭,于是我們由此開始研究。
首先,我們拿到了歷年的公司員工體檢數據統計(脫敏分析),整理出體檢問題的Top10。
△ 騰訊2018年體檢數據統計
獲許可,我們也隨機向外發放問卷,了解到一些公司職工最想要改善的問題。
△ 某大廈的用研報告(僅作為分析用)
目標2:企業現在所提供的服務有哪些問題,該如何改善?
B端: 由于這是一個B to C的項目,我們優先會去采訪企業端遇到的問題,溝通發現企業都會投資提供的健康設施(體檢,食堂,健身房等),其中很多設施并沒有被充分利用,或是沒有得到合理的分配,現有的線上預約流程也存在很大的后臺計算成本。
△ 騰訊提供的健康服務與設施(非疫情期間拍攝)
C端: 通過公司內部招募和訪談了20名員工,我們總結為三個主要痛點:
△ 員工在體檢健康中遇到的痛點
以上,我們也對企業客戶與員工用戶的訴求有了初步的了解。
△ B&C兩端訴求分析
目標3:如何定義產品目標與設計目標?
通過以上分析,和其他合作團隊一同討論了體檢與健康管理行業的現狀和盈利點,我們最終確定了產品方向:通過加入AI技術,分析用戶過往體檢數據來給用戶推薦最合適的體檢套餐,幫助用戶解析體檢報告轉化為更加易懂的方式,加強與醫療服務的定制化連接;并智能定制最適合員工的管理方式和行為,充分利用起公司資源。
△ 產品形象與定義
通過對整體流程的用戶情緒地圖分析,我們得出設計的關鍵詞:專業,貼心,安全
△ 階段情緒地圖分析
知識點1: 訪談與問卷調研
不要一上來就直奔主題,可以先問一些簡單回答的問題和閑聊,讓用戶進入放松狀態時再聊重點問題。且要時刻關注受訪用戶的狀態,比如:是不是開始疲憊,回答過于發散以及表達意思模糊等等。遇到這些問題,需要隨時做調整。
訪談的時候最好不要單獨行動,要有1個主導訪談的,一個記錄的。如果訪問過程很長,有條件以及受訪者允許的情況下,可以進行錄音有助于后期的整理。
訪談結束后,最好是當場,或者至少應該是當天就完成本場次的訪談記錄和總結工作。因為根據遺忘曲線,人在20分鐘后將遺忘42%的內容,而1天后則將遺忘74%。即使有錄音筆記錄,你也會忘掉很多細節的,諸如表情,用戶的潛臺詞等等。想到的設計解決方案也可以先記錄下來但不急于放到總結當中去。
第二階段用研——產品與設計驗證
確立了目標和方向,我開始從體檢預約和檢后管理兩部分來進行設計,由于在前期建立了用研機制,我們會定期對重要版本的內容和信息設計進行測試驗證,并讓用戶基于我們定義的設計標準來打分,判斷是否達到了專業,貼心與安全。
卡片分類-測試內容與排序
在檢后的體檢報告解讀中,我們需要對解讀結果進行結構化展示,方便用戶快速獲取有用信息,提高閱讀效率,由此我們運用了卡片分類法,讓用戶對其重要性的排序,得知對用戶來說體檢異常中的單項的指標解釋>危害性>指導措施。
△ 卡片測試與分析
可用性測試-測試架構與信息形態
體檢解讀的首頁我們繪制了三個版本的方案,來突出不同的信息通過制作原型demo來進行可用性測試,讓用戶選出最喜歡的并說明原因,最終選擇出一個最優方案。
△ 體檢解讀首頁可用性測試與分析
從彈窗內容組合到內容的體檢解讀指標的可視化設計我們都做了用研測試版本
△ 體檢解讀內頁信息測試稿
最終得到更加符合用戶認知的體檢解讀設計。
△ 體檢解讀設計
灰度測試與深度訪談
由于某些需求時間緊迫,例如體檢預約,當時很快就要到體檢季,于是我們快速搭建框架和基礎功能的設計,細節疑問點列出后進行灰度版本測試,并對前期招募的種子用戶進行測試訪談,總結現存版本的問題,同時我們也訪問了企業側,把他們的優化訴求納入考慮。
△ 體檢預約訪談腳本與測試結論
比如企業要求突出安全感,福利感與智能推薦,減少后臺結算成本等,我們便通過明確隱私授權認知的全頁面彈窗以及簡化體檢預約流程,2步變1步,增強頁面福利與智能推薦的感知渲染來滿足客戶要求,也得到了滿意的贊賞。
△ 隱私授權設計
△ 體檢預約設計
以上的用研方法其實可以運用在大多數的項目中,于是我在后續的騰訊健康模塊設計中也常會去使用,例如疫苗設計中的閃屏方案測試等等。需要注意的是用研應該被列入到日常的流程中去,而不能作為臨時安插,需要在項目實施前就進行用研計劃的擬訂,才能保證我們和用研同學有條理地客觀的進行調研和驗證。
知識點2:卡片與可用性測試
就醫流程是看似并不陌生的場景,痛點也非常明顯,就是常被提到的「三長一短」問題(掛號時間長,支付時間長,問診時間短),于是在進行線上就醫服務設計時,很多人會認為沒什么好特別調研的,競品也非常多。
然而其實在設計中,最害怕的就是「我以為」。記得在做某醫院的就醫服務項目時,由于就醫環境和用戶非常復雜,所以我們在做這個項目時堅持去到了前線進行了實地考察與影子觀察法,才發現了新的洞察。
實地考察中的望聞問切
說來很巧,現場的調研方法其實和中醫中的「望聞問切」有異曲同工之妙。
△ 醫療場景用研方法
「望」:可理解為影子觀察法:選擇最能反映問題的時間和場景去觀察用戶行為,發現痛點,經過幾天的觀察我們發現早上8-10點是醫院看病的高峰期,也是排隊最嚴重,院內最擁擠的時期,所以我會在這兩個小時集中觀察和記錄患者以及醫生的狀態。
「聞」:即為傾聽,其實也是訪談法中很重要的一個原則,多讓用戶去訴說,減少自己的主觀判斷干擾用戶的完整陳述,如果記不下可以錄音。
「問」:根據我們想要了解和觀察到用戶的行為進行提問。
「切」:這里和中醫中的切診接觸不同。是指切身去體驗患者的感受,比如我會根據自己身體的某些不舒服去掛號體驗流程,情景帶入。
以上的實地考察后,我在第一時間用我們設計師的手法來記錄整理:體驗地圖分析,并通過討論提煉出設計的關鍵點:引導,連接,合并與轉化。
△ 用戶體驗地圖與關鍵點分析
知識點3:影子觀察法
用戶體驗地圖的落地應用
這四個設計關鍵點其實來源于痛點描述中的一些高頻提到的情況,拿引導和連接這兩個點來說明。
引導:通過觀察發現,用戶在嘈雜的就醫環境中本處于極度焦慮緊張的狀態,對信息閱讀和處理的速度低于平時的好幾倍,因此我們需要提供具體的,正向的引導。
△ 精準預約設計
連接:通過訪談和自己實際的體驗發現,許多線上和線下的服務之間是斷層的,一方面需要流程上連接我付了款下一步要去哪,怎么拿藥;另一方面我們也發現線下的引導設計是一個非常重要的連接機會點。
于是我們從線上和線下兩方面進行了連接,提供了一套整體的解決方案。
△ 候診與取藥簽到設計
△ 醫院物料布局與落地布置
通過用戶關系圖了解了每個相關利益人的人群要素和訴求,在設計中不僅會考慮針對他們的設計,也結合體驗地圖中的機會點引出了設計原則,作為設計的指導和驗證標準。
△ 相關利益人分析與設計原則
測試與收獲
上線后,我們穿上志愿者的衣服,去往前線進行現場解說和用戶測試,經過一個月的努力,真實感受到了現場效率的提升和滿意度的提高,院方和使用過的用戶都非常滿意,這也讓我們設計師切實感受到了欣慰和成就感。
△復旦大學附屬腫瘤醫院病理會診 整體服務上線前后對比
這得益于我們能長時間與用戶在一起,真實地聽到了他們的聲音與感受,也把想法落地去幫助他們解決了問題。這個過程中,讓我們發現類似的垂直領域需要去到前線自己去感受,而不是隔著屏幕去觀察,每個人的思考角度會不同,會發現新的問題和洞察。
知識點4:用戶體驗地圖
在醫療數據分析的場景中,我們面對的客戶是政府和醫院領導。相信在做TO B設計的小伙伴經常會遇到這樣的問題:客戶時間比較難約,給的調研時間有限;決策層客戶思考的比較廣而泛,很難深入用研。
基于這樣的問題,我們想出了一個根據客戶群體層級,區別調研的方法。
梳理角色
去年年初,我們曾走訪多家公立和私立醫院,優先通過管理層梳理出了關于數據處理上報的流程。他們對數據的關注度和處理順序往往是有一個自下而上的上報過程,基層人員進行每個月度和季度的數據匯總,分析與簡單的可視化表現,上報給部門管理和上級管理者進行審核提煉,最終給到管理決策者一些關鍵現象和趨勢和對比。
由此提醒了我們,想要提供一個完整的數據解決方案,就需要繪制角色面板,區別調研目的與手段。
△ 醫院層針對數據的處理流程
分角色的溝通用研
我們確立了針對基層人員,中層管理者以及決策管理者的用研目標并展開了差異化的溝通用研,我們會每個角色找1-2人和我們3-4個同事坐在一起,以焦點小組的方法一同腦暴某一數據場景和所需數據。
△ 醫院數據現場用研
數據研究與總結應用
根據對醫院不同角色的溝通梳理出了一些總結點,運用到了產品和設計中。
第一:我們發現了管理者們最關注的一些醫院數據的形態,并打算把基礎數據盡量以對比,警示等手段進行分析與場景描述。便于管理者直觀獲取他想要獲取的輔助決策信息。
第二:根據不同角色提供針對性的角色面板,并梳理出個角色關注的數據模塊和現象。
第三:各角色具體數據字段的梳理與總結,并進行了頻率的標注便于后續的設計面板規劃。
第四:調研中發現領導層在看數據時需要來回切換系統,且看起來沒有一個統一的路徑和條理,因此我們也和對方溝通,通過故事化的手法進行數據分析的流程體驗設計,層層深入和下鉆,從現象挖掘到問題本質。更加符合了用戶看數據的順序和認知。
△ 長沙超腦項目設計版圖
除此之外,我們后面的產品和設計的匯報也會根據角色的差異來進行內容的調整,讓聽我們說話的人可以快速理解我們想要達成共識的內容,加快溝通效率,提升了在客戶心里的印象。
這個過程中,通過用研讓用戶感覺到我們懂他們,并讓其增加了參與感,對產品和設計都是一個推進器。
知識點5:TO B/G客戶用研
說了那么多設計師在用研技能上的應用,也許有人會有這樣的疑問:如何可以不斷提升自己在各方面學到的技能呢?一年前讀到《刻意練習》這本書,給了我一些啟發,在此總結給大家,希望對你們有幫助:
1. 制定具有定義明確的特定目標
「提升專業」是個很大的詞,所以我們往往定了一個很大的目標,然后被各種事情拖著然后拋之腦后。因此拆分目標才是第一步。比如最開始做交互時我發現自己在歸納場景時總會缺失,再比如每次自己在匯報總結時,耗時過長,缺乏重點,那么這些都可以被列入要提升的小目標,總之目標不要太泛太難實現,這樣實現起來會更加容易,也更容易堅持和自我激勵。
2. 持續學習與專注練習
研讀多本相關專業書籍,并應用的項目中去。這是我的一個目標也是方法。投入項目后,我們往往會陷入事件當中,甚至會就一個點和產品爭論不休。但其實跳出來,去看些新思路不妨為一個好方法。
比如我最近在讀《感官心理學》這本書,提到人們對于「軟」和「硬」的觸感印象會延伸到女性和男性的聯想上,提到女性人們自然都會有柔軟的印象,男性則會有剛硬事物的聯想,這也就充分佐證了對于不同性別上的設計形態差異。類似的小實驗可以幫助我們的設計更有說服力。
大多時候理論知識很枯燥,也難以一時間就可以用到,但只要你讀過,在需要的時候它就會突然跑出來給你靈感。
專注是我一個單線程人的特點,我很難在一個時間里同時處理多件事,所以我會每天根據要完成的訓練目標,把時間進行劃分,個人感覺這的確產出效率也會高一些。
3. 一定要有反饋
每一次的練習必須要得到反饋,這也是評審的重要性。但其實不同的目標點可以對應方面的專家,不僅限于leader了,同事也是很好的老師,比如我會去發現身邊匯報比較厲害的同事,幫我把關。只要遇到問題,一定不會放過去問用戶研究同學的機會。
某方面沒有老師怎么辦?讓用戶告訴你!首先我會常用可用性測試的方式去檢測自己的方案中的信息傳達,交互反饋等等在進步,另外我也會在每個項目后整理一個小總結,來記錄自己的思考與進步
另外,以下是我在用戶研究學習中讀過的幾本書,推薦給大家~
面對飛速發展的現在,各行業的產品也都在積極轉型,例如開始涉足TO B行業和客戶,開始研究00后的新生代用戶,面對新事物我們設計師更要保持敏銳的眼光,利用自身的設計洞察能力去挖掘新的問題與方法,于是新的技能和方式也開始出現,所以我們一直認為產品體驗設計師沒有一個固定的能力模型,還是要根據你所從事的行業和產品來發現所需的技能點去發揮價值。學習的過程中,我們成就項目的同時也在慢慢成就自己。
文章來源:優設 作者:騰訊 April
目前眾多的網文產品中,設計同質化比較高,無論是產品視覺或是品牌運營視覺大多都缺乏獨創性與統一性。番茄小說想要從眾多產品中脫穎而出就需要走出一條合而不同的設計道路。因此提升產品的識別度與消費者對品牌的認知勢在必行,設計需探索構建一套屬于產品的語言體系。
探索番茄小說的設計語言,建立產品認知
傳統文學
文學分為兩類,嚴肅文學(看重語言和細節)、通俗文學(注重情節和故事,淺顯易懂)。
周憲《文學理論導引》里定義「文學是以精致語言書寫的具有藝術價值的以文本為中心的文化系統?!雇ㄟ^定義可以概括出文學的特點就是具有藝術價值,并且能夠通過文字內容帶人用戶反思或者收獲。當人們在閱讀文學書籍時是冷靜的,只有在這樣的心境下讀者才能更好的獨立思考與分析。因此在氛圍上需要給用戶提供一個相對沉浸的空間、安逸的環境,通過分析可以提煉出的傳統文學情緒關鍵詞:沉浸、冷靜、舒適、價值
網絡文學
不同于傳統文學,網絡文學是順應市場價值而誕生,是文學創作的平民化,讓大家能夠以網絡為載體而發表的文字內容。廣義來說,網絡文學屬于通俗文學的一類,注重情節和故事,通過文字傳遞的內容更加的樸實、接地氣,在創作分類上也更加的多樣化,作者可以天馬行空的表達自己感受,可以說是在傳統文學的基礎上,給文字增加了幾分煙火氣息,也多了幾分熱鬧的感受。
因此通過文學關鍵詞可擴展出網絡文學情緒關鍵詞:沉浸、愉悅、煙火氣
前期通過對小說用戶群體與市場的走訪調研,并通過數據分析,我們得到了如下結論:
產品用戶類型
12-50歲青中年人;后GenX時代;一二三線城市有閱讀小說習慣的人群;目前為對生活充滿向往的學生與藍領
產品品牌人格
樂觀愉悅(輕松);品質(書好);親民、豐富(書多)
產品視覺風格
品牌色貫穿產品,但不過分使用;視覺為產品功能服務,不做多余的設計;視覺表現多樣化,但需要表達相同的產品氣質;適度的留白,增強設計空間感
產品核心詞:「沉浸中的愉悅」
正如我們對文學的分析,小說閱讀同樣是一種獨立個體的行為方式,在讀書時,我們不希望被人打擾,不希望被瑣事細節阻斷,我們希望在一個相對安靜、舒適的環境下閱讀,這是一種沉浸式的感受。
因此這里我們就根據用戶的想要的感受,引入「沉浸」的概念——希望能夠給讀者留下一定的空間,并拋除繁雜打擾,讓大家享受閱讀與獨立思考。其核心是圍繞信息內容本身而呈現,設計不再作為獨立于內容之外的元素存在,而將著眼于內容本身,為用戶打造直觀的視覺體驗。拉大層級對比,增加適當的留白,在一定程度上增加少許修飾,打破絕對的冷淡。其既能體現出文學的特點,又能夠在簡約的基礎上增加畫面的構成感,給用戶愉悅的感受。
觸感
網絡小說與傳統文學另外一個最大的區別是觸感。
傳統文學大多以實體書籍紙張為承載,而網絡文學來自于互聯網是虛擬的。我們在閱讀時,觸摸紙張與書本樸實的質感,也能夠給讀者帶來額外的舒適感受,因此如果能以視覺的形式還原用戶對書籍的「觸感」,不僅能夠將網絡與實體相鏈接,也可以幫助用戶增加電子閱讀的樂趣。
根據歸納出的文學特征,以及調研用戶年齡層與喜好,我們可以歸納出番茄小說基礎原生關鍵詞。
基礎原生關鍵詞
拓展衍生關鍵詞
根據網絡文學原生關鍵詞,我們拓展出衍生詞
圖片搜索、提取情緒版
根據相關的衍生關鍵詞,我們收集大量的視覺圖片并將其匯總,借以分析其視覺特征
色彩提取
視覺映射
通過對情緒版的分析,我們可以得出結論并整理出番茄小說設計語言,輕量的色彩、寫意式元素、非對稱布局、紙紋理噪點
將傳統的冷靜沉浸與網絡文學的熱鬧向融合是番茄小說設計語言的重要視覺呈現方式風格
多元化的簡約設計+情感化修飾
Logo
番茄的品牌名稱基于「、優質」的產品理念,服務于產品設計、品牌設計中。番茄相對于紅果是一個更加具象的表達,不僅可提高用戶對產品的認知,也能傳遞小說品牌的理念和態度?;诖耍@個理念框架是講述品牌故事的關鍵載體。
logo動畫展示
小說相關產品logo匯總
在logo的設計上我們將番茄的圖形概念化,保留番茄籽,局部的留白讓標志同樣能表達空間與白的概念。我們選擇在白色底上用紅色非對稱性式logo ,既區別了市面上大多產品logo樣式,又能夠加深用戶對產品的印象,突出了「愉悅」的特性。
選定 logo 并設計圖形+文字組合:
在文字設計上,相比正常宋體弱化文字襯線,為了突出空間感,我們擴大了字面拉伸了中宮的占比,這樣做不僅提高文字識別度,整體氣質也也能夠與沉浸的定義相耦合。
品牌色
前期通過情緒版的分析,摘取關鍵詞配色,綜合歸納出符合番茄小說特性的的色彩搭配
通過對情緒版色彩的歸納,我們抽取具有代表性的顏色,作為番茄小說的品牌色
輔助圖形
從logo中番茄圖形的概念出發,提取出以圓、番茄籽、番茄輪廓為基本型的品牌圖形元素
官方字體
考慮到官方字體在沉浸式頁面中的運用,番茄官方字體的選擇與品牌屬性相契合的蘋方體、宋體。
VI 呈現:
品牌視覺感受:
品牌體現—產品場景
番茄小說給人的感覺是安靜、平和、友好。因此在顏色使用中以品牌色配合低飽和度背景色做搭配,突出產品的帶給用戶的沉浸、愉悅感。
運營場景—運營設計對品牌塑造的意義
第一眼的感受,往往決定了用戶對產品的整體印象。目前在番茄小說的產品中,最直觀的品牌視覺展示主要以書單活動banner為載體,其做為活動入口本身就處在一個前置的位置,占用空間大且更能吸引到用戶的注意。因此,需要對運營焦點圖設計精細化的打磨,讓用戶在打開產品的瞬間,快速塑造產品在用戶心中的視覺形象。
番茄小說運營設計——和而不同
運營設計的基本原則
因此番茄小說的運營視覺需要緊密圍繞在這個大前提下進行設計,快速傳達信息=保證信息的簡單化、文字有效性,促使用戶行動=畫面內容的趣味性、吸引性。
視覺呈現形式
遵循番茄體系,體現小說內核的「煙火」氣質,視覺呈現多元化。以運營文案為中心,畫面設計貼近內容,降低用戶信息識別成本。
品牌運營視覺一期構建:手繪元素+非對稱構圖+質感
設計規范
運營視覺與品牌調性應是統一的,因此在運營設計的色彩選擇需要與品牌配色相呼應,保證視覺與整個產品的和諧性。
運營插圖案例
在運營活動中,依然要以產品所傳遞的氣質來進行畫面設計,即是保留沉浸的前提下,抽取關鍵詞的某個方向來表達品牌運營所傳遞的理念。在色彩的使用上可以圍繞關鍵詞的方向來選擇顏色,以表達內容所傳遞的信息,可適當使用品牌色作為點綴,但依然需要的保持視覺給人帶來的平和感。
作為一個從 0 到1的品牌,番茄小說的設計語言依然在不斷的打磨、優化。整體清晰的品牌規劃能夠保證線上、線下、產品與營銷的各個視覺設計環節更加統一,同時也為后續的設計指明方向,助力業務持續發展。
文章來源:優設 作者:今日頭條UED
不用看時間,你沒有穿越,現在是 2020 年,不是 2000 年。這復古的字體設計和這帶有年代感的落日背景,以及悠揚壯闊的背景音樂,甚至讓我以為是在看二十年前新年晚會的演出視頻。
△ 視頻鏈接:https://v.youku.com/v_show/id_XNDYzNTE2MzgxNg==.html
不得了,不得了,恒大足球場的宣傳視頻甚至登上了央視的廣告舞臺,展示給了全國觀眾,壕氣十足,花開富貴,這絢爛的煙花背景,讓我瞬間夢回三十年前。
建筑不僅外表華麗,其實文化內涵還很深厚,與中老年表情包冥冥之中有了一個巧妙的對應,蘊含著給你帶來好運,祝你平安健康。
據網友考據,設計理念可能來自于一盆多肉,為了更加貼近人民群眾的生活,讓人們時時感受到自然的美妙。
還有網友幻想出最終建設完成時的終極形態,積極對建筑進行了自己的解讀和創作,看這廣泛的聯合角色設計,佛祖、紅孩兒;這跨越多個時代的風格雜糅,上個世紀的吉祥如意、這個世紀的游戲建模;涵蓋多個領域的蓮花主題,植物、彩燈,應有盡有,真是妙啊!
什么?你覺得不好看嗎?這可是恒大總裁許家印從 9 種蓮花寶座設計方案中精挑細選出來的一個!九種不同的蓮花設計方案,深淺不同的粉紅色,看不出有多大不同的開合程度,微微不一樣的花瓣設計,供你瞪大雙眼選擇。
你問:可以阻止這個色彩絢麗的建筑修建起來么?來晚了,蓮花寶座已經于 4 月 16 日開始修建,屆時會成為世界規模最大的頂尖專業足球場。開心一點,說不定以后能在中國看世界杯了呢。
既然是世界規模最大的頂尖足球場!為什么不修好看一點?這什么設計師,這種紅配綠,亮瞎人眼的設計是哪個沙雕公司設計的?許老板這么有錢,怎么不請好一點的設計師呢。廣州這么時尚的城市配上這樣的土味建筑,真是令人頭大。其實,你可能罵錯人了。背后的設計公司可是 Gensler,現在世界上數一數二的的設計團隊。這不是變魔術,設計出上面土味十足的建筑和下面高級感撲面而來的建筑的就是一個團隊。
上海中心大廈(右一),憑借其獨特的造型和樓高,榮獲諸多大獎,成為上海地標性的建筑之一。
還有菲律賓金融中心大廈,與周圍的建筑對比起來,科技感和現代感十足,在 CBD 群中獨占鰲頭。
又或者是在波士頓起到樞紐作用的綜合體建筑設計,一眼望去稱霸整個地區。
這怎么看,都不像是一個團隊設計出來的作品。蓮花球場和高級感相關在哪里?這不是隨隨便便一個設計師都可以設計出來的么?其實,這也不是許老板第一次這么偏愛蓮花了,看看?;◢u項目就知道了,網友調侃說到,果然設計師還是敗給了金錢。
不過同樣是以蓮花為設計元素,印度的蓮花寺怎么看起來就這么高端優雅呢?與蓮花球場「土味建筑」不同的是,蓮花寺廣受好評,被稱為新德里的「悉尼歌劇院」。
類似蓮花球場這樣的案例在中國還有很多。之前被評為 2017 年中國最丑陋的十大建筑之一的廣州圓大廈,由意大利米蘭設計師 Joseph di Pasquale 設計,他在采訪中說到:「中國改變了他,讓他知道了文化如何融于建筑,如何更好地滿足客戶的欲望?!蛊鋵嵔ㄖ脑⒁狻鸽p環玉璧」是很好的,但是最終的效果不盡人意,建筑類似于黃金的外表顏色,被網友們吐槽,稱其為「土豪圓」。
不過設計這個事情,有時候也很難去用單純的美丑判別。例如設計出臺北 101 大廈的李祖原老師,在同年設計出的沈陽方圓大廈,是參考銅錢的形狀設計而成。在 2000 年威尼斯世界建筑設計展覽會上被稱贊為是「世界上最具創意性和革命性的完美建筑」,但在 2012 年卻被 CNN 旗下的生活旅游網評選為全球最丑的十大建筑之一。
你以為這就結束了嗎?別走,奇葩建筑還有很多,中國各個省都互不相讓。首先我們從南看起,海南三亞的「美麗之冠」,就是后面那些像樹一樣的建筑,一模一樣的樓不知道為什么要修建九個。
往北走,我們來到了官方宣傳視頻里寫到的「不來萬家麗,枉來中國行」,之中的世界最大建筑「長沙萬家麗」。這棟同樣金碧輝煌、中西結合的建筑讓你深刻體會到一句話「有錢就是可以為所欲為」。不論是美是丑是否合適,只要是自己喜歡的元素,通通都堆砌在一棟建筑里。
接著我們來到了山東的文成城堡,沈騰的《西虹市首富》取景地,看看這個豪華程度,一晃神還以為自己來到了歐洲。
最后我們來到河北,學習魔法不需要出國,直接來河北美術學院,一個被戲稱為「霍格沃茨華北分?!沟拿佬g帝國,由于其仿照魔法學院進行的設計,在中國眾多美院中獨樹一幟。
以上這些奇葩建筑的盤點,均來自于 B 站 up 主史里芬 Schlieffen,一個被長沙萬家麗老板黃總盛情邀請再次體驗萬家麗的男人。盤點中國奇葩建筑,現代青年當仁不讓。想要了解中國建筑底層設計的朋友,可以前去品鑒和觀賞,不要怪我用丑陋和土味蒙蔽了你們的雙眼。押韻的解說詞,第一視角的全方位建筑講解,你值得擁有。
主頁鏈接:https://space.bilibili.com/323733137/
這樣的建筑作品很新鮮但是確實不美觀。且不說中國其實有很多好的設計師,為什么和國外知名設計團隊合作,做出來的作品依舊差強人意呢?難不成是我們的審美水平真的已經淪落成這個地步了?如果哪天全民都覺得這樣的建筑是美的,都欣賞這樣的建筑,那我們整個社會才算是陷入了「惡趣味審美」之中,就真正完蛋了。標榜著以「蓮花綻放」這一美好寓意為核心的蓮花球場設計,何嘗不是披著虛偽外衣的土味建筑設計呢?美能夠讓人感到幸福,反過來,丑則使人感到不適。
對于蓮花寶座外形的足球場設計,我想開了,畢竟我不是亞洲第五富,眾位設計師,你們是怎樣看待的呢?
文章來源:優設
feed 單詞釋義:v. 喂養;進食;為……提供充足的食物;施肥;為(某人)提供(信息、主意等);
n. 飼料;飼養;(尤指給動物或嬰兒)喂食;進食;(計算機的)訂閱源
形象來講,如今新浪微博、微信朋友圈、抖音、今日頭條、小紅書、Facebook、QQ 空間等等內容平臺每時每刻都在不斷投喂給我們賴以維系健康生活(廢柴生活)的精神食糧——信息內容。而這些信息組合起來的格式便是 feed。
1. Feed
feed 是一種信息格式,平臺通過它將資訊傳遞給用戶。feed 是信息聚合的最小單元,每一條狀態或者消息都是 Feed,比如朋友圈中的一個動態就是一個Feed,微博中的一條微博就是一個 Feed。
2. Feed流
feed 流即持續更新并呈現給用戶內容的信息流。每個人的朋友圈,微博關注頁,頭條新聞等等都是一個 Feed 流。
Feed 源于早期的 RSS(Really Simple Syndication )
RSS(簡易信息聚合):將用戶主動訂閱的若干消息源組合在一起形成內容(aggregator),幫助用戶持續地獲取的訂閱源內容。對用戶而言,聚合器是專門用來訂閱網站的軟件,一般亦稱為 RSS 閱讀器、feed 閱讀器、新聞閱讀器等。用戶選擇訂閱多個訂閱源,網站提供 feed 網址 ,用戶將 feed 網址登記到聚合器里,在聚合器里形成聚合頁,用戶便能持續地獲取的訂閱源內容。
在早期的 Web 時代,訂閱源一般是新聞網站以及博客。用戶主動訂閱感興趣的多個訂閱源,訂閱器幫用戶及時更新訂閱源信息,然后按照 timeline 時間順序展示出來。這樣,用戶可以通過訂閱器獲取即時信息,而不用每天都檢查各個訂閱源是否有更新。
轉折出現在 2006 年,Facebook 宣布了一項新的首頁形式「News Feed」,這一形式打破了傳統 RSS 的訂閱方式。News Feed 可以看做一個新型聚合器,訂閱源不僅僅是某個網址、某個新聞網站或者某個內容,而是生產內容的人或者團體,而內容即是好友或關注對象的動態(發布的內容以及其他的社交行為)。News Feed 的出現使得 RSS 被迫淡出歷史舞臺。News Feed 發展至今已經拓展出多種多樣的模式和呈現方式。
推模式:每當用戶發帖,對所有粉絲推送一條該用戶的動態消息記錄。需要考慮的是如果一個粉絲量級非常大的用戶(大 V),發布一條動態那么需要在每個粉絲頁推送一條動態,多個大 V 級別用戶同時發帖對數據的存儲負荷是非常大的。
拉模式:每當請求好友動態,拉取用戶所有關注者的最近動態,然后匯總排序。如果用戶同時關注非常多的用戶,那么查詢這類型的用戶的關注列表也是很大的數據成本。
推拉模式:在線推,離線拉;定時推,離線拉。
除了關注 feed 流的主要模式之外,feed 流的排序方式也值得一提:
Timeline:按發布的時間順序排序,先發布的先看到,后發布的排列在最頂端,類似于微信朋友圈等。這也是一種最常見的形式。產品如果選擇 Timeline 類型,那么就是認為 feed 流中的 feed 不多,但是每個 feed 都很重要,都需要用戶看到。
Rank:按某個非時間的因子排序,一般是按照用戶的喜好度排序,用戶最喜歡的排在最前面,次喜歡的排在后面。這種一般假定用戶可能看到的 Feed 非常多,而用戶花費在這里的時間有限,那么就為用戶選擇出用戶最想看的 Top N 結果,場景的應用場景有微博、頭條新聞推薦類、商品、視頻推薦等。
目前 feed 流的主流排序方式不再嚴格按照 timeline,而是廣泛使用智能 feed 排序。
智能排序基于趨勢 trending、熱門 hot、用戶生產 UGC 、編輯推薦 PGC、相似 Similarity 等等因素綜合考慮,隨著技術的進步,智能算法將會更加懂得用戶的喜好。新的 feed 流不再需要用戶主動訂閱或者搜索,只要監測我們的瀏覽時長、點贊分享等動作,或者建立用戶畫像類別,就可以主動推薦我們感興趣的內容。它對我們了如指掌,給我們想了解的,讓我們不停刷新沉溺于其中。就現在 feed 流中的廣告,女性用戶對化妝品的喜好,男性用戶對車的偏愛,臨時借錢的窘迫,這些暖廣告已經不再像牛皮癬一樣惹人討厭,甚至變成了一顆我們愿意吃下的安利。
可以有以下大致分類:
feed 作為信息聚合的最小單元,每一個 feed 都會具備相應的內容。其中包括發布的時間、發布者、文字內容、圖片內容,還包含點贊、轉發、評論、關注等操作、根據應用場景、業務目標不同,其表現方式也大有不同,任何表現形式都應該是為了更好地呈現功能及內容。
新聞資訊類產品和社交互動類產品 feed 元素大體相同,區別在于新聞資訊類產品通常著重展現新聞內容,標題,簡介,匹配的圖片等,而發布時間和發布作者等會在單個 feed 的底部出現。在圖文兼備的排版布局中,左文右圖適合文字內容類比如文章或者知乎、豆瓣等長答案評論等,圖片是輔助信息支撐文字內容。左圖右文圖片更加吸引人的注意通常出現在商品信息比如什么值得買。
社交互動類產品,其最終目的是發現和拓展社交關系,融入相應的社交圈。而這時候社交拓展的基本單位人或者團體發揮著至關重要的作用。所以我們可以發現,通常的社交互動軟件都會將發布者頭像放在上部展示的位置,也會在底部突出點贊,評論,分享等互動操作。
視頻直播類產品與前兩者相異,頁面的大部分空間留給視頻內容的展示,一般一屏只承載一個 feed 信息單元,內容等提示元素在左側呈現,除回復評論等操作元素列在右側。
feed 中各元素的位置關系、所占比例與產品自身定位密切相關。如微博作為泛社交應用產品,社交關系主要建立在內容上,社交關系質量較弱,多為單向傳播,注重的是傳播的速度和內容公開。所以其 feed 的呈現方式發布者與發布內容不做明顯的設計排布區分。以卡片間隔的形式在 feed 與 feed 之間做區隔。評論頁面在下一層級。
微信是作為一個社交工具,社交關系質量較強,多為雙向關系,注重的是私人內容的交流和互動,信息的傳播速度不快,但受眾信息消化率很高。所以將發布者頭像與發布內容做出較明顯區分,feed 與 feed 之間因為已經有了頭像元素這一明顯區別要素,僅用分割線做區隔。且注重評論區域的互動與展示。
無論怎樣的設計布局方式,遵循的核心思想始終是根據場景需求、業務目標去發展深化設計方案。每一個設計點都要有足夠的支撐,多問問自己為什么這么設計,解決了用戶什么樣的問題?還有沒有更好的替代方案?而不是這樣設計是不是新穎,出奇制勝。
文章來源:優設 作者:Nicole
用戶體驗是用戶在使用產品或者服務中的所有的主觀感受。因此我們設計的過程中要以用戶為中心進行設計,不能單單為了設計一個產品而設計,只關注產品設計本身的功能性。
在生活中好的用戶體驗設計的產品讓人使用舒適,而用戶體驗不好的設計往往讓人很糟糕。
用戶體驗比較好的:比如我們坐地鐵的過程中很準時,這就是好的用戶體驗;在吃海底撈時,看到好吃的西瓜,他們會給你打包,這就是好的用戶體驗。
用戶體驗比較不好的設計:比如在生活中有些插座設計,一個兩孔一個三孔,只能一次插一個,很氣人有沒有,難道上下錯位和間距拉大有這么難嗎?再比如蚊香的設計,很容易斷,每到夏天不斷幾個,都不好意思!
在產品設計中是否滿足用戶需求我們可以分為 3 個點來進行分析,主要是有用性;易用性;滿意度。
有用性就是產品有用的設計功能,也是產品基礎的設計原則。
對于有用性而言,我們在這個過程可以主要在三個方向進行把控,就是:基本需求;期望需求;興奮需求。
基本型需求
基本型需求是用戶必需需求,用戶在產品中認為這是必需的功能,(這些基本需求是用戶認為必備的,有了用戶覺得是應該的,如果沒有這些需求,那么用戶在使用產品過程中間大部分會直接放棄,選擇其他家產品)。
比如淘寶產品中的訂單和商品功能就是基本型需求;微信中的聊天和通訊錄就是基本型需求;QQ 音樂中的播放頁、播放菜單就是基本需求。
期望型需求
基本型需求是用戶意愿型需求,用戶自己也不知道,但是期望獲得的功能。(這類需求就沒有基本需求那樣必備,是產品中期望需求體驗越多越好,用戶越滿意,反之用戶滿意度也會下降)。
這類需求是期望型需求,也是我們產品競爭力所在,因此往往人們在談論哪個產品好不好,通常是期望需求和興奮型需求。比如淘寶產品中能買到便宜產品,而且符合詳情頁中描述;比如微信產品中聊天語音/微信/視頻,聊天更加方便;比如 qq 音樂中的曲目和歌單數量增加,用戶就會很滿意,這也是期望需求。
興奮型需求
興奮型需求是用戶非常期望的需求。(這類需求滿意度高,有這些興奮型需求時即使不太完善,用戶也會滿意,做得非常好就會讓用戶興奮;沒有這些需求用戶也不會表現得不滿意)。
比如淘寶產品能夠更多滿足用戶多樣化的生活,各種生活服務提供給用戶;商品評價頁用戶互動,方便用戶可以熟悉產品好壞;比如微信產品中暗黑模式,滿意希望黑暗模式體驗的用戶需求;比如 qq 音樂中單曲熱評,讓我們對歌曲背后的故事,歌友的心路有了了解互動。
此外興奮性需求在產品中還有一些重要的點,比如微動效、情感化設計等等這些都可以讓產品提升很大的用戶體驗,和宣傳力度,因為用戶在談論產品好壞時候比較多的是說產品的興奮型需求。
需求分析模型
需求分析工具 KANO 模型,主要是幫助我們直觀的了解產品不用類型需求實現程度和用戶滿意度的對比,我們了解這些需求的時候,可以讓我們更好的看到這些功能點有哪些影響力。
易用性就是產品好不好用,容易使用嗎。同時我覺得在有用性上產品經理需要考慮得比較多一點,而易用性上就是我們 UI、UE 需要重點負責和掌握的東西。
對于易用性而言,我們可以主要在三個方向進行把控,就是:上手快 ;操作快;負擔少。
上手快
上手快就是用戶使用產品容易上手,沒有啥學習成本。簡單的意思就是讓用戶不怎么動腦去想就知道下一步我要做什么,用戶操作滿足自己的心智模型。
心智模式是指深植我們心中關于我們自己、別人、組織及周圍世界每個層面的假設、形象和故事。并深受習慣思維、定勢思維、已有知識的局限。簡單理解就是在使用產品中滿足我們對產品的認知思維。當然文中介紹的只是心智模型的很一小部分,主要是想讓大家多去了解心智模型,更好地在以后的產品設計中運用它們。
比如淘寶的下單彈窗、微信的紅包、QQ 音樂的音樂播放,都是用戶容易上手,即使小白用戶在使用時,根據它們簡單的提示就可以操作,沒有太多復雜選項,一目了然。
操作便捷
操作便捷就是用戶在使用產品中操作效率高,沒有太多干擾項目。(這類設計一般就是操作方便,盡可能地減少干擾項目,增加快捷入口等)。
比如淘寶產品中的物流信息,沒有太多干擾直接出現在訂單的頭部位置,提高用戶查看商品物流信息的操作效率,提升了用戶體驗。比如微信聊天中的發送圖片功能,直接顯示最近圖片,快捷發送,提高用戶發送圖片的操作效率。比如 QQ 音樂的播放直接在首頁出現,方便用戶選歌切換,操作效率高。
負擔少
負擔少通常是減少記憶負擔,不讓用戶累著,為用戶分憂。
比如淘寶紅包展示就是在我的頁面里面直接顯示;比如微信錢包余額直接在錢包按鈕下方顯示,不用進入三級頁面;比如 qq 音樂自建歌單顯示歌單數量,減少用戶記憶負擔。
滿意度簡單理解就是用戶需求被滿足后的愉悅感。它是相對的概念,就是用戶需求和產品完成度之間的衡量。
對于滿意度而言,在產品設計上有很多方面,今天我們簡單講一下兩個方向的把控:視覺感官的刺激;獎勵。
視覺感官刺激
視覺感官刺激主要是超乎用戶想象的好看的視覺。而在 UI 設計中主要體現在動效設計、插畫等等。
比如淘寶產品中的圖標動效,趣味設計,提升用戶對產品的情感交流。比如微信聊天中的表情包功能,簡單的動作表達用戶的心理,好看又好玩。比如 QQ 音樂的加載像音符一樣有韻律地跳動著,給用戶帶來不一樣的審美體驗。
獎勵
獎勵是指用戶在完成一些操作時給予獎勵的設計。超出用戶預期,帶來愉悅。
比如淘寶用戶每次下單/參加活動獲得淘氣值,滿 1000 可以購買 88 會員,原件 888。比如 QQ 音樂的活動中心,用戶每日簽到累計可以獲得會員體驗獎勵,更優質內容的聲音享受激勵。
用戶體驗設計最根本的就是以用戶為中心進行設計,本文主要從有用性、易用性、滿意度三個維度來把控用戶體驗設計,但是在日常工作中,因為產品業務的復雜程度,我們要因地制宜地進行設計,深入挖掘我們產品自己的體驗設計特色,增加自己的設計市場競爭力。
文章來源:優設 作者:阿韓設計
在很多設計作品中,我們不難發現對于材質的運用是十分廣泛的,合理地運用材質可以很大程度地提升作品的質感、細節感!但是相反,如果使用不得當它也可以毀掉一個原本不錯的作品,很多人對于材質的理解存在著一定局限性,那么本期內容:設計中材質有哪些運用形式?應該如何合理地運用材質?
很多人對于材質并不陌生,但是每次使用后最終結果總是差強人意,這里首先要說的就是材質運用的幾個常見誤區:
那么應該如何合理地運用材質呢?
在日常工作中,背景添加材質、肌理的手法是很常用的,但是表現手法上也是有所不同的,表現形式一:將材質、肌理作為背景形象的一部分,也就是將材質做得足夠明顯,這么做的目的是豐富畫面視覺層次變化,增強畫面整體對比,比如我們常見的:
通過對比不難發現有無材質對于整體的影響,同樣的構圖,沒有材質變化的畫面給人一種很單薄、視覺形象不夠鮮明的感覺,但是通過添加材質、肌理,畫面整體的豐富度大大提升,背景畫面的變化增強,通過材質的變化,也使得主體的視覺形象也更加鮮明;將材質作為背景的組成部分,一定要切記時刻圍繞主體展開,主體的位置是不可撼動的。
表現形式二:將材質、肌理作為畫面視覺中相對較弱的表現形式,也就是做得不明顯,縮小看幾乎沒有,正??吹那闆r下又有一定的變化,這種表現形式目的在于增加畫面細節感,使得畫面不會因為缺少變化而略顯單調,比如:
這種表現手法放小了看對于畫面的影響并不大,但是如果 1:1 正常比例看,有材質的畫面會給人一種細節感豐富、畫面充滿不同層次的變化感受,這樣帶給作品更多的可塑性,使得畫面給人的視覺感受更深刻,同時也起到了一定的豐富畫面的作用。
對于在文字中疊加材質在一些作品中是很常見的,同樣的文字,給予不同的材質也會呈現出不同的視覺感受,更多的目的是提升文字與整體形象的契合度,增強整體視覺沖擊力,比如:
材質在很大程度上可以提升文字的立體形象,使得文字在整體的視覺形象更加鮮明,但是對于材質的運用也要做到有所選擇,每種材質所傳遞的視覺信息都有所不同,要讓材質與文案、主題相契合才能將材質的效果發揮得淋淋盡致,這一點很重要,比如:
這里只考慮材質對文字的影響,首先我們解讀文字「第一戰場」,讓我們首先聯想到的就是破損、狼藉、金屬等等,那么在給這一文字添加材質時我們就要結合主題;上面兩種的材質分別是木紋和大理石,給人的感覺是太過干凈、簡約,與戰場主題不相符,所以說材質使用不得當,而后面兩個的材質分別是破損的石灰墻以及金屬,就能在很大程度上加強「戰場」這一主題的視覺形象,在視覺上屬于強調的作用。
材質的選擇和使用也是有一定技巧可言的,這里首先要說下:當我們想要使用材質時,應該如何選擇呢?
結合整體風格選擇,比如畫面整體偏簡約、干凈的感覺,我們就可以嘗試:大理石、木紋、石灰墻、花紋、木紋等等;再比如想要炫酷效果,那么我們就可以嘗試:金屬、破損墻壁、石頭等等,也就是說盡可能讓材質本身的風格偏向畫面整體風格,這樣可以讓材質更加融合畫面,不會給人一種很突兀、刻意的感覺。
結合產品選擇,一切的手法、技巧都是要服務于產品、主體的,結合產品選擇材質也是很常用的;比如一些化妝品海報,我們可能用到的材質會有:水、植物、大理石、木紋或者產品本身所固有的材質等等,目的是凸顯產品的美觀、功效,讓用戶能夠在背景及產品之間產生共鳴、聯想,這樣也能起到對產品的強調輔助作用。
關于使用:通常找到合適的材質后,會銳化一下,目的是增強材質的質感,然后會用不同的圖層模式去試,(一般情況下會用「正片疊底、濾色、疊加、柔光的模式」)以便找到最佳的使用形式;當然如果只用材質的紋理感覺,不用材質本身顏色的話,也可以去色后再去選擇圖層模式。
結合本期內容,做了一個簡單的化妝品的海報,充分利用材質的不同表現形式,用分析的角度去觀察,第一步,通過運用 C4D 軟件,做一個簡易場景:
簡易場景搭建完成,因為只是黑白稿的場景,那么接下來就要通過分析產品確定材質的選擇:
產品的感覺是干凈、簡約的,那么就圍繞這個整體感覺,展開材質的貼合及制作,這里我選擇紋理相對不復雜的大理石為主要材質,結合用到木紋、金屬作為豐富畫面的材質:
這樣一個畫面給人的感覺是輕飄飄的,因為沒有影子,沒有將畫面做出光感的效果,而且整體缺少色感,這里我選擇把原本無色的材質換成有色材質,目的是增加畫面整體色感,其次將投影、倒影做好,光源定在左側,最終呈現的效果:
最終的呈現幾乎是用不同材質做出來的一個場景,雖然這里用到了很多不同顏色的材質,但是最終用到的材質屬性只有三種:大理石、木紋 、金屬,而且依舊貫徹干凈、簡約的視覺感受,將同種材質的不同形態運用在一起會給人視覺聯系的作用,不會給人一種雜亂的感覺!
材質對畫面是輔助、豐富、增加細節感的作用,合理地運用材質可以提升設計作品的視覺層次、增強畫面質感!但是不管是哪種形式的材質,都要做到切合主題,要讓設計的每個元素做到有理有據,切記不要因為材質的過于凸顯而搶了主體。
文章來源:優設 作者:
大家平常都習慣去哪些免費圖庫網站找圖呢?雖然有一些老牌、圖片數量充足的圖庫,像是 Unsplash、Pixabay、Pexels,但后來經過人工智能和大數據學習的搜尋工具更深得我心,也能通過算法將質量較低、不適合使用的圖庫圖片先排除掉,大幅節省搜尋時間。如果在尋找圖片素材時想盡量避免使用和其他人重復的內容,試試看由攝影師親自拍攝的小型圖庫或許是個不錯的方法。
往期回顧:
本文要介紹的「DesignersPics」是一個持續更新、每個月都會加入新相片的圖庫,由攝影師 Jeshu John 親自拍攝修圖,收錄各種類型的相片,包括建筑、商業活動、概念、美食和飲料、大自然、人物、科技等等,照片數量不多,但有一定的獨特性。
DesignersPics 的相片都具有非常高的分辨率和畫質,可自由下載用于個人或商業用途,例如網站、投影片、包裝、標簽、HTML/PSD 模版、T-Shirts、廣告橫幅、商店或辦公室裝飾等等,無需標示出處來源。
網站鏈接:http://www.designerspics.com/
使用教學
開啟 DesignersPics 從右上角的「Categories」選擇要瀏覽的相片分類,或是直接從首頁以日期方式瀏覽,網站亦提供搜尋功能,不過圖庫本身相片量不多,瀏覽上不會耗費太多時間。
每張相片會有預覽圖、標題和免費下載的按鈕。
進入圖片頁面,還能看到圖片尺寸、大小等等信息,點選「Download」就能下載取得 .jpg 格式的圖片文件。雖然 DesignersPics 沒有硬性規定必須標示作者來源,但如果你喜歡可以協助推廣。
值得一試的三個理由:
文章來源:優設 作者:Pseric
這幾天在工作中處理了一個歷史遺留問題:彈窗適配,幾經折騰終于落定發包。于是我也趁著這個機會把彈窗體系梳理研究了一遍。
我們常見的彈窗有對話框,提示框,有時候在需求溝通中經常會聽到產品同學說,給這里加個彈窗,那里加個提示框吧。實際上,這個彈窗到底該不該加?這個彈窗承載的是提示說明文字內容,還是需要引導用戶下一步操作?接下來我們從彈窗的屬性來聊聊我們的彈窗到底在什么時候加比較合適?用什么形態展示體驗會更好?
常見的模態彈窗有這幾種:對話框、動作欄、浮層。
對話框:對話框主要是給用戶提供選項、相關的操作。另外,在一些對話框中,也可以展現圖片、頭像、步驟圖、其它輸入項等。
動作欄:常見的動作欄一般會出現屏幕下方,比如選擇某個內容時候,出現的選擇。
浮層:彈出窗口,浮動于頂層窗口,氣泡。
非模態彈窗:是指不強制用戶操作,他的作用相當于內容信息提示,他的出現不打擾用戶的當前操作,并且有時間限制,在一定時間里能自動消失。比如「xxx 功能已更新哦」,這種提示是不需要用戶點擊操作,讓用戶看到就可以了。
常見的非模態彈窗有這幾種:toast/hud、snackbar、notice(通知)
toast/hud:iOS 用戶更習慣于在中間感知反饋信息,通常在信息提示完 3 秒左右后會消失,安卓通常會出現在屏幕頂部或者下部,不會遮擋主體內容。需要注意的是 toast 只有文字,hud 是可以帶有圖標的。
snackbar;可以理解為加強版的 Toast
notice:系統消息、通知推送,也是不干擾用戶行為,有消失時間,是非模態的彈窗。
了解完彈窗體系后,我們就可以針對具體場景來看產品同學說加個彈窗到底合適不合適?我們可以從下面的幾個使用場景來看用什么樣的彈窗合適。
1. 重要打斷用戶操作
在一些重要操作,避免用戶操作失誤。不過目前很多人都覺得這類彈框有利有弊,有的地方出現得不合時宜,打斷了用戶的使用狀態。所以在設計這類彈框時要非常謹慎,得通過多研究確認是否有必要出現。
對話框相對來說比動作欄更重要,因為在視覺中心,更能強烈引起用戶的重視,對于十分重要的內容需要打斷用戶上一步任務的,采用對話框的彈窗,對于不是特別重要信息露出又需要終止用戶上一步動作的情況下,一般采用動作欄彈框。
2. 定制化廣告彈窗
如功能更新、升級、優惠券彈窗。這一類一般是強制用戶看到的,要展示出與眾不同的特色,在視覺上比較突出,會使用模態的彈窗浮層形式。
3. 給予一定提示
比如提示用戶狀態、信息、反饋,確保用戶知曉自己所處的狀態,并可以做出相應的措施。一般使用非模態的彈窗。
出現在用戶操作完之后的反饋,比如提醒用戶頁面正在加載中、保存成功、已刪除、已刷新等等。
可以不用彈窗的反饋例子:完成頁
比如已支付成功、下載完畢、簽到成功,這一類是告訴你上個動作結束了,下一步不需要進行引導了,這種反饋大多數都不采用彈窗形式展現了。
1. 層級關系
彈框是內容和導航的補充,用于通知、操作菜單、成功或加載狀態的 toast,他是寫在蒙層上面的一層內容。
2. 適配方式
下面我們需要了解的是這幾種彈窗在開發那的實現形式。我們可以理解為 2 種形式:
一種是開發直接用系統的接口,缺點是具有不可定制,形式美觀度不夠好。
另一種是開發用代碼會單獨寫出一個模態彈框系統,這套系統與整體設計語言具有一致性,可以復用在各個任務中,可以定制化設計。
需要注意的是,代碼寫出來的模態樣式要考慮在不同機型的適配情況,考慮不同機型的邊界。這個適配也有兩種實現形式,一種是固定寬高尺寸,展示在不同機型尺寸中,另一種是常用的等比例縮放。這個就需要開發與設計進行密切的溝通,能盡量合理地在不同機型展現更加合適,避免出現極限的情況。
我們是這樣操作的,為了避免尺寸比例混亂的情況,會設計一個彈窗的寬高尺寸范圍,開發同學代碼寫出的這套彈窗的適配在各個機型中,是在一定縮放比例下,適用各個不同情況下的視覺展示。這套彈窗可以調用在首頁引導、升級等各個頁面的彈窗設計中。
文章來源:優設 作者:詠舍
微信是一種生活方式。作為月活超 10 億的國民級產品,它有著獨特的設計之道。
同時,微信也是互聯網界的一個異類,張小龍曾在微信公開課上回應道:「我們只是守住了做一個好產品的底線,居然就與眾不同了」。
好產品自然是體驗和價值至上。下面,我就為大家解讀微信的用戶體驗設計。
先從最簡單的二次確認講起。
微信針對首頁消息和收藏列表的刪除操作,做了二次確認的微創新。像同類 IM 聊天工具,如 iOS 短信、Facebook Messenger、飛聊等等,二次確認都是采用底部系統彈窗。這樣做,從程序架構的角度來看兼容性和通用性更強。
而從體驗設計的角度來看,則剛好相反,因為從第一次刪除操作,到第二次確認系統彈窗。之間的目標距離太長,耗時也就變長了。根據菲茨定律(Fitts’ Law),獲取目標的時間取決于目標的距離和大小。這意味著提升交互的效率,不僅需要減少距離,同時還要增加目標大小。
△ 收藏列表
回過頭看來微信,就是這樣設計的。二次確認是在第一次的基礎上延展,距離幾乎為 0,同時,目標按鈕的寬度也增加了幾倍,大大地提升了交互效率。
其實,商業和用戶體驗往往是有沖突的。而微信廣告很好的平衡了這一點。
通過豐富有趣的互動體驗式創意,或畫圓、或畫方、或畫愛心,吸引大家主動參與互動。
1. 開放首條評論
另外,首條評論功能讓品牌像朋友一樣與大家對話,利用明星效應,從而帶動更多人參與評論,有效提升評論區活躍度和廣告點擊率。
△ 朋友圈劉雯廣告
以劉雯發布的朋友圈廣告為例,大表姐把款的 vivo X30 系列手機交到你手中,并在首條評論中邀請你幫她拍照。數十萬用戶積極回復劉雯,評論率高于歷史均值 40 倍+,「你這么漂亮怎么拍都好看」、「天天給你拍」,大表姐的魅力折服了眾多用戶,有效提升了品牌的親和力與好感度。
2. 打開儀式 · 最強震動級別
在交互方面,如果你是 iPhone 用戶,可以體驗到 Taptic Engine 線性震動馬達,通常力度由輕到重分別是 Light、Medium、Heavy。在打開廣告的那一刻,它給你的是最強震動級別,滿滿的儀式感!整個微信應該找不到第二個這樣級別的震動了。
再舉一個震動的例子,當你的好友拍攝了時刻視頻后,可以看到 TA 的頭像右上角多了一個藍色的小圈圈,雙擊它就能看到好友的時刻視頻了。
當然,你雙擊沒有拍攝時刻視頻的好友,TA 的頭像會左右晃動,并且會有 Failure 的震動反饋,動畫和震動節奏完美匹配,這個體驗就像你解鎖 iPhone 輸錯密碼時的震動是一樣的。
△ 沒有時刻視頻時的反饋
我們做產品設計時也一樣,對于用戶的操作,應當給予清晰明了的反饋,幫助用戶更好地理解信息。
微信的起步階段是基于手機來做 App,不基于 PC 來做,PC 端只是輔助,而現在,它的跨平臺能力也逐漸增強。
一周前,微信 PC 版「微信測試版 for Windows」發布了 2.9.0 的內測,同步了移動端的新功能,主要有兩點:
支持打開小程序,也可以玩「貪吃蛇」「跳一跳」等小游戲了。
△ Windows 微信客戶端
另外,此前的微信 PC 端只支持引用文字消息,也沒有達到手機上引用消息的視覺效果。此次更新中,還新增了很多支持的應用類型,包括但不限于圖片/視頻、表情包、公眾號鏈接、小程序、文件等。
如此看來,Mac 端的更新也不遠了,可以期待一下。
最近的微信更新了,除了引入深色模式之外。值得一提的是,語音消息的交互體驗得到了優化,上滑轉文字更方便了。
此前的方式是按住說話,滑到轉文字按鈕,說完松開手指后,才把語音解析成文字。
現在交互則少了一步操作,達到了實時邊說邊轉文字的功能。別小看這一步界面上的優化,它背后代表的是微信語音識別能力上的技術突破。
△ 語音實時轉文字
微信有很多隱性和顯性的錨點,隱性錨點就比如你打開的這篇文章,關閉后,再重新點進來,還是顯示上次閱讀的位置。
△ 訂閱號列表
顯性的錨點就比如上面這個:當你刷公眾號列表時候,如果有新文章更新,標題欄會出現一個錨點按鈕,點擊它讓你快速回到頂部,方便查看文章。
△ 朋友圈「跳到還沒看的位置」
基于此,在新版微信朋友圈中,增加了一個「跳到還沒看的位置」。很多信息流產品是往下刷內容,直到給你一個分界線提示:下面內容已經看過了。而微信這是一個逆向操作,我認為這個功能還是很有必要的,因為經常會有刷朋友圈刷到一半聊天退出去,當回來查看朋友圈時,需要重新拉到底部,費時費力。
《在你身邊,為你設計》一書中有提到語音聽筒播放的優化。大家都知道,手機帶有距離感應器,在感應到耳邊貼近時,屏幕會關閉以節省電力,并且避免由于耳朵與屏幕的觸碰導致的誤操作。
微信在聊天界面中,也啟用了距離感應,以實現手機貼近耳邊時,自動將語音從揚聲器切換到聽筒進行播放,這樣你可以用最自然的姿勢來聽語音,這是一個很好的體驗。
但要完美地實現這個體驗,就需要解決距離感應器的時延問題。播放語音時,如果你非常迅速地將手機移至耳邊,這時候距離感應器并不會同樣迅速地對這個動作產生反饋。大約在延遲了 300 毫秒后,感應器發出信號,微信將 iPhone 的屏幕關閉。而在這個時間內,你的耳廓極有可能已經觸碰到了 iPhone 的屏幕上。觸碰的位置大部分時候是左上角的返回按鈕區域。于是很容易出現手機移至耳邊,語音戛然而止。
△ 延時響應判斷流程圖
為了解決這個問題,微信設計了一個解決辦法:在響應返回操作時,先等待 500 毫秒,這時候如果偵聽到距離感應器有發出信號,則認為是貼耳的動作,此情況下不執行返回操作,如上圖所示。而 500 毫秒的延時大部分時候你是不會感知到的。這一解決辦法極大降低了貼耳時候的誤操作。
在微信的產品設計中,我們看到了交互的細微迭代和背后的技術突破,我們看到了商業創意與用戶體驗的平衡。給用戶帶來希望,讓創造者體現價值,這就是微信的設計之道。
文章來源:優設 作者:洋爺
B 端產品也叫 2B(to Business)產品,使用對象一般為企業客戶或組織。B 端產品幫助企業或組織通過協同辦公,解決某類管理問題,承擔著為企業或組織提升效率、降低成本、控制風險從而提高企業收入,減少企業內部損耗的重要職責。B 端產品的工作是合理實現企業需求,提高產品核心競爭力,并提升市場價值。在國內互聯網語境中,B 端產品的狹義解釋也基本可以和面向企業的 「網頁程序」 等同,用更接地氣的稱呼可以叫「管理平臺」、「管理端」 。
B 端產品大致分為兩類,一種是支撐前臺產品的,一種是管理各種資源的,前者就是我們熟悉的后臺產品,后者就是給各個企業服務,提高各個企業工作效率的 B 端產品。
1. 支撐前臺產品的:
C 端產品線的后臺產品,比如我們常用的淘寶、微信、餓了么、美團這種 C 端產品,他都需要有個后臺進行各種前端信息的管理。
平臺級工具產品,比如微信公眾號、頭條號等對用戶和文章的數據實時統計,可編輯文章,回復消息等
2. 管理各種資源的:
1. 從定義上:
2. 從用戶群體上:
3. 業務場景
4. 用戶的訴求:
5. 盈利模式:
了解了 B 端和 C 端的區別,B 端產品的實用性大于美觀性,能切實解決問題、配置資源的 B 端產品才是一個好的 B 端產品。在設計上對于操作和展示內容無關的元素,越少越好。很多人剛開始接觸 B 端,會熱衷于以 C 端視覺標準進行設計,對于真實的使用體驗來說顯得過于冗余、炫技。那么在 B 端設計中該如何思考去設計呢?下面我以設計前、中、后的三個方向去闡述我在做 B 端設計中的一些思考:
需求分析
使用場景、硬件情況
梳理交互流程:拿到需求后切勿打開花瓣站酷一陣擼,一定要對需求進行梳理(有的公司有專門的交互設計來做)做 B 端產品最重要的是對業務的理解,在梳理過程中一定要跟產品隨時溝通,產品的業務流程是怎樣的?有哪些同類型的產品?和他們相比我們的產品有什么特色和特點?充分理解了業務再去做設計就會有事半功倍的效果。
情緒版,定義風格:梳理完需求就可以定義設計風格了,在設計風格上盡量做到簡潔,B 端產品實用性大于美觀性,減少不必要的裝飾元素給用戶操作上帶來干擾。這里可以運用情緒版去定義設計風格,大概的流程就是,根據產品業務背景定義設計關鍵詞、根據關鍵詞去找參考圖片定義設計風格,產品的主題色也可以根據情緒版來去定義。
布局上根據導航可分為以下三種:
水平導航布局:類似于普通網頁的布局樣式導航,順應了從上至下的正常瀏覽 順序,方便瀏覽信息;頂部寬度限制了導航的數量和文本長度。適用于導航較少,頁面篇幅較長的產品。
垂直導航布局:可將導航欄固定在左側,提高導航可見性,方便頁面之間切換;頂部可放置常用工具,如搜索條、幫助按鈕、通知按鈕等。菜單欄還可以展開收起,適用于結構簡單的產品。
混合導航布局:結合了水平導航和垂直導航的特點,層級可以擴展到二、三級菜單,且能夠更加清晰地區分常用業務功能操作和輔助操作。適用于功能模塊較多、較復雜的工具類型后臺。
不同形態的布局,適配方式也不同。在做設計之前了解下適配的原理,避免在不同設備上出現視覺上的誤差。水平導航布局,在適配方案中做法是對兩邊留白區域進行最小值的定義,當留白區域到達限定值之后再對中間的主內容區域進行動態縮放。如圖:
垂直導航布局和混合型導航布局,在適配方案中常見的做法是將左邊的導航欄固定,對右邊的工作區域進行動態縮放。如圖:
最后說一下布局上的柵格,柵格會使整體頁面更加工整簡潔,內容區域采用 24 柵格(并非固定數值,參照案例 24 柵格布局),就不一一敘述柵格的定義與運用了,大家可以參考下網上有好多關于柵格的文章,如圖:
顏色
顏色上大致分為品牌色(可以結合業務屬性)、功能色(比如紅黃綠藍燈成功、出錯、失敗、提醒、鏈接等。功能色的選取需要遵循用戶對色彩的基本認知)、 中性色(如深灰中灰淺灰,文字部分應用居多,此外背景、邊框、分割線、等場景中也非常常見) 其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。
字體
在 B 端系統中優先使用系統默認的界面字體,常用中文字體有微軟雅黑、蘋方、思源黑體,英文字體有 Arial、Helvetica 系統不同展示的字體也不相同。
字體大小常見的有 12px、13px、14px、16px、20px、24px、30px 等。
規范
一份好的規范能夠讓設計和開發更加的工作,并且能夠指引一些設計的細節,通過對大小、顏色、邊距等、呼吸感等一些細節點的標注,可以讓新加入的設計師快速上手設計。一個項目會有多個設計師的參與,規范化的設計語言,避免因設計控件混亂而影響設計輸出。好的設計規范還能統一在產品中不同頁面的相同板塊的樣式問題,為開發組件庫奠定基礎。
如何建立一份規范呢?大概總結以下幾點:
定義好設計規范能大大提高設計師的工作效率,在同一個項目中也能更好的把控項目的視覺規范,幫助設計師復用及設計延展。
組件
B 端產品的決策方是老板和管理層,在設計 B 端產品中往往也是大多數情況下會有接到比較緊急的需求的情況,所以在設計過程中就需要我們設計師更加去注重效率,提高產能。做東西時要有組件化思維,去總結分析頁面模塊中的一些共性,跟開發共同完成產品的組件庫。
如果沒有前端工程師,我們的設計組件庫就是 PNG。所以,在開工前,一定要和那個技術不錯的前端工程師聊聊做設計組件庫的事情,其中最重要的是確定好:選擇什么樣的前端框架。
如果組件庫服務的是 B 端或者中后臺系統,那其實有很多可參考的開源組件框架:Ant Design、ElemetUI、Layui 等,注意不同的框架用到的前端技術不一樣,兼容的瀏覽器版本也不一樣,這要根據你們技術情況做選擇。如果覺得開源框架的風格和你們的產品不統一,那就需要二次設計和開發封裝。
下面是螞蟻金服組件庫,如圖根據組件的功能特點做出了分類:通用、布局、導航、數據錄入、數據展示、反饋、其他等。大家可以去官網查看,這里就不再一一做闡述了。
這個是餓了么的組件庫:
推薦幾個官方組件庫:
做之前大家一定要去多去查看這些大廠做的已成型的開源組件庫,然后再結合工作業務特色做出自己公司特有的定制化組件庫。有了組件庫之后,再接到緊急需求,我們就可以做到事半功倍的效果。先去分析頁面的構成,然后花費 80% 的時間去設計需求中 20% 的頁面,剩下的通用型頁面就可以直接用組件庫堆出來了。
設計走查
在完成設計后,要整體對設計頁面進行走查。從信息層級、文字、圖標、圖片等方面進行多次設計驗證與測試。
高質量設計交付
設計稿命名一定要清晰規范,現在好多切圖標注的插件,一鍵生成切圖標注?,F在就沒有必要單獨整理切圖標注了,但是設計稿在交付前切圖的命名一定要在設計稿里整理清楚,規范命名方便開發查閱。
推薦幾款比較常用的切圖標注的插件:
設計追蹤、校驗
設計稿給到開發在設計過程中,要隨時跟開發溝通。項目上線后要對線上效果進行實時 UI 校驗,保證開發同學對設計稿的高度還原。還有就是對設計上線后的驗證工作,用戶使用和反饋是優化產品的重要途徑,針對性地在一些主流的頁面模塊按鈕進行一些數據的埋點,統計下用戶的點擊狀況,實時對數據進行一些跟進,為下次頁面改版優化,提供有力的數據支撐,提升產品的用戶體驗。
不管 B 端還是 C 端,設計的價值在于通過視覺表現的方式去助力公司、助力產品實現用戶的需求、幫助用戶解決問題。B 端產品相對而言,場景、功能、業務流程、信息架構要比 C 端更復雜,面對的異常情況也比較多,所以 B 端在設計風格上盡量做到簡潔,B 端產品實用性大于美觀性,在每一個功能的設計都需要你去思考很多方面:用戶易用、信息層級、未來擴展,你都要做出取舍,而對于每個模塊都需要你思考、結合用戶場景。所以想要做好 B 端設計,一定要去了解業務,了解用戶需求。
文章來源:優設 作者:小六可視化設計
藍藍設計的小編 http://www.syprn.cn