客戶與公司的商務售前進行溝通,客戶的痛點和建議會傳達給產品經理,產品需求明確后,做出原型圖給到設計師。等設計師拿到需求的時候,基本已成定局,合不合理、如何優化的空間都會比較小了。造成這個現象的根本原因是設計師能看到的視角范圍有限,B端業務場景本身比較專業,難以直接帶入使用者的角色,就比較難取得大的突破了。
如何打破這一僵局呢?答案只有一個,那就是設計師要主動更前置的加入到產品方案設計中,深刻理解業務,為產品升級提供助力。這就涉及到用戶研究了,本文將和大家分享用研的相關理論基礎和方法。
雙鉆設計模型由英國設計協會提出,該設計模型的核心是:發現正確的問題和發現正確的解決方案。
雙鉆模型是一個結構化的設計方法,被很多設計師喜愛和使用。
探索/調研——透析問題(發散)
定義/合成——聚焦領域(集中)
發展/構思——潛在問題(發散)
傳達/實現——實施方案(集中)
實際工作中用到雙鉆模型會有一些變體,舉個例子:
下圖是對阿里內部款移動運維產品的分析,分析其從0-1的方向探索和從1-1.5的發展歷程:
下圖是曾經在一個設計講座中,滴滴CDX 一位設計師的分享,她把雙鉆模型利用到設計的研究和輸出階段,個人感覺此模型的使用場景也很貼切。
不僅僅是在完整的一個項目中,在單一的某個階段雙鉆模型也是理念很好的承載容器。在每一個“確定”前后,都有用研的身影。
用研旨在通過實驗和觀察結合的研究方法來提高產品的可用性,指導產品的設計、開發和改進。重點是通過觀察技術、任務分析和其他反饋方法來了解用戶的行為、需求和動機。
在獲取后臺數據之后,我們會分析為什么留存、為什么流失、為什么買這個不買那個,
設計師認為很棒的新功能,真的是用戶想要的嗎?用戶真的會用嗎?
觀察數據只是一種手段,而非結果。當一個頁面中出現值很低的功能時,我們不能直接判斷他就是不重要的,也可能是因為視覺上太弱或者交互操作不方便引起的。只有做用戶研究才可以真正了解用戶的行為背后的原因,真正的動機。
如上圖,是一個紅包發放頁面的設計前后對比,從數據中了解到使用優惠券的用戶不到30%,埋點發現大多都點擊了返回,用戶沒有按照期望的路徑走,調研發現操作路徑不清晰,沒有形成閉環。由此可見,發現問題時,先埋點細化問題——再分析問題——結合用戶研究,提出優化方案,才能真正發現問題解決問題。
產品的發展周期分為產品概念期、設計開發期、宣傳推廣期、平穩發展期和產品衰退期五個階段,在每個階段都有相對應的用戶研究測試可以做。
對應上文的產品發展周期可以做的用戶測試,我們要找到相對應的人群:
最后就是將用戶研究進行落地了,如何讓用戶研究達到預期的目的和效果呢?可以在開始前的準備階段問問自己如下的問題:
接下來我們看看到實際落地環節,有哪些用戶研究的類型可以做以及怎么去做。
桌面研究又叫“文案研究”,指不進行一手資料的實地研究和收集,而是通過電腦,雜志,書籍,文檔,互聯網搜索等現有二手資料進行分析和研究的方法。
完整的桌面研究分為以下五個步驟:
在需求細分階段,可以用到SWOT 分析、波特五力模型、PEST分析、波士頓矩陣等模型
收集數據通??梢詮膬炔繑祿屯獠繑祿碓磸V泛獲取然后結合分析。
內部數據來源:市場營銷數據、產品后臺數據、其他相關報告等。
外部數據來源:政府部門、國際組織、行業協會、專門調研機構、聯合服務公司、其他大眾傳播媒介、商會、銀行等金融機構、官方和民間信息機構等。
定性研究是指通過收集、分析和解釋那些不能被數量化的信息,來挖掘問題、理解事件現象、分析人類行為與觀點的方法,主要作用是探索“可能性”。
定性研究專注于更小但更集中的樣本,通過非結構詢問和觀察來獲得不能量化的信息。
流程如下:
常用的定性研究方法:
我們需要明白訪談適合哪一種項目研究,比如要針對新功能進行一次面訪。
接下來我們需要進行用戶的招募,因為面訪比較耗費時間和精力,所以最好準備一些禮品,否則很難招募到用戶。招募用戶的渠道可以是產品中投放問卷、社群招募等方式來邀約難度用戶。
用戶訪談環境,準備一個安靜的房間,準備好水、紙、筆、錄像、錄音筆等工具。
整理訪談內容,每訪談完一位用戶進行一次小結。
接下來模擬一次用戶訪談的整個流程:
開場:首先介紹一下自己的情況,并且讓用戶了解這次訪談的目的,建立一個輕松的談話氛圍。
探索:針對研究目的進行探索,比如目的是做用戶體驗地圖,了解用戶在使用過程中遇到的問題。
注意:如果直接問平時怎么使用我們的產品,用戶會比較懵。這個時候最好給他一個確定的環境,比如你能不能演示一下你平時是怎么管理貨源的,這個時候他就明白原來需要我進行這樣一個任務。
觀察:在用戶回答提問和操作演示中,查看用戶碰到了什么難題。比如有超過一半的用戶多次點擊一個按鈕,說明這個按鈕設計的大小不太合理。
思考:深層次挖掘。比如用戶反饋字太小,但實際操作中并沒有瞇著眼或更靠近屏幕,可能原因一是他們本身就把手機屏幕文字調為最大,二是信息排布過于密集,效率低,并非因為字小。

定量研究是指確定事物某方面量的科學研究,將問題與現象用數量來表示,進而分析和解釋,從而獲得意義的研究方法。定量研究的數據分析,主要作用是回答“多少”的問題。
定量研究的意義:
用一個數值來表示你產品的可用性。數值有時比質量檢測的結果和視頻更有說服力(特別是當你試圖說服像高管或客戶這樣的人)時。
比較不同的設計(比如,你的產品的新舊版本,或者是你的產品與競爭對手的產品相比),并且確定你觀察到的差異是否具有統計學意義,而不是隨機的。
改進用戶體驗權衡決策。比如,如果預期的設計改進成本很高,那么它值得做嗎?定量研究方法可以幫助你驗證重新設計是否值得。
常用的定量研究方法包括:可用性研究、A/B Test、問卷調查和滿意度調查。
測試的重點是收集數據指標,比如任務時間或者成功率,一旦你收集了相對較大的樣本量(大約35個或者更多),你就可以使用它們來跟蹤產品的可用性,或者將其與競爭對手產品的可用性進行比較。
在A/B測試中,團隊需要創建同一界面的兩個不同的最新版本,然后將每個版本展示給不同的用戶,用來確定哪個版本的性能更好。基于分析的實驗,對于決定同一個設計的不同變體非常有用,并且可以結束團隊關于哪個版本最好的爭論。
問卷調查是一種靈活的用戶研究工具,調研時可以同時獲得定量和定性的數據,比如評分、多項選擇題中的答案的比例,再加上開放式問題的答案。你甚至可以把對調查的定性回答轉化為數字數據。
問卷的一個優點是:可以經常將你的調研結果與行業或競爭者的分數進行比較,看看你做得怎么樣。即使你創建了自己的自定義問卷,也可以隨時間的推移對自己產品平均分數進行追蹤,來監控產品的改進情況。
可以根據你的研究問題進行定制,這些方法通常會首先讓參與者接觸到產品(通過向他們展示靜態圖片或者要求他們使用現場產品或原型)。然后,要求用戶通過從描述性的詞語列表中選擇一個來描述當前設計。
如果你獲取自身目標用戶的樣本量足夠大,那么整體趨勢就會顯示出來。例如,你可能會有84%的受訪者將此設計描述為"最新"。
比如這次改版用戶對新版本的滿意度怎么樣。只有確定了目標,你的問卷才是有價值的。
因子分析法要求調查數量是調查問卷問題數量的5-10倍,因此,如果調查問卷中共有20個問題,那么調查樣本數量可以大概確定為100~200個,有效回收樣本30份即可。
問題順序的基本原則
往前放:
熟悉的問題
簡單的問題
引起興趣的問題
往后放:
開放式的問題
個人背景資料
簡潔明確:
?你用了多久的Google map?(?)
?你第一次使用Google map是什么時候?(?)
這兩個問題看似類似,但是當用戶在思考的時候,第一個問題顯然會思考更多的時間,用戶很可能在想,是想知道我第一次用的時間,還是我用了多久的時間。
中立、無誘導性:
?你喜歡這個功能的設計嗎?(?)
?請您對這個功能的滿意程度進行一個打分,最低1分最高5分?(?)
避免使用帶有引導性的問題,問用戶是否喜歡、是否滿意,這樣通常用戶都會偏向于回答喜歡。
設置選項時,要做到:
定量分析的結果多以數據、模式、圖形等來表達。
?眼動追蹤,英文Eye Tracking,是指通過測量眼睛的注視點的位置或者眼球相對頭部的運動而實現對眼球運動的追蹤。
眼動儀是一種能夠跟蹤測量眼球位置及眼球運動信息的一種設備,在視覺系統、心理學、認知語言學的研究中有廣泛的應用。
注視分析——分析注視軌跡、先后順序與流暢度
注視熱點圖——分析最關注區域和忽視區域
興趣區分析——分析平均注視時間與各興趣區注視順序
通常需要輔助測試(如定性訪談)來收集更多實驗數據
?腦電研究,大腦活動時,腦內億萬神經元活動引起頭皮表面的電位變化,含有大量心里信息,測量腦電信號可繪制腦電圖,以不同波形反映出來。
利用生理探測技術,研究用戶對產品的情緒反應
相比傳統調研,更加能夠排除從眾行為、事后回憶偏差、社會贊許效應等的干擾

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多網站在短時間內就取得了巨大的進步 —— 那些過去十年里最知名的品牌網站,與第一次迭代相比發生了很大的變化,這令人感到無比驚訝。
網站最初用于商業目的時,人們并沒有過多地關注用戶體驗。過去的目的是將盡可能多的內容塞進一頁里?,F在,設計師們通過大量研究、數據挖掘和優化等方式來吸引用戶的注意力,同時在正確的時間提供合適的內容、功能和選項。
越來越多的公司正在采用先進的心理學研究,以推動用戶參與更多的互動和付費項目,這一現象使得曾經被認為是一門藝術的東西轉變成了一門科學。
1997 年的 Apple 網站
除了許多必要的元素之外,好的設計總是會考慮到用戶的情感和心理需求。讓我們來看看什么是「說服式設計」,并探索如何將影響人類行為的心理過程應用到設計中。
“說服” 這個詞往往與操縱、欺騙相關聯,尤其是對一個善于使用「互聯網陷阱」的設計師來說。但是,我們要明確一點,說服式設計中的 “說服” 并不是這個意思。說服式設計可以使網站易于使用,從而改善用戶體驗。因為,說服式設計是源于對心理誘因、用戶行為的理解和運用。
(互聯網陷阱:興于 2010 年,由當時英國用戶體驗咨詢師 Harry·Brignull 首次提出,指的是網站或應用程序采用誘導性或脅迫性設計,迫使用戶采取或不采取某種行動)
例如,亞馬遜就很好的運用了說服式設計,它通過推薦其他產品和配件,以及展示 “查看過此商品的顧客也購買了某物品” 的選項,引導用戶繼續購買更多商品。為了快速完成銷售,他們還為購物者提供了一鍵購買商品的功能。
亞馬遜運用說服式設計的案例
我們都一直在花費大量時間上網,設計師可以利用從線下行為中學到的知識來創造更好的用戶體驗。無論你是想優化現有網站還是構建應用程序,說服式設計都將引導和支持用戶的在線體驗。
設計師要如何利用心理學的研究成果來增強其設計的影響力呢?
理解心理學原理可以讓你對工作的基本原理有更透徹的理解。它可以:
讓我們來討論一些心理學理論。
作為人類,我們天生就需要控制。這可以追溯到我們最本源的需求。在劃分需求層次時,心理學家亞伯拉罕·馬斯洛(Abraham Maslow)在提出需求層次時,將我們最基本的需求命名為:健康、食物和睡眠。所有這些都需要我們對環境進行一定程度的控制。
馬斯洛需求層次
作為 UI 設計師,我們需要確保用戶在我們為他們創建的環境中擁有積極的體驗。這就意味著需要通過提供合適的工具來增強用戶的能力,以幫助用戶在產品的使用過程中獲得控制感。
“今天,你可以調整屏幕的亮度,禁用通知,并可以決定手機是否應該同時連接蜂窩數據和 Wi-Fi …… 即使這些調整只會將手機的電池壽命延長幾分鐘,但這種可以掌控一切的成就感也會使用戶感到溫暖?!?-- 用戶體驗顧問 Nadine Kintscher
我們需要創建能夠平衡功能和視覺吸引力的界面,并將掌控權提交給用戶,以便他們有更滿意的體驗。
澳大利亞房地產搜索網站 Realestate 成功的做到了這一點,它讓用戶能夠根據自己的偏好篩選所有房產,并讓他們可以選擇按不同的標準進行排序。
澳大利亞房地產搜索網站 https://www.realestate.com.au
我們該如何設計一種數字體驗,才能使用戶在適當的時候進行所需的行為?這需要了解一個簡理論 -- 「福格行為模型」:一個人行為(Behavior)的發生需要滿足至少三個條件,動機(Motivation),能力(ability)和誘因(trigger),用公式表示即 B = MAT,這三者必須同時具備,缺少任一條件都不會導致行為的發生。對于任何試圖實踐勸導心理學的人來說都是理想的選擇。理論表明,一個行為得以發生,行為者首先需要有進行此行為的動機和操作此行為的能力,接著,如果他們有充足的動機和能力來實施既定行為,他們就會在被誘導時進行此行為,預期的行為就會發生。
(福格行為模型:由斯坦福大學「說服技術研究實驗室」Persuasive Technology Lab 創始人 BJ Fogg 研究而來)
動機 -- 人們做出這一行為的原因是什么,做出這一行為的原始動因是什么;
能力 -- 人們做出此行為需要滿足什么能力,人們是否有條件來完成這個行動或者做這件事;
觸發 -- 是什么誘發用戶會做出這個行為,什么因素會導致用戶會完成這個。
福格行為模型(https://behaviormodel.org/)
尼爾·埃亞爾(Nir Eyal)和瑞安·胡佛(Ryan Hoover)合著的書籍《上癮》中曾提到過 福格行為模型,揭示了很多讓用戶形成習慣,甚至“上癮”的互聯網產品服務背后的基本設計原理,告訴你怎樣打造一款讓用戶欲罷不能的產品。作者根據自己多年的研究、咨詢及實際經驗,提出了新穎而實用的 「上癮模型」(Hook Model),即通過四個方面來養成用戶的使用習慣。通過連續的“上癮循環”,讓用戶成為“回頭客”,進而實現循環消費的終極目標,而不是依賴高昂的廣告投入或泛濫粗暴的信息傳播。
上癮模型
一個很好的例子是 TurboTax,在《為心靈設計:勸導式設計的七個心理學原則》一書中討論過。
即使交稅不會使我們感到開心,我們仍有很強的動力來報稅。然而,與其他所有國家一樣,美國的稅收制度過于復雜,難以理解。TurboTax 在書中提到,使用戶能夠通過詢問基本問題更輕松地完成納稅,可以有效的提高用戶的納稅能力。在 TurboTax 的設計中,他舍棄了冗長的文檔,相反,創建了一個工作流,使用戶可以進行簡單的逐步操作。最終便捷的操作方式會成為誘因,使用戶愿意嘗試在線提交稅款。
TurboTax 設計的報稅系統
用戶有充足的動機和能力,同時又具備誘因,三個要素完美結合的情況可能會讓人感到過于理想或不自然。事實上,其中某一因素占比多也沒關系。發微博就是一個很好的例子,沒有什么重要事情的話,發微博的動機可能很低,大多都是瀏覽;但觸發因素隨時都可能出現,提醒你可以開始行動了,可能是一個轉發抽獎的活動、可能是朋友正好生日;同時,發微博的操作非常便捷,用戶具備能力隨時都可以發布。
作為設計師,我們可以使用該理論來檢查是否為用戶建立了足夠的動機和能力,并提供誘因來引發他們的行為。
以上兩種理論(控制感,以及 動機、能力和誘因)都需要進一步的研究,它們在設計界面時非常有用。
或者,有一些更簡單的心理學理論,不需要較復雜的研究,即可用到你的設計中,比如 稀缺 和 害怕錯過(FOMO -- Fear of Missing Out)的概念。
亞馬遜在商品上增加 “只剩下 1 件存貨” 強調庫存不足,使用 FOMO 加強緊迫感
幾十年來,心理學家一直對人們保持注意力的能力不斷下降而感到困擾。
眼動追蹤已經存在一段時間了,它主要用于測量用戶注視某一點的位置和持續時間。研究表明,互聯網的平均注意力持續時間不到幾秒鐘,用戶會立即做出有關網站的決定,如果不適合,就會離開。
數據驅動的設計(https://www.eyequant.com)
EyeQuant 將這一想法向前推進了一步,利用眼球追蹤數據構建了一種預測算法。你無需自己進行眼動測試,而是將設計上傳到他們的網站,他們會告訴你用戶在使用你的網站時關注點在哪些地方。
他們找了德國的參與者,并利用這些參與者建立了一個龐大的數據庫,該數據庫包含了大量吸引用戶注意力的內容和不吸引用戶注意的內容。研究發現,高對比度色彩比較容易吸引用戶,表情和粗體的文字也是如此。
眼動追蹤軟件可能很昂貴。取而代之的是,諸如 Sumo Heat Maps 的在線分析軟件,可用于顯示訪問者單擊的內容和位置,以及吸引最多注意力的內容。然而,請記住,雖然我們可能會抓住大腦的注意力,但我們也有可能會把用戶從更重要的事情上拉走。
使用眼動追蹤或熱力圖可以使設計人員立即獲得有關其設計的客觀反饋。作為設計師,它可以用作用戶體驗想法的驗證,并為你的設計決策提供數據,允許你通過 A / B 測試來優化設計。
眼動追蹤可獲得用戶行為的客觀反饋
你是否曾經注意到人類天生會有模仿他人的欲望?一個人的欲望也會促成他人的欲望。這種理論是由勒內·吉拉德(Rene Girard)提出的,理論認為,如果某人表現出對某件物品的渴望,你也會渴望得到這件物品。廣告商就是利用這一方式促成人們對某物的渴望,顯然,廣告成功的激發了人們更多的欲望。
你我都是模仿生物。Darren Bridger 的《神經設計》一書就探索了這一理論,研究發現我們有一個鏡像神經元系統。換句話說,僅看到某人執行某項操作(例如撿起一件物品)就會使你的大腦反映出該活動。
模仿一詞的英文解釋
模仿欲理論意味著如果我們看到別人擁有某樣東西,我們便也想擁有 —— 這一點可以用 「社會認同」(或從眾心理)來解釋。
一種社會認同是來自 “用戶的認同”,就像是推薦。推薦之所以有效,是因為它們來自擁有共同愿望和價值觀的人。例如,專門為企業家服務的媒體 Foundr 不僅使用用戶的聲音,而且還顯示人臉,從而觸發了鏡像神經元系統。
Foundr 專門為企業家提供媒體服務
另一種社會認同是來自 “專家的認同”,即你的產品獲得了專家的認可,例如你的產品被 Twitter 提及、新聞引用、甚至有大 V 專門為你的產品撰文。Google 在其最新的 Pixel 手機廣告系列中使用了這種技巧,用 Google 自身的品牌影響力作為最強力的背書推薦這款手機。
僅僅強調這款手機是 Google 出品,無須多言
對于設計師來說,現在是一個令人激動的好時代 -- 有豐富的資源和研究可以支撐我們的工作。
設計趨勢正在向體感,語音、虛擬現實(VR)、增強現實(AR)、混合現實(MR)和物聯網(IoT)轉變;隨著這些交互技術的不斷發展,人們需要以更直觀的方式來使用界面。
我們將迎來許多新的設計機會,而心理學將在其中發揮著重要的作用。
下一個我們日常生活中與設備交互方式的重大轉變,將從觸屏變為使用腦電波交互。該技術已經可用,使人們能夠通過思想直接控制其設備。
隨著我們逐漸接近人們的真實想法,心理學在設計中的應用以及設計師的道德責任將發揮越來越重要的作用。
除了使用分析法、用戶研究、用戶體驗地圖和其他方法來幫助做出設計決策并迭代產品外,設計師還應考慮使用上述四種有說服力的設計方法來完善其 “技巧工具包”。
有說服力的設計并不邪惡。它是一種工具,并且像任何工具一樣,它可能被濫用。然而,通過正確的研究和深思熟慮的應用,它可以成為任何設計師工具箱中的寶貴補充。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
簡介: 按鈕組是把相關的動作組織成一組按鈕的設計模式。按鈕組的內部內容彼此水平或垂直對齊,并采用相似的視覺設計。如果超過三個或四個動作,往往會采取多個分組。
例子: 語雀編輯器的頂部工具欄
按鈕組可以讓界面不言自明。在復雜的布局中,被精心安排過的按鈕組會很容易被用戶感知和使用。一方面,它們在界面上往往非常明顯,用戶能夠一眼看到有這些功能可以進行相關操作。
大家所熟知的格式塔原則(Gestalt principles)也在這里起作用。彼此相鄰的按鈕往往暗示著這些按鈕的功能相近,因此會讓用戶感覺到這一組按鈕可以完成類似的功能。相對的,不同的按鈕分組往往暗示著不同的功能類型,因此彼此間應該保持間距,或用不同的形狀,或用分割線進行區分。
如果你需要在界面上展示許多操作按鈕,且需要確保它們隨時在界面上可見。但同時,你又需要用圖形化的方式組織它們,以使它們看起來不會特別散亂。
這些動作中有許多是彼此相似的 —— 它們有相似或互補的效果,比如,它們的功能語義相類似 —— 由此它們可以三五成組地放在一起。
按鈕組可以用在對產品全局有效的操作上(例如「打開」和「選項」操作),或特定的一些通用操作(「保存」、「編輯」和「刪除」),或特定的某些操作(例如布局的「對齊」、「分布」)。不同范圍的操作不應當被到一個組中。
使用條件:
· 存在大量操作按鈕;
· 希望用圖形化的方式組織這些按鈕;
· 操作按鈕間存在功能相關性和差異性;
這個模式的總結簡單到像是一句廢話:把相關的操作按鈕分成一組。
但如果詳細展開就會有更多的介紹。比如:
· 如果需要包含文本說明,盡量使用兩個字或三個字的動詞短語,不要使用專業術語。
· 不要把不同功能范圍的按鈕放在一個組,應當將它們分成不同的分組。
· 同一組的按鈕應該有同樣的視覺設計:邊框、顏色、高度或寬度、圖標風格、動態效果等。
· 在空間排布上,可以將它們并排起來作為橫排放置,如果空間不太適用的話,也可以考慮一列縱列放置(例如Photoshop的左側工具欄)。
· 如果某一個動作是核心動作,可以將其區別對待。例如網頁表單中的“提交”按鈕。核心動作是希望大部分用戶都需要(或期待)執行的動作。讓這個按鈕擁有更加強烈的圖形或視覺風格來讓它在顯得更為突出。
· 如果按鈕足夠多,而且它們都有小圖標,你也可以把它們放在工具條或者像工具條那樣的狹長條上,放置在頁面的頂部。
通過使用按鈕組可以避免界面上按鈕或鏈接過于擁擠混亂,也可以避免一長串冗長的動作列表看起來毫無關聯或區別。
通過這一模式,你可以創建一個較為清晰的元素層級結構:用戶可以一眼看出哪些動作是彼此相關的,哪些是重要的。
用戶需求:編輯設計文件中的對象
Sketch 也是個很典型的應用了按鈕組的設計工具。Sketch頂部的按鈕不少于15個, 有很多要理解和追查。 但是得益于精心的視覺和語義組織,界面按鈕始終保持一定的可理解性。
用戶需求:按自己需求對文件進行顯示修改和操作
這個案例顯示了來自 macOS 的 Finder 窗口的頂部按鈕組。 秉承其設計傳統,按鈕風格明顯。 導航組是放置在左側中的按鈕組。 布局相關的按鈕組放在了中間,文件操作相關的按鈕組放在了右側。這樣的設計使得界面變得易于理解和使用。
用戶需求:項目執行相關操作
這個案例顯示了 Webstorm 的頂部功能操作區。WebStorm 采用了按鈕組的模式,將項目執行的相關操作和Git相關的操作聚合在一起,中間使用了分割線進行了區分。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在日常工作中,身為設計師的我們時常有這樣的情形:身兼多個業務,但大部分的業務都是小業務,業務方給的需求也是七零八碎的小需求居多。面對該情況設計師有時會覺得沒有一點挑戰,限制自己對美好設計,給用戶創造美好生活的想法,總想要去搞個大新聞。
不妨回頭看看小業務,自己真的對它了解了么?這里提供一種視角,小業務也可以做大視野的事。通過一個小業務的案例改版,講述如何從小項目中出發。
曾經負責過一個基礎模塊支持:設計詳情。它是設計師用酷家樂設計工具設計方案產出的載體。該模塊在之前有過改版迭代,迭代對業務目標(留存活躍)的提升并不理想。那從哪里入手呢?
理清業務目標
挖掘用戶需求場景
梳理產品功能
拆解設計目標
設計策略實施
驗證迭代
相對于大業務(例如網站改版),小業務因為簡單,其業務目標界定常容易被忽略。在日常設計中常會遇見設計師在不知道業務目標是什么、目標模糊、目標不正確的情況,直接從梳理小業務具備哪些功能直接入手,分析下現狀問題后開始制定設計策略,這往往會導致設計出現解決不了關鍵問題、出現偏差情況。產品功能本身只是滿足用戶需求和實現業務目標的服務載體,只是策略的表象。理清小業務所承擔的業務目標是前提,那么如何理清呢?
理清業務目標
小業務目標來自大業務目標,對大業務的業務目標進行一級級向下拆解后,即可獲得小業務對應的目標。目標拆解需要遵循MECE原則,拆解方法包含:二分法、過程法、要素法、公式法、矩陣法。(tips:目標的拆解有一定難度,)
Dapp設計詳情為例,在酷家樂大增長業務背景下,用戶活躍和用戶留存為核心的目標,設計詳情處于設計路徑的一個節點,拆解得到設計詳情的5個主要業務目標:
設計詳情-用戶周活躍
設計詳情-新用戶留存
設計詳情-老用戶留存
設計詳情-內容投稿數
設計詳情-內容分享數
業務目標可分為2個類別:
第一類別:符合用戶意愿,如活躍、留存,在滿足用戶需求的情況下可以自然達成;
第二類別:不符合用戶意愿,如內容投稿、內容分享,用戶不太會主動去完成,需要去創造動機,激勵用戶進行。
有小業務的業務目標后,第二步就需要給用戶提供價值滿足用戶需求,以此來實現業務目標的達成。梳理清楚小業務服務了哪些用戶需求是提供價值的前提,那如何獲取用戶需求場景呢?
1. 用戶訪談——獲取相關用戶需求場景
用戶需求場景可以幫我們清晰了解到用戶使用產品的原因。用戶需求場景可以一句話進行界定,包含四個關鍵要素,其中需求本身最為核心,需要挖掘出當前訴求和其背后的潛在需求。
“在【某環境下】,【某用戶】做了【某事】來滿足【某需求】”
用戶訪談為了挖掘到更為深入用戶需求場景的要素信息。以設計師入行年限分組(1-3年、3-5年、5年以上),每次分組訪談2-3個設計師。梳理出設計詳情相關的8個需求場景
訪談信息整合如下
2. 規整用戶需求場景
在業務訪談中獲取的場景往往都是碎片化的,碎片化場景對設計指導容易出現偏差,需要把場景結構化,為后續的方案設計提供依據。我把獲得的場景按照設計師設計流程進行規整,按設計前、設計中、設計后三個階段進行劃分。
以上梳理了設計詳情相關的用戶需求場景,再來看原設計詳情只基礎滿足了資料管理和方案展示的2個單一場景,在設計師的整個設計流程中只占了一部分。從設計層面來看,該2個場景局限在方案設計大場景中,設計更多做的是對其方案設計操作的體驗優化,在原有較好操作體驗的現狀下,其對給用戶創造價值上沒有很大增量。再從以上業務目標來看,2個單一場景很難去促使用戶對內容進行分享和投稿。
在理清小業務的業務目標和需求場景后,下一步就是按照場景去梳理產品能力。
1. 小業務功能現狀分析
老版app設計詳情的功能進行初步的現狀分析,設計詳情包含渲染、圖文編輯、圖片管理、投稿、分享5個主要功能。從需求場景來看,多個場景無法實現,如營銷、談單;從業務目標來看,通過當前功能有較大的優化空間,如當前投稿很難讓用戶知道投稿有什么價值。
2. 產品能力梳理
分析現狀發現功能不足以支撐用戶需求場景,有獲取功能2個方向:
挖掘現有能力:可以擴大梳理范圍,從小業務所在的上一級業務到整個平臺,一級級往上梳理場景對應的現有功能。
打造新能力:圍繞場景,打造出新的功能
挖掘平臺上現有能力,可對業務的能力價值最大化利用,與其他業務形成互通,實現1+1大于2的業務價值。亦可圍繞場景打造新能力,可反推產品去發倔新功能。
以下是設計詳情涉及所有場景的產品功能矩陣,從平臺獲取到了很多全新的能力,以及對原有的能力進行了能力拓展。
在梳理出產品能力后,需要通過設計策略把產品能力有效組織起來,讓用戶快速感知快速上手使用。設計策略推導自設計目標,那如何得到設計目標?
基于用戶需求場景將行為事件拆分,提煉行為事件再推導出設計目標,再基于設計目標給出設計策略。
Dapp設計詳情受制于移動端能力,只涉及設計詳情中5個相關場景,其設計目標和設計策略的拆解結果如下
拆解出設計目標后,基于目標分析產品現狀得到存在的設計問題。為什么要基于目標分析現狀?首先需要明確什么是問題,問題是導致目標和現狀不一致的原因。只有明確了目標才可以理性分析與現狀存在多少問題。在日常中時??吹皆O計師會直接得到問題,很多情況是默認假設了一個預設目標,但這目標得到不嚴謹、不全面,容易導致得到的問題本身也出現偏差。設計策略基于設計目標或問題得出,其最終都來自設計目標。
對老版Dapp設計詳情現狀進行了分析,得到了問題
在上一步得到設計策略后,圍繞著設計策略是設計方案。本段將不全部展開說明,只選3個關鍵點講述設計方案的思考
1. 設計詳情框架的設計
Dapp設計詳情涉及5個場景的承載及產品功能繁多,設計三步思考:
第一步:簡化功能認知,對功能結構化,以場景的維度重組織功能,并以場景打造功能集合的認知,建立場景能力區;
第二步:梳理場景共同涉及的內容,作為聯系的載體承載場景的放置,設計詳情中展示態的方案涉及到了5個場景中的4個場景
第三步:提取場景中即時性和高優先級功能,打造快捷功能區
框架如下
建立框架后,填充具體的能力和內容。如場景入口放置于底部,并根據場景優先級做了主次的區分。
設計詳情框架建立后,打造細分場景中的設計
2. 營銷獲客場景設計
營銷場景的設計,將營銷組成拆分為可營銷內容、營銷的渠道、渠道內容展現三大類,就可以清晰去梳理出現有的功能,以及可從內容、渠道各自去拓展挖掘。內容和渠道清晰后,再傳達各渠道提供的價值激勵用戶去觸發行為。
3. 談單場景設計
談單場景關鍵在方案詳情上,談單面對不同情況,存在多種內容形式去展示方案。在上面內容梳理中最主要是3個內容:圖文方案、全屋漫游、渲染圖冊。在方案詳情中,頭部承載了全屋漫游、圖冊,如圖文方案過于繁瑣可直接點擊全屋漫游圖進行講解,亦可點擊封面進入圖冊直接圖片說明。圖文詳情加上了房間切換的導航,可快速切換到需要講解的地方。
上線后數據平穩后觀測,設計詳情的周活提升了89%,每個場景下的功能數據都得到顯著的提升(tips:有部分數據因技術原因沒有采集到)。除了改版了Dapp側的設計詳情,后續對PCweb側的設計詳情進行迭代,同樣起到不錯的結果。數據的結果驗證了方法的可行,并起到了積極的效果。
以上是我應用這套設計方法去做了塊小業務優化,反向推動進入產品迭代,上線后取得了不錯的成績。在本次賦能后,對小業務中多了一些感悟
小業務是大業務的縮影,可以作為去賦能大業務前沿驗證的實驗田,大概率可以快速驗證自己的想法,即使方向錯了因為小業務改動影響面也小
因知識廣度和深度的限制,不是所有設計師都可以一開始就可以把控大業務,小業務可作為打磨設計深度專業度,一些小業務的復雜度并不低于大業務
該設計方法同樣適用于大業務,但方法是死的,不是所有情況都套用,得需要把握重點靈活應用
不要總想著搞個大新聞,在能力未被業務方認可時,小業務的賦能可以成為一個很好的發聲口
不要輕視小業務,有可能是你根本還不了解
近些年,得益于經濟和社會的高速發展,越來越多的中老年人開始嘗試享受移動互聯網帶來的便捷生活。50歲及以上網民在總網民中的占比已經由2015年的9.2%提升至2020年的26.3%,增長接近兩倍。但中老年在融入移動互聯網時仍面臨諸多困難,是需要重點關注的弱勢群體。
隨著各類問題在社會輿論中持續發酵,國家政策也開始關注中老年的互聯網使用體驗,推動各類APP進行適老化改造。2020年12月,工信部發布《互聯網應用適老化及無障礙改造專項行動方案》。2021年3月11日,全國人大發布《十四五規劃綱要》,明確提及“加快信息無障礙建設,幫助老年人、殘疾人共享數字生活”,更是將信息無障礙建設上升到了國家頂層規劃的高度。
為了更好地服務中老年人,百度在2021年上線了百度大字版和百度關懷版APP。對于中老年人來講,視力老化是難以避免的問題。隨著年齡增長,中老年人晶狀體硬化、睫狀肌衰弱,物體不能很好地成像在視網膜上,帶來視覺上分辨物體的敏感度、色彩感、明暗感、空間感的下降。
但是對于中老年人而言,手機APP的字號、行距真的是越大越好嗎?我們首先試圖從現有標準中尋找答案。然而通過梳理,發現行業內已有標準主要是針對各類殘障人士的,并且是原則性的建議,推薦的字號、行距的理想值過于寬泛,對手機APP適老化設計升級的指導意義比較有限。比如W3C發布的《Web內容無障礙指南(WCAG2.1)》,關于行距的要求是“至少為字體大小的1.5倍”。所以我們通過科學、嚴謹的研究,制定了一套設計標準,來指導資訊類/內容類APP全場景文字排版適老化設計升級,為中老年用戶帶去字里行間的關愛和更好的閱讀體驗。
下面就將從研究方法和成果兩個方面做具體介紹。希望能幫助大家掌握相應的研究思路,在后續制定設計標準時可以快速上手,同時也將此次適老化設計標準研究的成果與大家分享,為資訊類/內容類APP適老化設計升級提供參照。
///
研究流程與方法:如何通過用戶研究制定一套設計標準?
| 明確標準的應用方向
為了讓一套標準對設計工作具備實際的指引價值,我們在研究規劃環節充分考慮了設計經驗和迭代需求。用戶研究和設計師一起對資訊類/內容類APP所有涉及文字排版的頁面、模塊進行了通盤梳理,確定了12類應用方向(即用戶的使用場景)。對于這么多使用場景分別做研究費時費力,我們選擇通過洞察背后的用戶閱讀模式,把12類應用方向收斂為4大類閱讀場景:3類主場景(包括長文閱讀、搜索、概覽閱讀)和1類輔助信息場景。針對主場景,研究中老年用戶理想的字號、行距和粗細組合;針對輔助信息場景,研究中老年用戶的最小可辨識字號。這樣研究既能覆蓋各類應用場景、不同的信息層級,又能更聚焦、更高效。
| 構建評估體系
在確定了標準的應用方向之后,評估體系的搭建也參考了過往的設計經驗。我們一方面查找并梳理了學術界在字號、行距方面的研究成果,另一方面也結合了百度已有的設計經驗。最終確定了字號、行距、粗細、顏色四個考察變量在不同研究場景的研究范圍(即自變量選取水平),并綜合主觀體驗指標和客觀眼動數據指標搭建了中老年閱讀體驗的評估體系。其中,主觀體驗指標包括關鍵信息發現、清晰度、舒適度、滿意度;客觀眼動指標包括眨眼頻率、瞳孔直徑變異性和閱讀速度。
| 實驗流程
在實驗中,我們邀請了60位50-70歲中老年用戶參與調研,通過任務模擬他們在真實場景的長文閱讀、搜索、概覽閱讀情況,綜合眼動實驗、問卷調研和訪談方法評估不同字號、行距、粗細對中老年閱讀體驗的影響,探尋不同場景下最適合的字號、行距、粗細方式。在實驗過程中,通過SMI-ETG2w眼鏡式眼動儀測量眼動數據。
///
研究成果:適老化設計標準介紹
通過對各類閱讀場景、設計變量和體驗影響因子的充分分析,本研究形成了一套完備、成體系的適老化設計標準,可用于指引資訊類/閱讀類APP中不同頁面和不同信息層級的適老化設計改造。
| 主場景理想字號、行距和粗細的組合
研究結果明確了資訊類/內容類APP對于中老年人在不同場景里任一信息層級的理想字號、行距和粗細組合。以概覽閱讀場景(Feed列表頁)和長文閱讀場景(圖文落地頁)為例,優化前與預計優化后的字號、行距、粗細組合如下:
概覽閱讀場景
長文閱讀場景
| 輔助信息最小可辨識字號
此外,研究結果也明確了黑色(1F1F1F)字體的全局最小可辨識字號。以75%中老年用戶可以看清的字號作為最小可辨識字號標準,黑色(1F1F1F)最小可辨識字號為36px。
此次研究填補了學術界和業界在手機APP適老化設計領域的空白。在百度,該套標準已落地百度關懷版,未來還會在百度大字版和更多為老年人提供服務的APP上線。面向行業,我們也積極共享研究成果。百度大字版、百度關懷版運營同學牽頭和老齡產業協會合作,設計師結合本次研究成果編寫了《移動互聯網應用適老化設計要求》團體標準,已經于2021年11月10日發布。希望本次的研究成果能幫助更多資訊類/內容類APP完成文字排版的適老化升級,為中老年人帶去更多的關懷和更好的閱讀體驗,為移動互聯網行業的信息無障礙建設貢獻一份綿薄之力。

文章來源:站酷 作者:百度MEUX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
課題背景
今年,突如其來的疫情使兒童家庭學習成為重要學習場景,線上教育與家庭早教類產品的需求陡然增加。但線上教育和早教行業已然成為一片紅海,數字化產品和服務的同質化嚴重,各大公司和廠商都希望形成差異化競爭,以在激烈的賽道中爭得一席之地。目前,市面上的早教產品大都聚焦于兒童學習效率提升和內容豐富,卻忽視了兒童對于早教類產品的真實體驗與訴求。
MOMOUX設計團隊致力于創造有溫度的體驗,主張將真實用戶需求帶入產品創新與研發流程,使用系統化的方法重構生活場景并發覺用戶訴求,從而創造貼合用戶的產品及體驗,以解產品創新之困。
在研究中,MOMOUX團隊基于VIP(Vision in design)研究框架,對現有的兒童早教學習情境進行解構與重構。
VIP設計方法框架包含三個關鍵流程:提取因素、構建情境、定義交互。VIP設計方法首先通過深度洞察對現有環境下的產品、用戶、場景與體驗進行系統化因素提取與解構;其次通過提取的因素重構出新的情境,最后在新情境下定義未來產品的交互方式、創造全新產品體驗。通過深度洞察與研究,重新定義了未來兒童早教產品的四個創新情境和交互趨勢,分別是:多孩互動、自然探索、擁抱屏幕、多元關系。
這四個情境反映了未來的兒童早教學習場景中,我們對人與人、人與物、人與環境之間關系的洞見,是我們根據真實用戶情況對未來數字數代早教產品交互方式與情境的大膽暢想。希望此內容能給兒童早教行業帶來一些不同的聲音和啟發,能夠在數字化時代為兒童發聲,回應數字化中兒童學習需求及市場發展的需求。
調研發現,多孩家庭中照顧孩子的任務非常繁重。通常,一部分母親會轉為全職媽媽,爺爺奶奶等長輩分擔部分育兒工作。
學齡前兒童與低幼兒童的互動方式和操作習慣完全不同。要讓兩個孩子同時使用產品進行互動與交流,就需要產品本身的操作特性滿足不同年齡段孩子的行為習慣與互動方式。
其中一個潛在的發展方向是融合AR技術的互動式搭建玩具。該類型的產品既滿足了學齡前兒童需要的產品拓展性、多元化,也能在實體層面滿足低幼兒童在感知運動階段對于實體互動的需求。
OSMO Hotwheel MindRacers
Hotwheel ? MindRacers將現實和虛擬賽車游戲結合在了一起。混合了多模態的交互方式,強調游戲過程中的競技性與可玩性。在游戲過程中還加入了現實中的協作影響游戲進程的模塊,通過互動游戲促進不同孩子之間的交流與溝通。
◆ 思考
◆ 討論
◆ 實踐
傳統的教育與學習活動通常發生在學?;蛘呒抑小kS著城市文化活動設施日趨豐富,“戶外教育”等新型教育觀念的倡導,越來越多的家長傾向于在周末組織出行,這衍生出了豐富的戶外親子學習場景。
MITA - 小糖口袋相機
Zigmo兒童戶外玩具
◆ 思考
◆ 討論
◆ 實踐
Marbotic Deluxe 學習套件
◆ 思考
◆ 溝通
◆ 實踐
在兒童帶屏產品開發過程中,需要優先考慮內容是否能于其屏幕進行有效適配,軟硬件的多模態交互會很大程度影響產品的全局體驗。在這個過程中需要盡可能地減少系統的BUG。在軟硬件協同設計中,再小的問題都容易毀掉產品整體的體驗??焖僭团c漁網模型是開發過程中不錯的選擇。
社會結構和家庭結構的變化使得親子關系變得越來越多元。有為了陪伴孩子而辭去現有工作,進入幼教領域給孩子更好教育的家長;也有在異國他鄉出差而將孩子交給保姆、老人撫育的家庭……家庭關系多元化帶來的是家長對自己的身份定位也越來越多元化。在調研過程中我們發現母親在家庭關系中的定位從“施教者”轉向了“引導者”。主要體現在:
? 與孩子溝通中更加尊重孩子的行為自主性,希望通過興趣讓孩子主動做喜歡的事情,以此來培養孩子的學習習慣,而不是一味地向孩子灌輸。
? 母親們也會主動地將部分家務工作分配給孩子,通過平等地共同體驗來讓孩子理解自己(自己是誰,母親還是孩子)。
PUPUPULA 兒童學習打卡機
Kitchen Kids 兒童廚房裝備
◆ 思考
◆ 溝通
◆ 實踐
親子家庭學習場景,在互動方式、場景、交互媒介、親子關系構建方面都涌現出了新的趨勢。產品經理與設計師需要結合真實用戶在場景下的需求進行深入思考,才能設計出更加貼合未來場景與用戶需求的產品與體驗。
文章來源:站酷 作者:MOMOUV墨默體驗
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在數字化的浪潮下,政府希望通過人工智能占據智慧城市的發展先機,推動民生改善及產業增長,這離不開政府和科技公司的緊密合作。因此,科技公司不僅面向To B型企業,同時面向政府或相關事業單位,即是稱之為「To G」這種特殊劃分。
鯤云科技(以下簡稱為鯤云)就是這樣一類科技公司,他們作為一家技術領先的人工智能公司,以數據流技術為核心,提供高性能低延時、高通用性、高算力性價比的下一代人工智能計算平臺和軟硬一體化的平臺解決方案,加速人工智能技術在智慧城市、智慧安監、智慧制造、自動駕駛等領域的落地。
當用戶接觸一個產品或物品的第一步,永遠是外觀視覺。固然,企業官網作為互聯網產品,優質的官網必然是為它的用戶有針對性地服務。雖然訪客首先感受到的是網站的視覺設計,但我們不僅要對網站視覺美觀與否有所重視,更好的訪問體驗、更實用的網站功能、更高的網站辨識度,以及通過視覺實現直觀的價值傳遞表達,都需進行深度探討。
網站呈現給訪客的第一印象尤其重要,而網站首屏則會作為傳遞網站風格及功能的媒介。我們從鯤云的品牌設計理念出發,以直觀的視覺形式來體現科技感。
一個視覺效果好的網站,80%以上是靠優質的圖片支撐。我們首先在官網首頁Banner采用產品渲染圖來呈現鯤云核心產品。首屏的功能性常會被忽視,其實,企業官網附帶著商業屬性,商業環境下的視覺應該更注重強化產品,滿足需求的產品力加持。
為了提升banner的視覺質感,我們對鯤云三款主打產品重新建模渲染,通過主要光源及補光掌握好產品形態,在將產品細節充分展現清晰的前提下,產品暗面加入環境光使整個畫面更豐富飽滿。
與此同時,完成產品渲染后結合了場景化的特殊版面來營造氛圍,使整個畫面更具真實感染力。這樣一來,當訪客來到鯤云官網,一個極具科技感和創造力的鯤云會給訪客留下深刻的第一印象。
圖標是比文字更容易理解的可視化語言,它對于信息傳遞十分高效,可以說圖標將這個世界結合起來。鯤云圖標體系由兩部分構成,分別是UI icon和3D icon。
3D icon可幫助訪客更簡易、高效地理解鯤云兩大核心技術的實際屬性。UI icon擁有清晰、簡潔單色線性的特征,其風格符合鯤云品牌氣質,每個圖標特征和細節保持一致,在視覺上呈現出更好的統一性。
我們提煉鯤云logo造型輪廓特征、以及根據產品和服務方向進行圖形發散,提取鯤云品牌基因,進而使圖標實現差異化設計。
一個可以給人留下記憶點的網站,往往需要靠一個個精致到位的細節設計,做到讓網站最終脫穎而出。可以說,細節是構建起整個設計的基本元素,細節不僅是細節。
科技類產品復雜度較高,只查看技術和產品概念往往會感到枯燥,如何做到直觀呈現鯤云核心技術區別于普通技術,還能提升趣味性?
在首頁接著往下呈現鯤云核心技術的第三屏中,我們應用柱狀圖結合交互微動效的方式,將鯤云CAISA芯片與普通芯片進行利用率、性能及延時三方面的對比。
當訪客點擊查看某一維度對比,可觸發柱狀圖由下至上勻速的位置及漸變色變化,更直觀地向訪客表明鯤云此款芯片可提供更高的算力性價比的優勢,同時引導訪客注意力,加強訪客與其互動鏈接。
在網站中較為常用且能保障性能的微動效有四個變化屬性:大小、位置、旋轉、透明度。這四個屬性任何一種或是幾種有所變化時,就能達到交互微動效的目的,如果再加入其它不必要的屬性,則會影響動效的流暢度。
首頁第四屏的四個核心產品展示中,移動鼠標放置各個產品版塊觸發的微動效,緩動的效果能讓版塊更自然順滑,看起來十分舒服和諧,符合訪客認知及預期。
我們明確了鯤云官網文案語言要保證表述清晰明了、詳略得當,直觀地將產品信息及優勢傳達給訪客,便于訪客理解且能產生記憶點。
關于鯤云
---------------------
核心技術
---------------------
產品中心
---------------------
應用案例
---------------------
合作伙伴
我們見過不少企業官網文案,都喜歡用抽象的詞匯來高度概括產品概念。在我們看來,佐證產品使用真實專業的語言搭配數據內容,可體現出產品專業性的同時,用更真實的力量打動訪客。
我們利用響應式網頁設計構建網頁布局,使頁面能夠更好地適配不同尺寸屏幕,進而使網頁體驗更適應用戶的需求偏好。
官網建設需要遵循“不要讓我思考”的原則,這是產品設計中廣為流傳的一句話。網站作為單向信息傳播工具,我們難以左右訪客的瀏覽行為。
我們需確定官網的層級結構,做好訪客整體體驗的宏觀把控,讓訪客按照我們設想的行為去操作。我們除了必須滿足訪客基本瀏覽需求之外,更要主動展示企業核心競爭力的內容,這是最終實現增長的有效途徑。
我們從用戶分層入手,站在各個訪客角色的角度進行審視,使得鯤云官網各版塊頁面設計上不同的展示區、功能區以及CTA按鈕等充分滿足訪客想看到的信息需求。誠然,各版塊信息內容之間存在價值等級,例如知乎的問答會占據首頁較大的空間。
根據鯤云先有技術再有解決方案的底層邏輯,我們將鯤云「核心技術」板塊放置在導航欄第一位,先有「核心技術」,再有「產品中心」,后有「解決方案」及「應用案例」。
路徑1:「核心技術」頁面關聯「系列產品」
路徑2:「產品中心」頁面關聯「應用場景」
路徑3:「解決方案」頁面關聯「應用案例」
通過設計官網層級結構,結合對訪客心智特點的思考和利用,讓訪客更多行為能夠發生在直覺系統的判斷中。當然,降低訪客跳出率、建立起訪客信任都在上述層級結構設計的考慮范圍之內。
對于To B和To G產品,企業更看重的是產品本身能否為企業帶來價值。鯤云的客戶群體角色通常為多層級,他們會從性價比、效率提升、適配企業狀況等多個維度進行篩選和考量,本質既是要優化客戶效率,實現“降本增效”。
基于這一特點,我們在「核心技術」板塊Banner圖設計了下載白皮書的「 CTA 行動號召按鈕」,并確保CTA顏色對比顯眼且目標清晰。
基于鯤云SEM投放需求,我們專門設計了專屬落地頁——「解決方案」版塊,將官網首頁與該廣告轉化頁分開,各司其職。
大家應該多少有聽說過,我們可以通過FABE法則和AIDA模型等經典方法搭建出一個優質的網頁框架。
一個落地頁應該凸顯對訪客有利的信息,當訪客來到廣告轉化頁時,如何快速獲得想要的信息,并為他們建立起對鯤云產品的價值認同進而實現轉化,這時就需重點打造信息分層。
整個頁面采用相對清晰簡約的視覺設計,圍繞「解決方案」這一核心有層次地規劃整個布局及各信息點優先級。頁面Banner作為門面,也是整個頁面氛圍的關鍵所在,我們將重點信息突出,文案傳達簡潔有力,圖片素材的選取兼顧了鯤云品牌形象,整個頁面的營銷屬性做到盡量弱化。
訪客瀏覽頁面時,不一定會經歷完整轉化過程才會轉化,我們設計了及時的行為號召入口,幫助訪客在某一節點做出行動時,實現快速轉化:
......
鯤云面向的客戶群不僅是面向To B,同時面向從To B衍生出To G這一種特殊劃分。基于這一行業特點,我們在整站設計中有更多精致度和可視化的思考,它不需要五花八門的Banner、會員體系以及炫酷的交互動效。
我們只需要讓訪客“慣性”操作,制定更符合人性的策略來指導設計,讓訪客按照我們設想的行為去操作,這是最終實現增長的有效途徑。當然,提高轉化率是我們引導設計的主要目的之外,降低訪客的跳出率、建立起訪客信任都在我們網站引導路徑設計的考慮范圍之內。
增長超人為客戶做的從來都不僅僅是一個網站,而是為企業提供從營銷策劃到落地的一整套互聯網解決方案。網站只是一個載體,我們真正的價值在于能夠幫助企業找到正確的競爭優勢,扭轉高成本低轉化的現狀,實現營收增長。
文章來源:站酷 作者:增長超人
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
這一篇,我們來探討下交互設計的善意。
善良常常被用來形容人,偶爾被用來形容產品,很少被用來形容交互設計。
就像人們會說,iPhone 有人文關懷,而很少會說,iPhone 的交互設計有人文關懷。在筆者看來,原因之一,是交互設計很難將人文關懷囊括完,而產品本身則基本可以。
類似的道理,本文探討的善意,始于交互設計,但不局限于交互設計,還包括產品和企業的善意。
一家之言,歡迎交流探討。
01 為什么選擇善意?
一個 3 歲小孩流落街頭,無家可歸,會讓無數人起惻隱之心。我們普通人的微小善意,有時可能是一種本能反應,或者說是一種感性反應。
“他內心是有時邪惡,還是對人們始終良善”,這是李宇春《年輕氣盛》里的一句歌詞。
惡是否為本能,筆者不知道??茖W家的解釋是,有些基因中會帶有惡??梢钥隙ǖ氖牵茞航詾槿诵?,共存于人類當中。
感性和理性是會此消彼長的,林黛玉和薛寶釵就是兩個極致的例子。同理,人類體內的善惡,也會此消彼長。
一款產品,在做決策時,很大程度上是基于理性。
這種理性決策,很多時候是無意為善,也無意為惡。但遺憾的是,那個非善非惡的中間地帶不會一直存在,有些無意為善和無意為惡,最終會成為非善即惡,比如開屏頁是否放廣告這件小事(下文有詳述)。
既然善惡會此消彼長,而且產品的有些理性決策會導致非善即惡,那么不可避免的,有時候,善惡會變成一道二選一的選擇題。
接下來,我們就從理性的角度探討下,為什么選擇善意。
1 長期主義
最近幾年,互聯網從業者有個共識:創業是件九死一生的事兒。因為據數據統計,90% 的創業公司活不過三年。
這是一個值得深思的社會現象,背后的原因究竟是什么?直接原因,往往是資金斷裂。深層原因,會有很多,比如產品不夠好、方向不夠準,等等。
那么,核心原因呢?筆者認為,和創始人的執念有關。
有兩類執念可以避免此類悲劇。第一類是做出優秀產品;第二類是長期主義。
做出優秀產品這塊,有很多例子,最典型之一是特斯拉。特斯拉曾面臨多次危機(資金、產能等),但都挺過來了,這肯定和產品深受車主喜愛有關。
筆者也見過兩個普通創業公司的例子。他們都有一顆做出好產品的心,都很重視 UI、交互、用戶體驗這些基礎的東西,而且把 UI 做的比較優秀,交互和用戶體驗做的還不錯。其中一家靠著用戶的付費在平穩發展,另一家連產品帶團隊被大廠收購了。
長期主義這塊,典型例子之一是巴菲特。巴菲特信仰并踐行價值投資,價值投資依賴長期主義。最近幾年,長期主義在國內也被越來越多的提及。
個人的理解,長期主義至少包含兩個要點,分別是:積累、多贏。因為,沒有積累就不會有成就,沒有多贏成就就不會長久。
中國女排,世界冠軍。排球界有個說法,叫三年成型,五年成才,八年成器?;ヂ摼W行業,也大致如此。這是積累。
用戶,員工,投資人,三方利益都兼顧好,才是多贏。
俗話說,顧客是上帝,大家都知道對用戶好;投資人作為強勢一方,利益也往往有保障;員工的利益是否有保障,往往取決于創始人,所以存在很大變數。
回到主題,長期主義和善意,有什么關系?
通常而言,多贏能否實現,關鍵在于員工的利益能否得到保障。
筆者在網上看過一個有意思的評論,說當下的年輕人,如果收入、成就感、高興這三點有兩點達不到,就會辭職。
所以,員工利益得到保障的標準,可以簡單定義為“三中二“,即收入、成就感和愉悅這三點滿足兩點。
再來分析一下現狀:相比員工,公司是強勢一方;人們仍受最大程度剝削剩余價值、官僚思想等觀念影響;惡性加班等風氣存在;僧多粥少的就業行情。
在這樣的大環境下,如果公司對員工沒有愛和善意,員工的利益是很難得到保障的。
最后,總結一下:公司有善意,員工利益就有保障,就能實現多贏,從而有望實現長期主義。
2 美好生活
前段時間,因為給武漢捐款 5000 萬、并且疫情期間蔬菜按成本價銷售,一些網友被胖東來這個商超刷屏了。
胖東來來自河南許昌,一個三四線城市,也是筆者的家鄉。目前僅在許昌和新鄉有店。
在一些關于胖東來文章的評論區,很多網友在喊胖東來去自己的城市開店。
為什么有這么多呼聲?簡單分享幾個例子。
顧客方面,胖東來有 6 類購物車,包含嬰兒手推車、兒童購物車和老年人購物車。老年人購物車自帶凳子,可供休息,同時還配有放大鏡。
員工方面,有高薪、高福利和利潤分紅等。胖東來比較為業界稱道的高福利有:每周二閉店,春節閉店 5 天,工齡滿 1 年即有 30 天帶薪年假,一天最多工作 7 個小時。
從網上的報道、評論以及公布于網上的企業文化來看,胖東來一方面主張工作和生活(愛情、家庭、休假等)的平衡,一方面在踐行和傳播幸福、快樂、尊重等很多積極的文化價值觀。
看新聞的時候,筆者注意到,老板于東來經常會提到“美好”這個詞兒。實際上,在筆者看來,胖東來本身就代表了一種美好生活,一種物質和精神雙豐盛的美好生活。
對于這樣的美好生活,用戶和員工自然喜歡??蛇@對企業有什么好處?
胖東來曾經意欲退出新鄉市場,新鄉合作商家和市民紛紛請愿,政府也多次出面挽留,最終胖東來留下來了??梢?,胖東來在新鄉已經深入人心,顧客自然會大力支持它的發展。
胖東來有一句 slogon,能夠很好的解釋這一切,那就是:愛在胖東來。
同樣,既提供體面的收入,又關注員工和用戶的精神需求,給他們帶去美好生活,當然需要更大更多的善意。
在當下中國,能提供高薪的互聯網公司已經很多了,但是能在精神層面讓員工感覺良好、感覺愉悅、感覺幸福和快樂的公司卻為數不多。
對于所有企業而言,這又何嘗不是一種機會?
02 交互設計里,有哪些善意?
現實中,像胖東來給顧客和員工提供的這種美好生活不常有。但是退一步講,還是有很多產品對用戶展現了很多微小善意,值得我們學習。
這種微小善意主要有三類,分別是:不打擾,護尊嚴,人為先。
1 不打擾
我們生活在一個信息爆炸的時代,不被手機上的信息過度打擾,是一個剛需。有三類信息,如果把握不好度,就會對用戶形成打擾。它們分別是:廣告、推送、推薦。
廣告這塊,主要有兩類會形成打擾,分別是:時機不佳的廣告,過長的廣告。
這方面,微信是個榜樣,值得學習。比如開屏頁廣告,就是時機不佳的廣告,因為大家不想在這里看到廣告,微信就沒有放。朋友圈里也有較長的視頻廣告,微信的常見做法有兩類,要么先展示一張圖片,要么先是無聲播放。是否看完整的視頻廣告,選擇權在用戶手里。
推送這塊,常見的有手機系統的通知和 App 內的紅點消息。
系統通知,目前也有被濫用的趨勢。根據使用情況和感受,個人的建議是這類推送控制在 1-2 類。第 1 類是關于核心功能,比如微信推送新消息,搜狐新聞推送新聞;第 2 類可保留一定的彈性,核心原則是對用戶有價值,比如偶爾的活動通知。
目前有兩種情況會對用戶形成打擾和困擾,第一種是過于頻繁的活動通知;第二種是推送和核心功能相差甚遠的信息,比如金融類產品推送新聞。
紅點消息,有一類會對用戶形成打擾,那就是來自官方的過于頻繁的各類活動、促銷等信息。
推薦這塊,主要指 App 內的 Banner 和專題。目前對用戶形成打擾的主要是一級頻道的一些專題。
一種是過多,比如網易云音樂的首頁,就有 9 個專題;一種是位置不佳,比如 Keep 的“探索”頻道就包含了課程的推薦,但是在“運動”頻道還有兩個專題來推薦課程。
2 護尊嚴
護尊嚴,就是盡最大可能,維護用戶的形象和尊嚴。
最近幾年,常有產品花巨資撒紅包給用戶搶。產品的初衷自然是好的,而且看起來也是一件皆大歡喜的事情。但是這件事很難提升產品的美譽度,也就無法增加用戶對它的喜愛和忠誠程度。
為什么會這樣?
讓用戶搶自己撒的紅包,這件事能維護用戶的形象和尊嚴嗎?非但不能,可能還會對此造成傷害。因為可能會顯得用戶愛占小便宜,也可能會使用戶處于被施舍的一方??傊@種事對用戶來說,并不酷。
一款產品,要想贏得用戶更多的喜歡、尊敬乃至忠誠,就最好不做哪怕僅是微弱傷害用戶形象和尊嚴的事情,同時多做一些相反的事情。
3 人為先
人為先,是當用戶利益和企業利益發生尖銳矛盾時,去追求一種用戶利益在先的雙贏局面。
大家都知道,吸煙是有害健康的,但是煙草公司又是要賺錢的。泰國香煙那種既觸目驚心又惡心嚇人的包裝,就盡他們最大的可能詮釋了“吸煙有害健康”,是真正的用戶為本,讓人心生敬意。
泰國香煙的這種做法,值得一些極易讓人上癮的游戲廠商借鑒和學習。
03 交互設計:如何做到善意?
上一大段,是善意的三類表現。這一大段,再探討下做到善意的一個原則。
以社區型內容型產品為例,這個原則就是:先服務后管理。
這里的服務,是指以服務者的心態做好用戶體驗,并不局限于交互設計。這里的管理,指的是一些必要的管理,一般是用戶的行為規范和用戶違規時的處理,比如評論里罵臟話、發布侵權文章等。
所有用戶都是需要被服務的,只有少數行為不當的用戶才是需要被管理的,所以我們要先服務后管理,以免誤傷了不需要被管理的用戶。
服務本身就是一種善意,筆者把它分成了兩個階段,分別是:體驗的初始階段,體驗的完整過程。
初始階段對應的是:初始服務;完整過程對應兩類服務,分別是:家常服務,極致服務。
1 初始服務
初始服務,是當用戶剛開始用這款產品時,能給他們留下良好印象的服務。
如何做到?不出現任何輕微惡意和管理傾向即可,再提供一些便利和幫助則更好。
下面分享一個反面例子。
在個別城鎮的衛生死角,有時會看到這樣的標語,“此處禁止倒垃圾!違者罰款 200!“。結果那個地方往往有很多垃圾。
為什么會這樣?
這個標語,有兩層意思:第一,你很可能會在這里倒垃圾;第二,禁止你這么做,做了要罰錢。
也就是說,某種程度上,這個標語在用惡意揣度別人,同時也在很嚴的管理別人。
看到這個標語的人很可能會這樣想:既然認為我會在這倒垃圾,那我索性就倒了;禁止我?憑什么?還罰我錢,嚇唬誰呢,況且你有證據嗎?
下面再分享一個很好的正面例子。
筆者有一個宜家的退貨經歷。把一個已經拆過的桌子打包送到了宜家,宜家沒有檢查里面的零配件(很多螺絲之類的),直接退了。這樣寬松的退貨條件,宜家可能會蒙受一定損失,比如小概率的零件丟失,但宜家還是把這種服務提供給了顧客。筆者當時的感受是宜家挺信任我們的,對宜家就多了幾分好感。
2 家常服務
家常服務,是指一種稀松平常,但又讓用戶感到舒服自在的服務。
舉個例子,你去好朋友家里玩,朋友給你倒了一杯水,并端出一盤削好切好的蘋果,你們一邊吃一邊聊。你和朋友是平等的關系,他這種簡單的招待并不會使你感動,但卻使你有一種接近在自己家的那種舒服自在。
筆者在用微信公眾號(后臺)時會有這種感受。在星巴克和肯德基時也會有類似感受。
家常服務,如何實現?第一,要有良好的初始服務,這是基礎;第二,要有周到且較高品質的交互設計,這是關鍵。
以微信公眾號為例,和微信一樣,它的交互設計也做到了周到和較高品質。下面看看微信公眾號的初始服務。
面向大眾的資訊平臺大多都有一個發文規范,多是關于禁止的行為,通常都會用一個單獨網頁來展示,有 1-2 頁紙那么多。
通常情況下,多數作者是不會違反發文規范的。對于這部分作者,當他們首次看到 1-2 頁密密麻麻的發文規范時,可能會產生抵觸心理,即便自己不會違規。就好像高中開學第一天,班主任二話沒說,直接就立了 20 條班規,同學們會是什么心情。
微信公眾號的做法就很巧妙,它把這些規范分割成了三部分。
第一部分是嚴禁的紅線行為,以高度概括的一行文字呈現,所有人都能看到,但是得仔細留意才能注意到。這是規范性質。
第二部分和競品一樣,也是鏈接出來的一個單獨網頁。鏈接入口也和競品一樣,在關聯性最強的發文頁面右上角。不同的是,這一頁展示的是規則,主要以問答的形式呈現,給人感覺是有幫助的信息。這是服務性質。
而競品的這個頁面,通常都是禁三禁四的規范,給人的感覺可能是緊張、壓抑甚至抵觸。
第三部分是次于紅線的禁止行為,比如侵權、低俗內容等。這部分內容的管理辦法被以公告的形式分散在公告列表里。而且公告列表里內容多樣,還有很多一般的通知,所以這個公告列表也不會像競品的那一頁規范一樣,給人緊張、壓抑的感覺。性質上是中性。
另外,這部分的入口在后臺首頁右上角,和發文模塊是分開的。所以不會違法規范的作者一般不會去公告列表里翻這些內容,也就看不到。
微信公眾號就是這么巧妙的讓多數作者看不到“班主任”的“20 條班規”,同時還讓他們看到了“班主任”的“常見問題回答”。
這就是微信公眾號在發文規范方面的初始服務。另外還有一個加分的細節,就是檢測疑似錯別字的功能,很貼心,雖然目前還不是很準。
3 極致服務
極致服務,是指讓用戶感動的服務,比如海底撈和胖東來的服務。
這種服務,一般是由許多細節積累而來,是一種做加法的服務,而且背后往往依賴人力。
好的交互設計,一般都是在做減法,而且純粹是界面、機器在和用戶打交道。所以極致服務難以復制到交互設計上。
不過,一款互聯網產品,除了交互設計,還有其它方面的內容。
B 站就是一個例子,它以不走尋常路的方式,在兩個方面做到了較為極致的服務。那就是:視頻無廣告,比較積極、歡樂的彈幕氛圍。
結語
以用戶利益為先,不打擾用戶,維護用戶的尊嚴,這是交互設計里的三種善意,值得我們學習。
先服務后管理。服務作為一種善意,也能夠引來用戶的善意,最終形成良性循環。
杜絕任何輕微惡意和管理傾向,再提供一些便利和幫助,便能做到良好的初始服務;
在初始服務的基礎上,提供周到、高品質的交互設計,就能做到良好的家常服務;
交互設計難以做到極致服務,但是其它方面有機會。
最后,用劉備的一句話來結束本文。
勿以善小而不為。
文章來源:站酷 作者:SnowDesign
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
①什么是IOC
②IOC設計的發展方向
③IOC設計工具(BI類設計工具)
④IOC的應用場景
以上不展開闡述,不理解的朋友可自行關鍵詞搜索,我們就應用層面發散一下;
數據指標--指揮調度--數字孿生--設備監測--設備控制--事件感知--配置中心
相信設計同學或產品同學,或多或少都有接觸可視化領域。比如B端后臺常使用到一些統計圖表、比如用研分析或者市場分析也常常用到這類圖形來表達。
而涉及B端可視化,有一個不可忽視的詞就是“智慧”
智慧到底是什么,有人會告訴你,以前是數字化時代和智能化時代,現在已經開始進入到智慧化時代。但你要具體問智慧化和數字化有什么區別,大多數人會支支吾吾給你一個抽象的概念。
人尚且不能詮釋智慧,又怎么去創造智慧呢?
所謂的智慧城市、智慧園區、智慧社區、智慧校園、智慧交通、智慧安防,甚至智慧殯葬。
扒開外衣,它真的智慧嗎?
到底什么是智慧?百科告訴你:
“ 智慧是生命所具有的基于生理和心理器官的一種高級創造思維能力,包含對自然與人文的感知、記憶、理解、分析、判斷、升華等所有能力。智慧與智力不同,智慧表達智力器官的綜合終極功能,與“形而上之道”有異曲同工之處;智力則謂“形而下之器”,是生命的一部分技能。
在我們的日常生活中,智慧體現為更好地解決問題的能力。
通常,我們設計可視化大屏都容易被局限在平面空間中
“這個屏就這么大,你還想要什么?”
要提升可視化,首先就要打破面板大小的局限性,
理解并以其他形式滿足合理的數據穿透需求
如:
“
這個餅圖告訴我未處理的還有8個工單,到底是哪8個工單,
誰在處理,處理停留時長多久了?,
你就告訴我沒處理完,能輔助我決策什么?
”
數據的穿透面板可以有多種形式,以彈窗和面板的切換居多;
數據穿透后,也需能給到更詳細的信息輔助管理者決策,
但“決策”的動作如何做?
對講機?電話?或又是其他通訊工具?
不可質疑的是,確實很多情況,對講機更有效率
但信息化時代,有時為了痕跡留存,可以犧牲一些效率或嘗試融合;
這就迎來了大屏的功能性操作,工單指派、催辦、關閉、誤報等;
當然,想象空間還有很多,
如:未必客戶的操作臺就如同公安一樣分布著各類事件的值班人員,
未必不會出現臨時替班情況,如何通過大屏指導或指引不熟悉的人員處理事件?
處置預案或者叫處理建議,也許就是另一個亮點。
數據終究是數據,沒有物理世界的直觀感,
數字孿生即是這個時代最熱也最保溫的話題,比如最近大熱的概念元宇宙;
虛擬世界的映射我們見過太多,但大多是在游戲中,
如果要真正反映真實世界,技術空間依然很深。
打個最淺顯的比方,模型基于X、Y、Z軸坐標,而現實世界基于地理位置(GIS),如何映射?
BIM(城市信息模型) 、GIS(地理信息系統)、IOT(物聯網)
關于孿生,路還很遠,但從幾何模型——數據模型——數據融合——動態孿生到自主孿生,我們已能看見光。
大家可以去瞅瞅51World,一家以克隆地球為愿景的數字孿生機構,雖然不知道他們能走多遠,但一定值得關注和祝福。
IOT物聯網?
傳統的可視化我們會羅列設備的信息列表、日志、報警事件,
但大多都是非技術人員無法理解的數據,產生不了價值,更不能輔助決策。
關于設備,我們要往實用層面多加考慮,在真實場景中找到應用價值,
比如監測設備的在離線狀態、故障事件、原因分析、設備開關控制等;
萬物互聯,未必不可能;
說到設備的故障事件,我們突然想到,傳統的故障是怎么發現的?
通過物管碼,定期巡檢,上報異常;
現在我們通過設備各項傳感器也能發現,這是設備,那人、車、消防,難道不行嗎?
人可能包括內部工作人員比如脫崗等事件,也包括外來人員的闖入等;
車可能包括超速、逆行、違停、僵尸車輛等;
現在的AI感知攝像,如執法攝像、車輛監測、熱成像攝像等,可以幫助我們感知大多常規事件。
除此之外呢,數據的比對可以分析出各類異常,當然,人工反饋也不可或缺。
數據差異多大算異常,什么時候告警,這些隨場景不同都可能截然不同,標準雖然重要,配置也不可沒有;
圖表的展示形式,是折線又或是柱狀,維度是區域又或是樓棟?,圖表的樣式和數據維度配置貌似讓人驚喜;
誰來看都展示一樣的數據?會否出現數據查看的需求不同?演示和使用的需求會否截然相反?
打個不恰當的比方:
使用時,更希望沒有告警;
演示時,更希望讓觀眾看到我們對告警事件的處理效率和大屏的智慧;
權限的配置值得深思;
文章來源:站酷 作者:互耕II乙方
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一:平鋪
平鋪:指的是將表單信息完整的排版在界面中。
無論是在B端還是C端設計中,平鋪的表單設計是最常見的,這樣的表單用戶可以一覽看全所有表單的信息(但是對于表單字段多且復雜的場景,平鋪也不能一覽所有)。所以對于平鋪的表單設計而言,一般是針對表單信息簡單且字段信息較少的情況,如果字段信息小于兩屏且字段信息強相關,那么我們可以選擇采用平鋪的表單設計方式。
例如:飛書的審批表單頁面設計就是采用平鋪的設計方式
表單的第二種設計方式是分組,分組的排版方式又可以細分為三種方式。分別是:折疊分組、區域分組、標題分組。下面分別介紹了三種分組的詳情。
01:折疊分組
折疊分組:指的是將表單信息分類顯示,通過點擊按鈕展開和收起表單的具體信息。
在B端設計中,會存在很多設置類表單設計,最常見的圖表數據和樣式外觀設置,對于一個圖表而言,會讓用戶自定義圖表的各種信息設置,并且需要在一個表單中顯示完整圖表設計所涉及到的范圍,所以大多數都會采用折疊分組的形式。
折疊分組用戶可以一眼看全表單所涉及到的大范圍,用戶鎖定某個標題范圍后,再展開去完善對應的具體表單信息,這樣用戶就可以不用在龐大的表單信息中去尋找自己需要完成的表單信息。折疊表單一般會包含一些默認的數值,用戶可不做調整,不調整也不會影響功能的使用。如果說表單信息需要用戶手動完整的填寫或者確認,那么最好不要選擇這種表單的設計方式。
例如:Grafana的自定義BI圖表設置信息就采用了折疊的表單形式
02:區域分組
區域分組:指的是將表單信息分類顯示,通過矩形背景劃分區域,形成小組表單信息。
在B端設計中,一些復雜的表單會通過區域分組的形式排版設計,可以將一個表單的信息通過信息的關聯關系劃分不同的區域形成小組信息,這樣有利于信息的歸類以及信息的填寫。用戶在看到復雜表單的時候不會被龐大的表單迷惑,可以更好的找到表單字段,也可以讓用戶填寫表單更有秩序、更清晰。區域分組的使用場景,一般也是針對復雜表單且具有強相關的信息關系。
例如:下面是我在工作中所運用的一個區域分組的表單設計方式。
03:標簽分組
標簽分組:指的是將表單信息分組標簽化,形成獨立的小表單信息,分為上下結構和左右結構。
上下結構
左右結構
復雜的表單可以采用區域分組的形式,還可以采用標簽分組的設計形式。標簽分組可以一眼看全所有分組大類信息,對于一個表單涉及到多種信息字段的情況,并且每個組的字段信息都是獨立的,不是強相關的,那么我們就可以采用標簽分組的形式。
標簽分組可以直接點擊標簽快速定位到想要查看和填寫的表單區域,這樣使用戶操作更加快速便捷。并且也讓龐大的表單信息得到更好的整理,讓用戶使用更方便,可降低用戶對于龐大表單信息的焦慮感。
下面可以看一下在B端產品中我對于一些復雜表單標簽分組的設計方式。
三:分頁
分頁:指的是將整個表單信息通過多頁的形式展示。
分頁表單設計一般會針對具有步驟前后順序關系的表單。也就是指需要先完成上一步表單信息才能進入到下一步的表單頁面,形成一個完整的閉環流程才能使表單信息提交成功。
同樣的,下面截圖為B端實際業務工作中的一個分頁表單設計頁面,因為業務的保密性,所以就不做太多的業務信息,只需要看到分頁表單的一個實際設計場景即可。
一:彈窗(對于信息較少的表單)
最常見的表單呈現方式即彈窗,無論是在C端還是B端,我們都隨處可見彈窗形式的表單。彈窗表單一般呈現在屏幕中間,底部有暗色遮罩層,將底部信息與彈窗表單隔離,使用戶專注于表單的填寫。彈窗模式的表單一般是針對表單信息較少的情況,并且填寫表單不需要關注底部頁面的信息。用戶可以在彈窗表單中順利地完成表單的任務。
案例:
二:抽屜(內容信息較多,且與底部信息強關聯)
抽屜形式的表單一般是針對表單信息較多且與底部信息具有強相關的關系。用戶在填寫表單時需要根據底部信息的輔助完成,或者需要同時操作底部面板中的相關信息,來協助完成表單信息及讓交互使用更方便。
抽屜形式的表單展示方式是從屏幕右側彈出,有時候也會有從底部彈出的情況。這里主要分享從右側彈出的抽屜表單模式,抽屜模式還分為三種模式:有遮罩層的抽屜模式、無遮罩層的抽屜模式、擠壓模式。
下面分別介紹這三種模式的區別以及使用場景。
有遮罩層的抽屜模式
有遮罩層的抽屜模式指的是抽屜底部有暗色遮罩層,將抽屜表單信息與底部頁面信息隔離,這里的遮罩層與上面彈窗中的遮罩層是同樣的作用。那么就有人有疑問了,既然都是有遮罩層具有同樣的隔離作用,那為什么要從右側彈出,而不直接和彈窗一樣展示在屏幕中間呢?
有遮罩層的右側抽屜模式的表單具有以下特點:
01:右側抽屜出現位置在屏幕的右側,雖然有遮罩層,但是仍然可以看到遮罩層底部頁面的相關信息,如果在填寫表單的同時需要關注底部信息,并為填寫表單做輔助,那么右側抽屜表單模式比常規的彈窗模式更適合。
02:右側抽屜模式的表單面積更大,更適用于復雜表單的呈現,可以展示更多的信息。
案例:
無遮罩層的抽屜模式
無遮罩層的抽屜模式指的是抽屜底部沒有暗色遮罩層,抽屜直接浮在底部內容之上,一般通過對抽屜背景做投影來區分底部內容與抽屜內容,讓兩者之間能更清晰地辨別使用。
無遮罩層的右側抽屜模式的表單具有以下特點:
01:與有遮罩層的模式一樣具有可根據底部信息輔助完成表單信息的填寫的特點。
02:適用于復雜表單且可以展示更多的字段信息。
03:另外有一個更加重要的特點是:由于底部內容是沒有遮擋層,所以用戶還可以同時操作底部頁面,使用戶切換信息更便捷,使用效率得到提高。
案例:
三:擠壓模式
擠壓模式指的是表單信息從右側出現,將原本畫布的內容區域寬度減小,從而展示右側表單。這樣的展示方式界面需要做適配,做到畫面中的元素自動適配畫布大小,以滿足正常的閱讀和使用。
擠壓模式與上面的無遮罩層的抽屜模式具有相同的特點,另外擠壓模式還具有可以完整看到原本界面中的內容,右側表單可以自由展開和收起。
但是對于表單信息龐大且復雜的業務情況就不太適用于右側擠壓的模式,因為表單寬度占據太多會影響原本界面內容的展示,原本內容會因為寬度區域太小而布局錯亂的問題,如果因為右側擠壓的表單出現而改變原有界面內容的布局,對于用戶而言使用也不太友好。
案例:
四:頁面(單獨表單填寫,且信息量較多)
上一期已經分享過關于分頁展示的表單模式,其實和這里的頁面展示類似,當表單信息龐大且與原界面無強相關的可以直接采用新頁面呈現。使表單單獨成頁更好地展示表單信息減少其它信息的干擾。
案例:
總結
B端的業務比較復雜,不同的表單信息的復雜程度有所不同,需要根據實際業務的情況合理地選擇表單的展示方式,也需要考慮用戶的使用場景以及業務表單的關聯關系。
簡單且不具有強相關的表單可選擇平鋪,呈現方式可選擇彈窗
復雜且具有強相關的表單可選擇區域分組,呈現方式可選擇無遮罩層抽屜/擠壓
復雜且不具有強相關的可選擇標簽分組,呈現方式可選擇有遮罩層抽屜
具有先后順序的則選擇分頁,表單信息獨立可選擇分頁的呈現方式
(并非強制的表單設計選擇方式,需要合理考慮業務哦?。?
文章來源:站酷 作者:設計小余
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://m.skdbbs.com