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

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

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

          首頁

          3個技巧瞬間提升logo設計的價值感

          seo達人


          一、設計一個開放的圓

          圓是最完美的圖形,所以把很多東西設計成圓形都會很好看,logo也一樣,但如果設計成一個封閉的圓,可能會給人不夠靈活、缺少變化的感覺,所以,我們可以嘗試把logo設計成一個開放的圓,即只要一個半封閉狀態的圓,或者是設計一個不完整的圓,比如下面這些案例:

          圖片

          ▲ 由于這種logo屬于半封閉的圖形,所以也比較容易處理成正負圖形。

           

          把logo設計成一個開放的圓有以下幾個好處:

          ? 視覺平衡。因為圓形本身是對稱圖形;

          ? 視覺聚焦。圓形會讓人的視覺往中心集中;

          ? 有設計感。因為通常把一個圖形設計成圓形都需要簡化和規范,這會增加圖形的設計感。

           

          示例一

          幾年前我接觸了一個品牌名稱首字母為“s”的電子公司,也用這種方式做了一個logo方案,字母S加上圓。在下面的兩種組合方式中,很明顯第二個更開放、更有設計感一些。

          圖片

          但僅僅如此肯定還不行,一是這個S太普通,二是圖形沒有經過規范,所以我在草圖上嘗試了幾個方向,最終選擇了下圖來執行,簡單、抽象,在感性的柔和中夾雜著一點理性的堅硬。

          圖片

          對于這種簡約風的幾何圖形,通常都是通過采用圓形裁剪來制作,這樣會更快捷、也更嚴謹,在草圖的基礎上通過多次調整,最終確定了如下圖的輔助線(如果你的草圖不是很規范,那么就不必太遵循草圖)。

          圖片

          通過這些輔助線我們就能得到中間這個比較規范的“S”圖形。

          圖片

          運用AI中的路徑查找器中的工具,我們很快就能得到如下圖形,填上顏色這個開放的圓形logo就做完了。

          圖片

          在最終的圖形中,我們除了能看到圓和S以外,我們甚至還能看到握手和循環圖形,這些對于企業來說都是非常好的寓意,這也為我們寫標志說明提供了一些不錯的思路和依據。

           

           

          二、塑造矛盾空間

          矛盾空間是一種在三維世界中并不存在的二維圖像,矛盾空間的形成通常是利用視點的轉換和交替,在二維的平面上表現了三維的立體形態,我們熟知的埃舍爾就是這個領域的藝術大師。

          圖片

          這種手法也常常被用在logo設計中。

          圖片

           

          使用塑造矛盾空間設計的logo具有以下幾個好處:

          ? 有趣。帶有視覺欺騙效果的logo會讓人忍不住想多看幾眼;

          ? 富有藝術效果和創意。設計這樣的logo需要一定的空間感和想象力;

          ? 具有良好的寓意。比如無限、無止盡、可持續等。

           

          示例二

          我的一個朋友開了一家裝飾藝術品工作室,名字叫首工藝場,英文名為:First Technical Field,于是委托我設計一個logo,他是這樣說的:我沒什么要求,只要簡單、大氣、好看、現代、獨特、富有藝術氣息就好了,真的,我沒什么要求?!?

           

          這個logo其實并不好做,老實說,我當時也沒啥思路,于是我用品牌英文名的首字母在畫紙上隨意搗鼓,天知道我畫了多少稿,終于我發現用兩個字母F左右對稱排列,中間形成的空間剛好可以加入字母T。

          圖片

          這個圖形讓我想到了曾經看過的一件矛盾空間作品。

          圖片

          純二維的效果過于普通,我覺得可以嘗試在此基礎上加入矛盾空間效果,這樣會更符合設計需求,于是得到了下面這個圖形。

          圖片

          最后,在AI中用矩形工具進行規范制圖,于是就得到了下面這個矛盾空間logo圖形,客戶表示非常滿意,畢竟他給的實在太少了。

          圖片

           

           

          三、立體漸變

          即通過漸變色使圖形呈現出立體效果,這樣的logo也非常多,并且在前些年很流行。

          圖片

          雖然現在logo設計的大趨勢是扁平風,但是仍有不少設計師和客戶青睞這種立體漸變風,比如近兩年才面世的北京冬奧會logo、IE瀏覽器新logo等等。圖片

           

          因為這種風格的logo其優勢也是顯而易見的,比如:

          ? 美觀。這類圖形既有細膩的顏色變化,又有層次感,很容易得到驚艷的視覺效果;

          ? 有很強的品質感。這種圖形通常都需要倚仗曲線,再加之漸變色和立體效果,所以細節會比較豐富;

          ? 視覺沖擊力強。豐富的顏色變化和對比關系,可以大大加強圖形的視覺沖擊力。

           

          示例三

          第三個客戶是一家名叫東瑞的生物科技有限公司,主要是銷售酵素、膠原蛋白之類的產品,logo設計要求簡單、時尚、能體現行業屬性。對于這張logo,比較穩妥的做法還是運用品牌名的首字母來做,由于沒有英文名,所以我選擇了品牌名拼音的首字母“D”和“R”來做創意組合。

          圖片

          由于字母D是一個完全封閉的圖形,所以我想到了用正負形的方式來設計,即把字母R作為D的負形,行得通嗎?應該是可以的,因為大寫的字母R可以簡化成下圖效果,與字母D一結合就能得到我們想要的效果。

          圖片

          組合的方式有兩種,我個人更喜歡開放的圖形,并且我覺得第一種組合方式很普通,造型不是很好看,所以我選擇了第二種方向?,F在我們開始正式制圖。

          第一步:在AI中用矩形工具畫一個正方形,然后用直接選取工具把右邊的兩個直角拉成圓角,拉到最大。

          圖片

          第二步:把描邊加粗到一個比較合適的效果,主要考慮字母D的負形大小與描邊粗細的比例,是否符合字母R的特點,確定描邊粗細以后,將路徑擴展外觀,使其變成一個輪廓圖形,然后把左邊的直角也拉成小圓角。柔和一點更符合企業的調性。

          圖片

          第三部:畫一個直角梯形對字母D進行裁剪,梯形的寬度和傾斜角度是關鍵,盡量保證R的識別性和圖形的美觀性,裁剪完以后得到如下效果。

          圖片

          第四步:把圖形的部分轉角處也拉成圓角,然后給其填充一個藍色,到這里基本的造型就做好了。

          圖片

          但是這樣的效果還是有點過于普通,也體現不出行業特性,于是我想到了添加立體漸變效果。

          第五步:在現有的圖形基礎上畫如下兩個圓,我們的目的是要用下圖中兩條黑色的路徑對圖形進行裁剪,而這兩條路徑一定要很自然地融入圖形中,所以,畫圓要很講究,依據是找到圓與圖形的切點和交叉點,如右圖中的四個點。

          圖片

          第六步:在上圖基礎上用路徑查找器里面的工具對進行裁剪、合并等操作得到如下圖形,原來的圖形被弧線切割成了三部分。

          圖片

          第七步:給圖形的三個部分分別填上由淺到深的漸變色,使其呈現出立體效果,考慮到企業的行業屬性,我使用了藍色到青色、綠色到黃色、黃色到橙色三個漸變色,最終效果還可以。

          圖片

          logo圖形設計方案合集:

          圖片

           

           

          圖片

          logo設計得太常規容易被客戶說沒有品質感、體現不出企業或品牌的價值感,所以合理地使用一些技巧是有必要的,這會客戶會覺得你的logo設計還是花了一些心思的,看起來比較專業,所謂得套路者得人心,希望這篇文章對你有幫助。


          作者:蔥爺

          轉載請注明:學UI網》3個技巧瞬間提升logo設計的價值感

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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



          大廠搜索哪家強?這些交互設計值得你收藏學習!

          博博

          大體上分為兩類:彩蛋流和體驗流

          搜索的本質是什么?無疑是內容的召回和信息的推薦。

          可隨著時代的發展和行業公司的內卷,不少公司除了持續優化搜索結果與推薦外,在搜索的體驗和彩蛋上也是下了不少功夫,從而進一步加強自有產品的競爭力與用戶黏性。因此今天就來盤點一些,那有意思的大廠搜索交互。

          大體上分為兩類:彩蛋流和體驗流

          A.彩蛋流

          注重提升搜索過程中的趣味程度,以增加用戶的好感度與產品印象/口碑。行業代表:谷歌瀏覽器、百度瀏覽器

          1.谷歌瀏覽器

          可以說是搜索彩蛋的先行者,內置了很多搜索關鍵詞的有趣彩蛋,如娛樂角色:搜索【滅霸】,頁面右邊會打響指,相關字段會被’毀滅‘掉



          搜索【馬里奧兄弟】,右邊也有游戲里一樣的點擊彩蛋



          還有各種有意思的搜索結果比如搜:is google down(谷歌關閉了嗎),搜索結果優先顯示:NO



          再如搜索《銀河系漫游指南》的一句話:the answer to life, the universe, and everything。此時搜索結果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。



          而且在日常的節日、活動、熱點運營上,谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與,可以已經形成一個穩定、具有品牌感的企業文化了。

          如各種復活節、開學季、母親節動效。而且更多有趣、創意的設計案例,可上:有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。



          2.百度瀏覽器

          百度在搜索彩蛋里下的的功夫也不少,最著名的應該是搜索【黑洞】時,頁面上會出現黑洞的吸入特效。



          而且和谷歌相同,在其他的搜索關鍵詞上,百度也是埋下了不少彩蛋,比如:搜索【翻轉】,頁面會左右翻過來



          搜索【跳躍】,頁面會在上下跳動



          搜索【失重】,頁面上的字會飄起來?



          而在【活動運營】上,百度也是很有心地進行著創新設計,力求給用戶一種眼前一亮的感覺。比如每年的愚人節,搜索結果頁上都有‘調戲’用戶的創意設計,各種輕松調皮的畫風 給不少用戶帶來了新鮮感和趣味性。





          還有在【活動入口】的設計上也是特別有想法:在某年的圣誕節上,百度創新性地將活動入口’嵌套‘在結果頁卡片中間,用活動里的ip形象-雪人「抬著」結果頁卡片和在上面「滾動」





          用這種充滿創意+應景的的入口設計與引導方式,最大限度地降低漏斗,吸引讓更多用戶參與該活動。另外,百度搜索框上面的運營活動入口,也和谷歌有異曲同工之妙。



          而且更多有趣、創意的設計案例,可上:有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

          B.體驗流

          注重提升搜索過程中的交互體驗,以增加用戶的操作效率與產品易用性。

          代表:蘋果產品、夸克瀏覽器

          1.Apple/蘋果產品

          ·iPhone

          iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件,它還自帶了【匯率轉換和計算器】。在搜索框輸入【數學公式、匯率轉換】時會自動計算對應的結果。無需用戶額外打開計算器、瀏覽器,大大減少操作鏈路。



          在iOS的原生鍵盤里,可以根據輸入詞檢測+搜索對應的手機號碼:當你輸入 【打+我或通訊錄好友+電話】時,鍵盤上會自動顯示自己或好友的電話號碼,點擊號碼就能自動粘貼在輸入框中。



          用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼,大大提升操作體驗與效率

          ·Mac

          在Mac電腦的工具欄上搜索相關幫助時,系統會直接把該結果所對應的頁面位置調取出來并懸浮展示。用戶可以直觀地該結果在哪里,并減少尋找的操作路徑,免去多余操作



          在Mac電腦的‘系統偏好設置’里搜索幫助,在結果列表上會以聚光燈的形式展示各個結果入口。選擇具體某個結果時,該入口的聚光燈會更清晰些,特別容易找到搜索結果。



          2.夸克瀏覽器

          夸克瀏覽器除了傳統的「點擊搜索框」喚出輸入欄外,在屏幕任意位置下滑手勢同樣可以喚出搜索框。



          降低「需要往上手指移動,才能點擊搜索框」的操作成本,讓用戶更快、更精準地觸達搜索。

          而且在輸入網址或英文等字段時,搜索框下方會出現一個滑塊區。點擊就會變成長條的滑塊,拖拽滑塊即可改變光標位置。



          而且更多有趣、創意的設計案例,可上:有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

          讓用戶更方便地將光標快速移動到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克還會前置搜索結果, 比如在搜索框中輸入“某城市+天氣”的關鍵詞,上方就會以卡片的形式顯示該地區最近一周的天氣。

          用戶無需觸發搜索、進入結果頁才能看到想要查詢的信息。



          – END



          作者:和出此嚴      來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          獵聘 | 聊一聊IM改版4.0那些事~

          博博

          通過Q3不斷的努力,終于把IM4.0的這個硬骨頭成功拿下,下面就復盤下這次IM4.0的設計過程吧~


          作者:不是作家      來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          Web端工具如何設計「保存」

          博博

          前言

          數據保存是Web端工具的基礎功能,一般在產品和技術框架設計之初就已經確定了數據保存的方式,后續不太會頻繁更改。

          正因為如此,在日常需求迭代中,設計師很容易忽略數據保存的過程,也很少質疑當前的保存機制是否合理,但是當需要設計新模塊或產品時就會對保存有疑惑。

          此外,保存也是一個受技術限制較大的領域,設計師需要對保存的技術類型有基礎認知,因為它會影響保存生效的邏輯和交互形式。

          本文將會基于個人經驗,從設計表現和技術實現的角度聊聊Web端工具的數據保存。

          「Chapter One」保存的對象

          對于Web端工具產品來說,保存的對象可分為「文件數據」、「設置數據」、「用戶行為數據」。

          1.1 文件數據

          「文件數據」是相互獨立的內容,比如酷家樂的一個方案、Figma的一個文檔都是文件數據,在文件A中觸發保存并不會影響到文件B。文件數據是最主要的用戶資產,若丟失會給用戶造成很大的損失。

          1.2 設置數據

          「設置數據」分不同的維度,主要有用戶級別、組織級別、設備級別這三種。

          用戶級別:數據保存在當前用戶的賬號下,同一個用戶的所有文檔都會應用該設置,比如酷家樂云設計工具的偏好設置。

          組織級別:數據保存在組織級別,可能由組織管理員設置,同一個組織下的所有用戶都應用該數據。

          設備級別:數據保存在設備(瀏覽器)上,同一個設備上的不同賬號、不同文檔都會應用此數據。區別用戶級別和設備級別的保存很簡單,只要清空瀏覽器緩存,看看數據是否變化即可。

          一般來說,「設置數據」也是用戶資產。但是設備級別的數據存在丟失的可能性,一般情況下不會存儲大量重要的數據。

          1.3 用戶行為數據

          技術上經常把「用戶是否進行過xx行為」這樣數據保存在用戶級別或設備級別,用于差異化的引導、運營方案。這類數據雖然不能被視為用戶資產,但對于產品設計來說至關重要。

          <h2 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin: 8px 8px 16px; font-size: 20px; white-space: normal; line-height: 1.5; letter-spacing: -0.008em; color: rgb(23, 43, 77); border-bottom-color: rgb(255, 255, 255); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" background-color:="" rgb(255,="" 255,="" 255);"="" class="js_darkmode__19" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h2-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">

          「Chapter Two」保存的位置

          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據數據保存的位置,可以分為兩類:后端保存和前端保存。</span></span>
          </p>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.1 后端保存</span></span></strong>
          </h2>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">后端保存是最常見的保存方式,觸發保存后,將方案數據上傳并存儲在服務器(云端),需要聯網。</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性:</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.依賴網絡;</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.數據量大時會耗性能,可能會阻塞操作</span></span>
          </p>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.2 前端保存</span></span></strong>
          </h2>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">前端保存是指以緩存 (cache) 的方式將數據保存在瀏覽器中,一般采用的技術方案是 indexDB(如Figma)。即使將瀏覽器關閉,下次打開時仍能夠恢復數據。</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性:</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.有大小限制(幾百兆);</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.必須要同設備,且不能清除緩存;</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.有時間上限(大部分瀏覽器最多可以保存 30 天)</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">還有一種前端的臨時保存,即會話保存(sessionStorage),通常為了方便單次會話而設置,例如記住選項狀態、輸入框的內容等,但只要關閉或刷新標簽頁這些數據就會被清除。從嚴格意義上來說,會話保存不是真正的保存,本文不對此展開討論。</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">Web端工具一般會以后端保存為主,前端保存為輔,這樣能夠最大程度避免因網絡或服務不穩定造成的數據丟失。</span></span>
          </p>




          <h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
              「Chapter Three」保存的觸發機制
          </h1>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">從保存的觸發維度,可以將保存行為分為自動保存、手動保存、提示保存。</span></span>
          </p>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.1 自動保存</span></span></strong>
          </h2>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據保存的觸發條件,可將自動保存分為以下3種:</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a. 定時觸發保存以一定的時間間隔(通常采用幾分鐘 ~ 1 小時)周期性地自動觸發保存。這是酷家樂云設計工具目前采用的保存方式。這種自動保存能減少因軟件崩潰、斷電等特殊原因造成的數據丟失的影響,但仍無法避免數據丟失,需要手動保存作為輔助。</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 條件觸發保存特定的用戶行為會觸發方案自動保存。</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">具體哪些行為需要觸發保存,則要結合業務邏輯和技術實現來共同確定。要注意的是,這類保存通常因技術原因而采用,用戶對其沒有預期,盡量不要讓它打斷或干擾用戶的操作。</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 實時保存只要數據發生改變,立即觸發自動保存,無需用戶手動保存(盡管一些產品考慮到用戶習慣,仍會保留手動保存的交互)。部分產品會用間隔幾秒鐘的自動保存(如 Microsoft 365),效果基本等同于實時保存。實時保存能最大程度避免數據丟失,是Web端工具理想的保存觸發方式。但因為技術原因,并非所有工具都能夠做到實時保存。</span></span>
          </p>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.2 手動保存</span></span></strong>
          </h2>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">手動保存指用戶通過額外的操作觸發保存,通常為點擊「保存」按鈕或快捷鍵。部分有實時保存機制的工具不需要額外的手動保存(如Figma),但對于沒有實時保存的工具來說,手動保存的設計至關重要。</span></span>
          </p>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.3 提示保存</span></span></strong>
          </h2>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">即便有手動保存,用戶還是可能忘記保存。當用戶離開工具或某個環境時,若程序監測到有未保存的內容會丟失,則將此風險暴露給用戶,用戶可以選擇保存或者直接離開。如果用戶通過直接關閉瀏覽器/標簽頁的方式離開,也可以在瀏覽器上設置類似的兜底提示對話框,但是對話框上的文案無法定制。</span></span>
          </p>



          那如何選擇保存的觸發機制?

          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.「實時保存」保障性最好,在技術允許時推薦采用;</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 因技術原因無法采用「實時保存」時,推薦使用「定時觸發保存」 + 「手動保存」共同作用,也能較好地保障數據;</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 「條件觸發保存」通常是因技術原因而采用,用戶對其沒有預期,盡量不要讓它打斷或干擾用戶的操作;</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">d. 在數據有丟失風險的時候需要提示用戶保存,可根據用戶的操作路徑選用工具自身的提示或瀏覽器的提示。</span></span>
          </p>
          <h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
              「Chapter Four」保存的觸發設計<br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" />
          </h1>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">4.1 觸發原則</span></span>
          </h2>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">在開始聊具體的設計之前,先提出保存的 2 點設計原則:</span></span>
          </p>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
          </h2>
          <h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">防錯</span></span>
          </h3>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存是對方案數據的 最重要的 保障機制。穩定的系統需要有可靠的保存機制,盡量避免各種原因造成的方案數據丟失。</span></span>
          </p>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
          </h2>
          <h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">狀態可見</span></span>
          </h3>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存的反饋需及時有效,讓用戶知道當前方案的存儲狀態,如果有異常也需要第一時間告知,并給出可行的解決方案。</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">引用《<em style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">微交互</em>》一書中提到的“觸發器”概念,可以將保存作為一個觸發器。觸發器是啟動一系列動作的原點,分為系統觸發器(系統被動觸發)和手動觸發器(用戶主動觸發)。</span></span>
          </p>
          <h4 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--detail-content-size);position:relative;line-height:1.8;word-wrap:break-word;caret-color:#222222;color:#222222;font-family:&quot;">
          </h4>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.2 系統觸發器</span></span></strong>
          </h2>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對系統觸發保存來說,主要需確定2個點,何時觸發、觸發頻率。對Web端工具來說,有3種主要的觸發模式:</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.定時觸發</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">一個獨立工具一般只有一個保存觸發間隔設置,其間隔范圍很廣,可以是幾秒鐘、幾分鐘,甚至一個小時。一般會暴露給用戶設置。建議產品設計師根據技術現狀設定合理的時間,如果保存對性能有較大消耗,過于頻繁的保存也會影響用戶體驗。可通過選擇器給用戶幾個合適的選項,選項之間的時間間隔依次變大,總選項數不超過 5 個。</span></span>
          </p>



          某設計工具偏好設置中的保存時間設置

          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b.條件觸發</span></span>
          </p>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">特定的用戶行為也可觸發自動保存,如酷家樂云設計工具環境切換、新建樓層,水電工具的智能設計等,都會觸發方案保存。以下是一些常見的「條件觸發保存」時機,這些時機是由技術能力、業務要求共同決定的。設計師需要考慮如果這些時機觸發了自動保存,對用戶的操作會用什么影響。</span></span>
          </p>



          c.實時觸發

          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">現在已經有很多在線工具(如 Figma)實現了實時觸發保存,對用戶來說可以不用再理解保存這個概念,是一種認知上的減負,并且這種方式對數據保障的效果也最好。但是,仍然有設計師提出這種體驗上的風險,比如沒有容錯余地、頻繁保存造成的干擾和系統壓力。</span></span>
          </p>
          <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
              <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.3 手動觸發器</span></span></strong>
          </h2>
          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對保存來說,「手動觸發器」一般來說是一個保存按鈕。在沒有實時保存的創作類工具中,手動保存按鈕的設計至關重要,一般會放在界面上方較顯眼的位置,并設置快捷鍵 (Ctrl+S),方便用戶操作。</span></span>
          </p>



          酷家樂云設計工具的保存位于頂部欄第一個分區

          <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
              <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">而對于管理類工具,保存按鈕一般位于頁面下方,因為用戶一般從頁面上到下確認完內容后再進行保存。</span></span></span>
          </p>



          酷家樂賬號設置頁面

          <h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
              「Chapter Five」保存的反饋設計
          </h1>

          <h3 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin-top: 10px; font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin-left:="" 8px;="" margin-right:="" 8px;"="" class="js_darkmode__98" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h3-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">

          5.1 成功反饋

              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">a.自動保存的反饋對于自動保存,當保存結果無異常時,盡量減少對用戶的干擾,盡量不使用全局提示 (Toast) 反饋。比較場景的做法是在工具某個固定位置,用圖標或文字的狀態變化作為反饋。</span></span>
              </p>



          當某些條件觸發保存時,甚至不需要讓用戶感受到保存的發生,因為用戶對保存是沒有預期的,建議將保存的過程與其他過程合并。

              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如說從云設計工具進入施工圖時,因為技術原因需要保存方案,但可以將保存方案的進程與施工圖加載的進程合并。</span></span>
              </p>



          b.手動保存的反饋對于手動保存,當保存結果無異常時,可使用全局提示(Toast)告知保存進度和保存結果,也可以用「保存」按鈕的狀態變化作為反饋。

              <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
                  <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">5.2 異常反饋</span></span></strong>
              </h2>
              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當保存有異常時,應即時給予且較明顯的異常反饋,并幫助用戶排查問題。在設計保存異常反饋時,需注意以下 3 點:</span></span>
              </p>
              <ul style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-position:initial;list-style-image:initial;caret-color:#222222;color:#222222;font-family:&quot;font-size:14px;">
                  <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
                      <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">哪些數據保存異常,是全局數據還是個別模塊的數據,是否會因為非核心模塊的保存異常而影響到整體用戶進程,是否可以通過其他方式(如前端保存)讓用戶繼續操作</span></span>
                  </li>
                  <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
                      <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">保存異常的原因是什么,用戶可以通過何種操作解決問題(檢查網絡?重新登錄?)</span></span>
                  </li>
                  <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
                      <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當從異常恢復后,應該如何提示用戶</span></span>
                  </li>
              </ul>



          圖片a



          圖片b



          圖片c

              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  圖片
              </p>
              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  Figma與保存異常相關的反饋 a.保存異常反饋;b.異常原因與解決方法;c.異常恢復提示
              </p>
              <h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
                  總結
              </h1>
              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">最后總結一下,當我們接手一個新產品、新模塊、新需求的設計時,應該如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">設計保存:</span></span></span>
              </p>
              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">首先,確定保存對象,是文件數據、設置數據,還是用戶行為數據。一個完整的產品一般都會包含以上三者,但對于某個具體的需求,可能只涉及其中一兩種。</span></span>
              </p>
              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">列出保存對象后,可以與產品、技術等團隊成員一起確定保存的位置(云端、瀏覽器)和保存的觸發機制(自動保存、手動保存、提示保存)。建議根據用戶流程在不同的觸點用不同的觸發機制,以最大程度保障數據安全。</span></span>
              </p>
              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">接下來,根據保存對象、保存觸發機制,設計保存的交互,包含保存的觸發、保存的規則和保存的反饋。</span></span>
              </p>
              <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
                  <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">最后,以用戶使用工具的流程再檢查一遍數據的產生和存儲,是否會有遺漏,設計保存兜底。</span></span>
              </p>







          作者:酷家樂UED      來源:站酷



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          十大心理學原理在產品設計中的應用

          博博

          對于產品經理、設計師和運營人員,心理學都是必須要補的一門課程。

          可能很多同學都犯過和小摹相同的錯誤——在各種商城放“神券”的時候屯一大堆專業書籍。實際上,心理學的書籍你大概只要看到第三本,就會發現翻來覆去講的就是那么幾個淺顯易懂的道理,而且大部分都是你在日常生活中就能觀察和感受到的。

          基礎心理學(消費者心理學,社會心理學,傳播和行為心理學等)的概念都不難,但如何精妙地運用在自己的專業上則非常考驗使用者的功力。

          為什么產品、設計、運營都需要學習心理學?

          因為他們工作的本質都是和“人”打交道——用產品方案、視覺內容和活動規劃來影響用戶的決策、行為和心理。

          你可能會覺得“依靠數據來統計用戶的行為再針對性決策”會更客觀,但實際上想得到靠譜的數據和正確的結論一點也不輕松,甚至很多公司根本不具備開展這類型調研的條件。

          在這種情況下唯一的辦法還是洞察用戶并主動決策,此時基礎心理學原理就是你進行判斷的重要依據。

          本文為大家梳理了十大著名的心理學原理,這些概念來自于多本心理學的經典名著,小摹進行了適當整合。

          一、懷舊思維

          簡單來說,就是人們在絕大部分時候都會遵循歷史慣性,更愿意相信過去的結論。

          這也解釋了為什么現代商業中,品牌一直是一項核心競爭力:如果一個品牌曾經贏得了消費者的信任,那么消費者往往愿意持續選擇這個品牌的產品。

          在產品設計中,懷舊思維有著極其豐富的應用場景。比如軟件產品的交互對于操作上的創新要非常慎重——快捷鍵、交互邏輯、界面布局等盡量和行業中主流產品一致,會更容易讓新用戶接受。

          比如我們的原型設計工具“摹客RP”,界面布局借鑒了國外的UI工具Figma和Sketch。雖然產品主打的方向并不相同,但遵循業界已經約定俗成的定式設計,在新用戶上手的角度有很大的優勢。

          二、暈輪效應

          暈輪效應原指人際交往中,人身上表現出的某一方面的特征,掩蓋了其他特征,從而造成人際認知的障礙。

          比如有的老年人對青年人的個別缺點,或衣著打扮、生活習慣看不順眼,就認為他們一定沒出息;有的青年人由于傾慕朋友的某一可愛之處,就會把他看得處處可愛,真所謂"一俊遮百丑"。

          暈輪效應是一種以偏概全的主觀心理臆測,和上面的懷舊思維類似,屬于一種思維的定式,因為這種方式大腦在決策時會更輕松。

          對于產品規劃者,尤其要想清楚自己的核心優勢和賣點是什么,不必完美主義地去追求面面俱到,因為如果最突出的優點能打動用戶,即使有缺點也很容易被用戶忽略。

          三、習得性無助

          簡單地說,如果用戶在過程中產生了“無論如何都無法改變現狀”的感受,容易陷入深深的絕望和悲哀。

          在實驗中,經過訓練的狗本可以逃避實驗者加于它的電擊。但是,如果狗以前受到過不可預期(不知道什么時候到來)且不可控制的電擊(如電擊的中斷與否不依賴于狗的行為),他們就會徹底躺平并不再逃離。

          狗之所以表現出這種狀況,是由于在實驗的早期學到了一種無助感。

          也就是說,它認識到自己無論做什么都不能控制電擊的終止。

          人如果產生了習得性無助,將很快拋棄當前讓他產生失望感的產品。這個原理解釋了為什么現在商品或者服務往往都要為用戶提供非常順暢的溝通方式(比如熱線電話)。

          如果你比較了解國外在線軟件行業趨勢,就會發現很多的新興產品都已經不滿足于提供官方的Email地址,而是直接提供Discord鏈接(可以理解為在線聊天室)。

          及時的直接溝通可以避免用戶產生絕望感,增加產品的生存幾率。

          四、貝博規率

          其實用一個成語就可以形容這個規律:得寸進尺。在實際場景中,只要想辦法讓用戶先接受了一個小要求,之后就更可能讓他接受一項更大、更不合意的要求。

          原始的實驗中,心理學家讓兩位大學生訪問郊區的一些家庭主婦。其中一位首先請求家庭主婦將一個小標簽貼在窗戶(這是一個小的、無害的要求)。

          兩周后,另一位大學生再次訪問家庭主婦,要求她們在院內豎立一個呼吁安全駕駛的大招牌(該招牌很不美觀,這是一個大要求)。

          結果答應了第一項請求的人中有55%的人接受這項要求,而那些第一次沒被訪問的家庭主婦中只有17%的人接受了該要求。

          這個實驗說明,如果想要用戶達到最終的目標,可以先適當設置一些和最終目標相關,但完成難度小得多的目標,循序漸進地引導,可以大大提升轉化率。

          這種原理在各種產品的銷售的場景的可謂是遍地開花。

          比如汽車、不動產等高價的商品,往往會給打出“來訪即送好禮”的方式吸引用戶前往,然后通過用戶試駕、樣板房體驗等環節引導用戶去體驗和接納,客戶有意向后,也只會要求付定金(而不是全款)......這樣繁復的流程都是為了把困難的目標拆解得更細小。

          五、主觀性證詞

          心理學研究表明,很多證人提供的證詞都不太準確,或者說是具有明顯的個人觀點、傾向性和意識。甚至,證人對他們的證詞的信心和證詞的準確性沒有足夠的相關性。

          結合這個原理,就能更好地理解為什么問卷或是訪談等經典的調研方法并不一定能收集到足夠準確的信息,對于一些主觀性較強的問題,個人的傾向會極大的影響答案的可信度。

          正確的做法是,盡量避免在調研中出現主觀性過強的題目,如果無法避免,盡量將題目拆解為多項能被客觀量化或評估的問題。如果沒有考慮用戶本身對于產品的傾向性,很可能被言過其實的“證詞”誤導出錯誤的結論。

          六、馬太效應

          馬太效應是指好的愈好,壞的愈壞,多的愈多,少的愈少的一種現象,出自圣經《新約 | 馬太福音》中的一則寓言。

          這個效應常為經濟學界所借用,反映貧者愈貧,富者愈富,贏家通吃的經濟學中收入分配不公的現象。

          類似的理論還有很多,比如二八定律(20%的頭部公司掌握80%的市場份額,20%的優質客戶貢獻80%的銷售收入,等等)。

          這個原理告訴我們,要想讓產品在某一個領域保持優勢,就必須在此領域迅速做大。

          當你成為某個領域的領頭羊時,你也能更輕易地獲得比弱小的同行更大的收益。而若沒有實力迅速在某個領域做大,就要不停地尋找新的發展領域,才能保證獲得較好的回報。

          七、從眾行為

          營銷和促銷手段中最重要心理原理之一,即:人們更容易相信被多數人接受的選擇。

          我們經常可以看到路邊兩家餐廳,一家門口排滿了等待的食客,另一家卻一桌客人都沒有,巨大的反差往往讓后面到來的客人寧愿等待也要選擇人多的餐廳。

          關于這種心理,哲學家認為是人類理性的有限性,社會學家認為是人類的集體無意識,而經濟學家則從信息不完全、委托代理等角度來解釋。但需要特別注意的是,從眾行為并非絕對的,因為在追求個人喜好上,人類往往也有很多個性的需求,從眾行為和個性追求往往是同時存在的。

          從眾行為最典型的應用方式就是密集推薦或評價,現在的書籍的扉頁動輒幾十條推薦語,在線服務往往也會引用大量網友的好評,來證明自己的價值。

          新產品在推向市場時,先多收集一些用戶的正面評價,宣傳時會非常有利。

          八、比較心理

          這是消費者心理學最經典的原理,簡單來說就是把一個200元的產品和一個100元的看上去差不多的產品擺在一起,你就會覺得100元這個超級劃算,很容易產生購買的沖動。

          對于每個人來說,所有的認知,價值觀和結論都是建立在【比較】的基礎上得出的,所以,影響一個人的認知,最有效的辦法就是創造對比的機會。

          價格頁面最喜歡運用比較心理,因為比較心理可以幫助他們重新設定消費者的認知。

          常見的做法比如拉高產品的價格再做夸張的折扣讓用戶覺得這個商品現在超級劃算;或者在主推產品旁邊放置兩個明顯性價比不佳的次品,讓用戶對主推產品的效果感知更加強烈。

          此外,在產品介紹時也可以將競品的參數列在表格中和自家的產品進行對比(當然,這個表格中的項目都是挑選過的),這樣更容易體現自家產品的優勢。

          九、投射效應

          人們在日常生活中常常假設他人與自己具有相同的屬性、愛好或傾向等,心理學家稱這種心理現象為"投射效應"。

          "以小人之心度君子之腹"就是一種典型的投射效應。當別人的行為與我們不同時,我們習慣用自己的標準去衡量別人的行為,認為別人的行為違反常規。

          了解這一點對于產品的策劃者們非常重要:用戶的想法很可能和自己不同(即便你認為自己在這個領域比其他人都專業得多),但仍然需要被尊重。

          所以近年來特別流行用戶體驗、同理心這樣的詞匯,產品應該以真實用戶的體驗滿意度作為參考指標,設計者應該盡可能地以設想自己是一個目標用戶時,會有什么反應,否則僅靠自己的“臆測”,創造出來的產品很可能和真實需求脫節。

          十、賭博心理

          以小博大的感覺是一種強上癮體驗,人們只有在輸的時候才想到離開,少有在贏的時候離開。這個就是賭場盈利的本質模式。

          由于真金白銀賭博是法律明令禁止的,所以產品設計角度一般都是借助積分、代幣等方式來給用戶制造“抽獎”的機會。

          對于國內而言,氪金手游和盲盒就是典型的兩種應用場景,前者往往會設定一個極低的概率讓玩家獲得珍貴的虛擬物品,后者則是讓消費者有小概率獲得稀有款式的手辦,引誘顧客購買超過自己需求的商品。

          對于產品設計人員來講,賭博機制可以說是一個潘多拉魔盒,通常不建議去使用和嘗試。人人都愛KPI,但也要取之有道,職場人都應該有自己的底線。





          作者:jongde來源:    站酷



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          設計法則|打造極致的用戶體驗的秘訣-尼爾森十大可用性原則!

          博博

          推薦一個比較實用的設計法則,可以說現在的任何互聯網產品都能看到這些理論的實踐,本次主要想以比較多的案列進行實戰分析。


          在日常使用移動端或PC端產品時,不知你有沒有這樣的體會?



          出現這些問題的,如何解決呢?

          推薦一個比較實用的設計法則,這個法則已經有很多的文章說明了,可以說現在的任何互聯網產品都能看到這些理論的實踐,本次主要想以比較多的案列進行實戰分析。



          尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上,提煉出的十項交互設計原則。被廣泛運用于網頁、APP以及各種人機交互領域。

          要注意的是,這10項原則是啟發式(heuristics)的、廣泛的經驗法則,可以指導我們更具價值的思考界面設計。

          設計原則都可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解各種設計原則,讓設計師在做設計的時候可以找到更好的解決方案,提高用戶的使用體驗。

          理論介紹

          雅各布·尼爾森(Jakob Nielsen)是畢業于哥本哈根的丹麥技術大學的人機交互博士,被譽為可用性測試的鼻祖,2006年4月,并被納入美國計算機學會人機交互學院,被賦予人機交互實踐的終身成就獎。 

          尼爾森于1995年1月1日發表了「十大可用性原則」,該原則被廣大設計師奉為教科書般的存在。雖然20多年過去了,但是對于現今的產品體驗設計仍然具有很大的參考意義。







          人機交互的基本原則是,讓系統和用戶之間保持良好的溝通和信息傳遞。系統要告知用戶發生了什么,預期是什么,如果系統不能及時向用戶反饋合適的信息,用戶必然會感到失控和焦慮,不知道下一步要做什么。

          界面狀態分為兩種:靜態和動態。

          靜態即用戶通過界面查閱,明確知道自己的位置、處于何種狀態,或者知道界面數據的狀態。動態即用戶在進行界面操作時,系統應當立刻提供反饋,告訴用戶該項操作被系統接受,讓用戶對操作感知及判斷。

          該原則在設計中的體現:

          1、狀態可見性-位置可見

          告訴用戶處在系統的什么位置,特別是對于新用戶,需要提供必要的信息,否則容易迷惑。比如:導航菜單、面包屑、標簽頁、步驟條、分頁器等等。

          相比于C端產品,B端產品在頁面層級往往更為復雜。因此,讓用戶明確當前所處的位置尤為重要,這也就突顯出了導航的重要性。設計師在設計的過程中,要注意提供上下文線索,避免用戶迷路。



          2、狀態可見性-進度條

          告知用戶系統運行的狀態信息,比如進度、內容加載時,增加用戶掌控感。

          最經典的案例莫過于Loading頁的進度條了,無論是加載頁面還是下載內容,一個清晰的進度條可以讓用戶隨時掌控進度,同時也可以用具體的數字更加明確的表示,比如:安裝程序時顯示進度條,并預估還需要多久結束,播放音樂時顯示進度條,并提示預估剩余時間。



          3、狀態可見性-操作反饋

          系統適當反饋是用戶界面設計的最基本準則。當用戶在與系統進行交互時,應當在各個階段為用戶提供必要、積極且即時的反饋,同時也要避免過度反饋打擾用戶。可以使用的形式包括但不局限于:

          操作反饋:點擊頁面跳轉、按鈕點擊狀態、警告提示、輸入反饋等等;

          結果反饋:非模態彈窗,輕量化感知系統內容反饋。(反饋內容應盡量不要打斷用戶操作,所以一般采用toast形式,反饋結果后及時消失。)

          情感反饋:搜索沒有結果時,沒有數據等等空狀態。

          還可以通過元素的顏色位置、界面元素變化、文字、聲音和震動,甚至動效等多種形式給予用戶提示反饋。

          注意,越是消極的反饋,比如網絡連接失敗、系統錯誤等,越是要及時告知用戶,同時提醒用戶采取適當措施。比如:1、提交表單時,如果校驗失敗,則在填寫有誤的內容旁邊提示錯誤原因;2、程序未響應時,系統會讓用戶選擇是關閉程序還是等待程序響應;



          4、狀態可見性-合理的時間

          系統應該在合理的時間內,給予用戶適當的反饋,讓用戶了解正在發生的事情。

          當系統反饋時間小于1秒,通常正常反饋即可;相反長于1秒時,我們通常會通過加載動畫、占位符、分步加載等方式,減緩用戶等待的焦慮感。如果超過10秒還沒有得到相應,那么通常會認為這次請求是失敗的,需要給用戶失敗提示。

          例如:下載提示、刷新提示、支付提示、新頁面加載提示等。







          系統盡可能貼切用戶所在的真實環境。把復雜的系統語言換成用戶看得懂的語言;環境貼切原則的根本目標是讓用戶可以快速上手產品,降低學習成本。

          《iPhone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外,還應該使用易懂和約定俗成的表達。

          該原則在設計中的體現:

          1、環境貼切-易理解的語言

          這里說的語言不僅僅包括文案層面的語言,還包括產品的設計語言(圖形、配色、風格、動效、手勢等)設計語言都應該是易于用戶理解和認知的。產品使用的語言應該是目標用戶能夠清晰理解的。如果用戶不能理解,他們會感到被忽視和受挫敗,許多人將選擇其他產品完成目標。

          從設計心理學角度來講,用戶在使用產品的過程中,其大腦會“優待”較常用的記憶內容和操作形式,有意抑制那些相似但不常用的內容,以便減輕認知負擔,防止混淆,這種習慣從某種程度上來說屬于“熟知記憶”。

          比如細分市場的產品,針對中老年、青年、兒童的產品或商務、娛樂的產品,都要分別使用符合自己的定位的語言。



          反面案例就是windows系統出錯了頁面,一堆亂碼,看不懂又很慌張,就很不友好。另外還有一點,很多大公司的app都會針對他們不同國家的用戶群體進行各種語言的翻譯處理。

          為了照顧不同國家的用戶的使用習慣對頁面結構布局,風格,語言,字體,包括交互方式都會做特殊處理。這就是場景貼合原則。

          2、環境貼切-模擬現實世界對象

          模仿現實世界的產品或者使用映射,能夠利用人們現有的知識,可以顯著的降低用戶的認知和學習困難,并增加他們的使用興趣。

          比較好的案例就是iOS原生的計算器、指南針,微信紅包都是模仿了現實世界的產品。



          3、環境貼切-符合現實世界隱喻

          從現實世界中借鑒的設計元素可明顯降低用戶的認知和學習難度,并且增加興趣。最有代表性的就是網易云的音樂播放界面圖形隱喻表達。美團APP的母嬰類目icon的設計非常有趣,且非常容易理解和使用,讓人印象深刻。



          4、環境貼切-操作手勢符合聯想

          使用的操作手勢,應該是用戶自然就能聯想到的,不要創造、更改操作手勢的意義。


          5、環境貼切-自然的動效

          動效的加載樣式應符合自然規律,需要平緩過渡,而不是生硬的加載效果。比如:網易云音樂播放時唱片轉動、停止播放時唱片自動移開,有趣且有效。




          用戶在使用產品的過程中,誤操作是經常發生的事情,系統應提供撤銷和重做功能,讓用戶具有對產品的控制性與自由度。

          用戶可控原則的根本目標是讓用戶可以在界面自由操作,而且無需為操作不當承擔責任。

          該原則在設計中的體現:

          1、可控原則-可自由導航

          清晰便捷的導航方式,使用戶可自由控制返回和跳轉的頁面。

          由于B端系統的復雜性,有些功能的層級會比較深。彈窗A中的某個操作可能會觸發彈窗B的彈出,如果彈窗A和B承載的功能具有父級和子級的關系,同樣需要考慮「返回」的功能以及清晰的層級關系。

          2、可控原則-可自由返回撤銷

          用戶在使用系統的過程也是一個試錯的過程,系統要讓用戶覺得自己的行為是可控的,可以犯錯,并且在犯錯之后可以反悔。用戶在使用產品時可以自由進退,遵循從哪里來就返回到哪里去的原則。當用戶誤操作時要給用戶提供撤銷、取消、重做等相關功能。不可逆的操作要給用戶明顯的提示。

          比如微信聊天是可以撤回的,并且撤回之后還支持重新編輯;對于我這種打字總是出錯的人簡直就是福利。iphone相冊刪除照片后,支持在短期內找回;在word中編輯文檔時,支持撤銷和恢復,保存的同時,還能查看歷史保存記錄。



          回收站功能:讓用戶更有自由度,增加用戶安全感,可控的找回誤刪除資源。



          3、可控原則-不可逆轉的操作需要警告

          系統在重要的不可逆轉的操作需要給用戶提供二次確認或者撤銷的功能,這樣可提高用戶的操作可控性。在產品設計上,防止用戶常見的誤操作。比如很多產品在涉及到內容的刪除操作時,經常會有彈窗提醒,讓用戶再次確認。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因為操作帶來心理負擔,從而提升操作可控性。

          比如iPhone ios系統:

          1、常見的二次確認主要可以通過以下方式實現:通過文字提示,用戶閱讀后點擊是與否來進行下一步;

          2、通過動作,用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作;

          3、通過身份校驗,用戶需要提交個人身份信息以完成校驗;







          整個系統要保持產品結構架構、導航、用語、色彩、操作行為交互的一致性與標準性,遵循平臺慣例與行業標準。我們在設計中常見的制作平臺規范,其實就是為了保證平臺設計的一致性。

          一致性原則的根本目的是保證產品的專業性,給用戶帶去統一的體驗感受。

          該原則在設計中的體現:

          1、一致性-產品內部一致

          遵循產品內部的慣例,可幫助用戶快速學習使用產品功能。產品內部的一致性包含:產品功能框架、文字、設計風格、布局、反饋等等。

          比如:小熊藝術app,一款針對孩子學習美術的app,不管是首頁、個人中心以及加載等頁面,風格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機出現,banner、加載,課程動畫中等。不僅風格一致性、布局、反饋等產品內部保持一致性,也形成了統一的品牌傳達。




          但是,有時候為了達到產品目標,偶爾也會故意采用不一致的設計。

          比如:常見的對話框都將“確定”按鈕放在右邊位置,所以用戶在操作時,很容易產生條件反射,順手點擊右邊按鈕,然后才突然發現自己點錯了。雖然看起來有些別扭甚至很多人不喜歡,但是很有效,這種設計在軟件卸載、App取消會員訂閱等操作中非常常見,主要是為了做一些心理暗示和引導,避免用戶卸載或退訂。



          2、一致性-交互行為一致

          交互和用戶的習慣一致,意味著用戶不再需要重新學習,各種應用之間的切換沒有學習成本。我們在前期已經培養好用戶的使用習慣,那么就不要輕易改變,減少用戶的認知成本與學習成本。

          例如:常見的頁面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。



          3、一致性-迭代產品一致

          當產品線進行更新迭代的時候,應該保留用戶既有的交互和操作習慣,用戶在上一個版本形成的交互認知在下一個版本是否能被沿用,這對于用戶來說在產品體驗上會造成很大的干擾。

          比如微信的多年的迭代,底部tab功能一直都是這樣,主要功能入口一致沒有變化,就體現了迭代產品的一致性。


          4、一致性-同一團隊/公司產品線一致

          Office軟件中包含的各個產品,其界面布局和設計風格都保持了高度一致,如下圖所示是PowerPoint和Word的界面,可以看出,二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標圖形,都是高度類似的。



          5、一致性-設計語言一致

          遵循統一的產品設計規范/邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。確保整個系統的結構一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設計語言都遵循同一套設計規則。

          比如,產品內相同顏色的反復出現,為產品打造視覺錘符號,強化產品在用戶心中的記憶點。符合平臺設計規范,

          蘋果系統參照人機交互設計指南設計規范,安卓系統參照Material Design設計規范,或者直接參照自己團隊的的設計規范,應該遵循慣例,并且保持系統的一致感,不要盲目地標新立異。



          6、一致性-業內產品保持一致 

          不知道你發現了沒,現在的電商、音樂、社交等等app越來越一樣了,一樣的交互,一樣的排版設計,基本上都遵循著類似的交互邏輯和視覺元素。


          為什么會這樣?同類軟件設計的趨同化,未必不是一件好事?

          與業內產品保持一致,意味著用戶不再需要重新學習,就可以在各種應用中自由切換,用戶學習成本的降低,也意味著我們獲客成本從某種程度上被降低。而這些約定俗成的規則和流程都被用戶不自覺地印刻在大腦中,成為一種自然的習慣,而獨特的設計,截然不同的規則,則常常會成為習慣以外的東西,引起混亂,讓初次上手的用戶感到受挫和沮喪。

          如,在App底部的導航圖標中,“首頁”永遠排在第一個,個人中心(“我的”)永遠排在最后。并且對于類似“首頁”“購物車”“訂單”等常見按鈕,不同App的設計樣式都非常相似。如下圖三個不同音樂app的對比圖:



          如果你特立獨行地把個人中心放在第一個位置,或者采用奇怪的圖標作為個人中心的icon,用戶使用時肯定會覺得別扭。





          防錯原則的根本目標是阻止錯誤行為,避免進一步犯錯,指引用戶正確的完成操作行為。

          「防止錯誤」主要分為三個階段:錯誤行動發生前,引導用戶向正確的方向前進;用戶觸碰到危險操作時給予提示;危險操作發生之后,提供撤回的入口。

          該原則在設計中的體現:

          1、在執行危險操作前做設計:

          比一個優秀的錯誤提醒彈窗更好的設計方式,是在這個錯誤發生之前就避免它。它可以幫助用戶排除一些容易出錯的情況,或在用戶提交之前給他一個確認的選項。

          通常情況下,按鈕置灰表示對應功能或操作無法使用,這也是防止錯誤的一條有效途徑,因為用戶通過按鈕樣式就可獲知其狀態,提前規避無效的提交操作。當然,不是只要功能或操作無法使用時,就應該將對應的按鈕置灰。其實更好的做法是填寫完標題后按鈕不置灰,點擊完成按鈕后定位或高亮必填項,讓用戶更容易識別錯誤點。

          比如在登錄時,只有輸出信息后才可以點擊登錄按鈕,未輸入信息時,按鈕是不可以點擊的狀態。通過系統主動對用戶進行操作限制,幫助用戶避免發生錯誤。



          限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。再比如輸入驗證碼頁面,為了防止用戶多輸入或者少輸入驗證碼,只給到四個輸入框,讓用戶只能輸入四位數字,減少輸入錯誤的幾率。


          2、在執行危險操作中做設計

          提供清晰的提示,防止用戶犯錯,提示包括標簽、文字、顏色、以及反饋狀態等。利用顏色,動效提供警示信息,比如常見的微信退出的按鈕是紅色的,狀態未完成的標簽是紅色的等等。

          如:表單填寫過程中讓用戶及時知道輸入格式,出錯原因,避免填寫完成后再提醒,浪費用戶時間。

          范圍限制:限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。比如:電影購票時,已購買的位子不會再提供選擇,很好的避免了買重的問題 



          3、危險操作發生之后做設計

          特別要注意在用戶操作具有毀滅性結果的功能時要有提示,防止用戶犯不可挽回的錯誤,需打斷用戶,提示用戶是否要進行此操作,讓用戶有更多的思考時間。所以在一些不可逆的操作中二次確認是非常有必要的。

          這條原則很重要也很常見。在刪除信息時,系統會讓用戶確認刪除,也就是我們常說的二次確認,電商平臺允許在一定的規則下取消訂單等等。






          易取原則的根本目標是提升用戶在界面上的操作效率,系統應直觀地協助用戶完成任務。

          系統應協助用戶進行記憶,通過使元素、操作和選項可見,減少用戶的記憶負荷,在適合的時機給用戶需要獲取的信息。

          識別比回憶要好,對于路徑較長的操作,我們更應該協助用戶記憶。比如在淘寶下單的操作路徑,每一個頁面頂部導航欄會盡可能的提醒用戶操作到哪里,用戶所有的操作信息都是可見、易獲取的,減少用戶對操作目標的記憶負擔。

          該原則在設計中的體現:

          1、易取原則-易掃描

          用戶心理學研究發現,互聯網用戶瀏覽網頁的動作不是讀,不是看,而是“掃”。這是互聯網用戶瀏覽的主要方式。所以我們在設計的時候,需要清晰的視覺層次結構,突出重點,弱化和剔除無關信息,降低頁面干擾,來減輕用戶閱讀成本。



          2、易取原則-讓用戶選擇而不是填寫

          比起讓用戶輸入,讓用戶選擇更能降低用戶的記憶成本,更好地輔助用戶做決策。如果,有很多的信息或者選項是用戶高頻率會選擇的,設計師不妨給用戶提前做好選擇,提供默認選項,如下圖:



          3、易取原則-智能獲取

          通過智能讀取用戶之前填寫過的信息,或者智能識別等形式,減少用戶記憶負擔與操作負擔。

          常見的是寄快遞-新增地址,將用戶復制的文本字符類型進行識別并匹配,將有用的信息內容提取出來,對體驗而言顯得高效又智能。

          或者淘寶購物確認訂單時,系統會自動為你帶入之前的商品信息,包括選擇的商品規則、數量、價格、默認記錄顯示常用的地址等。這些信息雖然之前都選擇過,但是需要用戶在購買前二次確認,由于信息比較多,用戶很難記憶,所以確認訂單再展示出來更加合理。



          比如:用手機登錄時,收到的驗證碼直接展示在軟鍵盤上,用戶無需記憶也無需輸入,直接點選即可登錄;

          美團APP中,當用戶選擇商品時,系統會自動計算商品價格和滿減后的價格,還會幫用戶記錄選擇了哪些商品以及份數,不需要用戶自己花時間去計算還差多少才能滿減等,減少用戶記憶負擔,同時節省用戶點外賣的時間,這也用到了易取原則。

          訂單頁面若某信息需要用戶從一個頁面復制到另一個頁面完成查詢或編輯輸入,那就有必要為該信息提供快捷復制功能,如訂單號緊跟著一個復制按鈕。

          我們在搜索一個歌名的時候,記不住完整的歌曲名,我們只要輸入關鍵的幾個詞,系統就是幫助我們記憶,出現相關的搜索。



          4、易取原則-草稿箱或歷史記錄

          作為用戶,你不記得的操作,系統可以幫你記錄。為用戶提供歷史記錄,文本創作的過程中自動保存草稿,讓用戶方便查詢自己的進程,這就是信息易取原則的設計。

          保留歷史,最為常見的就是為用戶保留歷史搜索和歷史瀏覽、儲存賬號和密碼。視頻APP會詳細記錄用戶的觀看記錄,當用戶沒有看完某部電影時,下次進入直接從斷點續播上次播放的位置,無需用戶記憶上次看到哪里了;

          不只是觀看記錄,視頻軟件還會幫你記錄同一賬號在不同設備上的登錄記錄,觀看記錄也會在不同設備之間進行同步。



          5、易取原則-可視化

          將選擇的對象,動作,選項可視化,讓用戶一看就懂。注意圖標符號化能讓人理解,避免引起誤解。

          抽象圖形+文字,提供了更多的信息,更加豐富了記憶效果,避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導航欄都是以這種icon和文字相結合的形式,這就是很符合易取原則的例子。



          6、易取原則-內容可預期

          在用戶使用產品的過程中,會有一些需要用戶記憶的內容、或者操作路徑,在設計的時候我們要避免用戶記憶,把信息直接提取出來,送到用戶手里。同時每個頁面傳遞的信息量盡量少,減少用戶的閱讀壓力。

          常見的例子是各類優惠券,設計的時候會有明確的位置說明限制時間,類別等等,同時還會有清晰的入口引導去使用或者規則的入口。



          7、易取原則-行為輸入代替字符輸入

          這一點其實也非常好理解,一個簡單的動作,比打字要輕松得多,常見的就是在設備解鎖的時候,用手勢解鎖替代密碼解鎖。

          隨著技術發展,有了更多的行為代替輸入的方式,比如指紋識別和面部識別,用簡單的操作,就可以達到進入系統的目的,這就避免了用戶需要較多的操作和密碼的記憶。







          靈活易用原則不僅是一個交互設計原則,也代表了一種軟件產品設計理念:系統既要做得簡單、易用,讓所有用戶用起來得心應手;

          靈活易用原則的根本目標是保持系統的靈活性,以滿足不同用戶的不同需求。既要提供必要的幫助,讓剛入門的初級用戶順利上手,還需要支持靈活的個性化定制,讓高級用戶能夠快捷高效使用高頻功能,充分發揮其價值。

          該原則在設計中的體現:

          1、靈活高效-提供定制化服務

          讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能,基本上所有軟件都會提供定制化功能,從快捷鍵設置,到頁面布局,再到自定義參數,軟件系統會盡量提供全面的個性化設置功能,來滿足不同用戶的使用訴求和習慣,提升用戶的使用效率和體驗。

          例如支付寶首頁,用戶可以自定義首頁的應用。對于使用頻率比較高的老用戶來說,這是一個非常方便的功能。



          還有一種是系統更具用戶常用自動整理歸納,以提升使用效率,減少用戶多余操作。

          比如:微信的聊天表情,由于可以選擇的表情很多,正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習慣往往是循環使用其中的某幾個,所以把最近使用的表情展現出來,會極大的提升用戶的尋找效率。

          除了從新老用戶的角度對用戶做區分,還可以從其他維度區分用戶,針對不同用戶做不同的功能。比如:微信為了讓中老年用戶使用方便,推出了關懷模式。在關懷模式下(下圖)文字更大、色彩更強、按鈕更大,還可以使用“聽文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點,讓產品更加靈活易用。



          2、靈活高效-提高用戶使用效率

          靈活高效原則在交互設計中使用會提高用戶使用效率,例如微信聊天頁面中,當用戶輸入某個字詞之后,系統會自動幫你匹配相應的表情包;

          當你輸入某個詞之后,輸入法會幫你自動聯想接下來你可能會輸入的詞;截圖后進入微信聊天頁面后,系統會將你剛截的圖前置,它會自動判斷你可能想發送該截圖。如下圖:



          3、靈活高效-“跳過”按鈕

          通過用戶快捷跳過的入口,比如常見的:引導頁、操作手冊、還是開屏廣告,有“跳過”或者”立即進入“按鈕真的很貼心。



          4、靈活高效-允許用戶重復操作

          對于用戶頻繁使用的部分,提供快捷的重復使用操作,比如:外賣app,用戶可以快捷地再來一單,同時保存上一次操作記錄。



          5、靈活高效-各取所需

          在設計功能時,最好能考慮到不同層次用戶的需求,以此來讓用戶「各取所需」(需要平臺有多類型用戶);比如常見的Word、Photoshop等,有一個“二八定律”,就是說80%的功能是給20%的用戶使用的。

          設計這類產品時,最常用的20%的功能一定擺在最顯著的位置上,方便所有用戶使用,而80%的高端功能,要適度隱藏,使得整個產品看起來盡量簡潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準備的。



          大數據智能判斷:

          淘寶的首頁每個人推薦的商品都不相同,淘寶后臺根據用戶的瀏覽習慣,購買/收藏記錄等大數據智能判斷用戶的喜好,對商品進行千人千面的分發。

          但是切記不要太過依賴大數據算法的判斷,因為一旦形成這種模式,會給用戶造成回音壁效應,你越喜歡的東西系統就越給你推薦,其他的商品就像回音壁一樣被吸收過濾,用戶永遠沒有辦法發現新的東西,讓用戶的選擇永遠都在一個死循環,所以做千人千面設計時一定要適度。





          優美而簡約原則的根本目標是讓用戶快速找到界面的重要信息,引導用戶的視線及操作行為。

          UI設計應該是符合大眾審美的,不需要多么酷炫,而是需要我們注重信息獲取效率,更加聚焦內容,刪除多余的視覺表達元素,讓界面保持美觀簡約。

          “快掃”是互聯網用戶瀏覽的主要方式。我們熟知的產品設計的四大基本原則:親密性、對齊、重復、對比,就是使頁面優美而簡約的方法。

          該原則在設計中的體現:

          1、優美簡約-視覺層級關系明顯

          建立清晰的視覺層級,越重要的內容越突出,能夠方便用戶無障礙地瀏覽信息,提高用戶操作與信息獲取效率,各模塊間采用卡片或者間距區分開,加強頁面層級區分。

          我們通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現。



          2、優美簡約-避免界面元素過于雜亂

          避免界面呈現過多元素,包括動效、配圖、icon、按鈕等等,降低用戶的視覺干擾。保留產品最主要的信息,如果不是優先級最高,要盡一切可能避免去影響產品的簡潔和美觀,可采用大留白增加頁面呼吸感,聚焦內容。



          3、優美簡約-對重要信息突出顯示

          用戶注意力資源有限,應該保持信息精煉,突出重要信息,弱化次要信息。



          上面兩個案例通過加粗放大、標記顏色,從而讓頁面簡潔,且突出重要信息。





          容錯原則的根本目標是讓那個用戶在操作出錯后還能挽回錯誤的余地,從而給用戶一致產品很安全貼心的感覺。

          系統需幫助用戶識別、診斷、并為用戶從錯誤中恢復提出建設性的解決方案。通過提示性文字或者插圖讓用戶意識到出錯了,比如404頁面的情感化插圖、彈窗提示用戶出錯等。

          該原則在設計中的體現

          1、容錯原則-引起用戶注意

          當發生錯誤時,提示信息一定要直觀,視覺上能夠引起用戶注意,可視化處理,文案要簡單概要,并給出解決方案。例如刪除訂單時,會提示二次確認,避免用戶誤操作。



          2、容錯原則-提供解決方案

          在出錯界面給出解決方案,可以是文字提醒或者按鈕跳轉等形式,幫助用戶解決問題。比如缺省頁的設計除了配置插圖還會有提示文案與操作按鈕,引導用戶去操作,去進一步解決問題。



          3、容錯原則-幫助挽回損失

          系統能幫助用戶自動甄別錯誤,并及時進行糾正時,將會給用戶帶來極大的便利,撤銷或者找回功能,都是幫用戶把損失降到最低的有效方法。

          比如微信信息的消息撤回重新編輯,相冊的最近刪除、回收站等等功能。







          人性化幫助原則的根本目標是用戶在使用產品的過程中有所依循,因為產品已經貼心地為他們準備好了幫助方式,或者即時提示和反饋,或者客服。

          人性化幫助用戶最好的方式分別為:1、無需提示;2、一次性提示;3、常駐提示;4、幫助文檔。

          最好的就是沒有提示,用戶就能看懂與應用產品;其次是一次性提示,提示一次用戶就懂如何使用,比如第一次進入app或新功能上線的引導設計、通常為氣泡形式。常駐提示需要一直固定在某個位置實時幫助用戶。

          最后就是幫助文檔了,一般用于解釋規則或者熱點問題,通常以超鏈接的形式存在于頁面中,或者以集合形式位于設置頁中,此時需要注意要易于檢索。

          該原則在設計中的體現:

          1、人性化幫助-方便用戶查找

          幫助文檔的入口容易找到,幫助信息方便用戶查找。常見的方式有:鼠標劃過懸浮文字說明,幫助用戶更好地理解。



          2、人性化幫助-便于用戶理解

          用戶通過查看幫助文檔來學習新功能,相對比較麻煩。如果能將教程和功能放在一起,用戶可以“邊學邊練”,就更容易讓用戶理解。

          提示語避免使用專業術語,盡量使用圖片或者圖形,同時處理文字外還可以使用示意圖,操作步驟等,方便用戶應用。



          3、人性化幫助-便于用戶應用

          在操作時的幫助信息,比如幫助懸浮按鈕:一直出現在頁面固定位置,方便用戶遇到問題尋求幫助。


          4、人性化幫助-信息引導

          搜索時,預搜索詞直觀地顯示出來,可以讓用戶更快地做出搜索判斷。微信轉賬頁面,當用戶輸入金額較大時,會在第一位數字下方提示轉賬金額的人民幣單位,目的是為了避免用戶輸入錯誤金額導致資金損失;



          5、人性化幫助-步驟引導

          復雜的流程可以通過分步驟來引導用戶逐步完成,而不是一次完成所有任務。個性化的提示一次就夠了,用戶用過一次就知道其用法。




          現在很多C端產品普遍做了良好的交互設計,可以幫助用戶快速學習使用,而不用閱讀、理解復雜的說明文檔。

          然而,B端產品的復雜性比C端產品高很多,因為B端產品蘊含很多業務流程的規則,系統中的一個按鈕可能代表了一個復雜的業務處理規則,如果不了解整個業務場景和處理規則,是很難理解按鈕的操作含義的。

          因此,對于B端產品,用戶進行自助服務、自助操作的難度高很多,B端產品的幫助文檔依然有存在的必要。產品設計人員要盡量在前端交互上做好引導提示,對于復雜的規則和邏輯,可以考慮通過幫助文檔來指導用戶。

          總結

          尼爾森十大可用性原則可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解該設計原則,可以找到更好的解決方案,提高用戶的使用體驗。要注意的是,這10項原則是啟發式(heuristics)的、廣泛的經驗法則,而不是具體的規定。

          1、狀態可見原則:位置可見、數量可見、狀態可見;

          2、環境貼近原則:語言應該是用戶所能理解和習慣的;

          3、用戶可控原則:可見導航、關閉與返回、撤銷與重做;

          4、一致性原則:產品內部一致、交互一致、迭代產品一致、同一產品線一致、設計語言一致、業內產品一致;

          5、防錯原則:操作前預警、操作中確認、操作后可撤回;

          6、易取原則:易掃描、智能獲取、草稿箱和歷史記錄、對象可視化、選擇代替輸入;

          7、靈活高效原則:靈活配置、允許頻繁操作、各取所需;

          8、優美而簡約原則:視覺層次明顯、簡約且突出重點信息;

          9、容錯原則:幫助用戶識別、診斷,并從錯誤中恢復提供方法;

          10、人性化幫助原則:無需提示、一次性提示、常駐提示、幫助文檔。

          最后

          我準備了一些常用的設計素材送給大家,需要的話免費拿走。獲取方式:老規矩公眾號后臺,發送文字“素材”,就可以獲取了~



          文中如有不嚴謹的地方希望大家給予指正,希望大家可以多多點贊評論鼓勵一下,最后感謝你的耐心閱讀。






          作者:789研習社      來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          一文看懂B端篩選設計

          博博

          篩選作為一個常用的功能,在B端產品設計中可以快速按照需要對數據進行查詢和篩選。希望本文對你有幫助。

          今天與大家分享的是關于B端頁面中篩選區的功能設計,本文會從篩選的展現形式、布局、反饋、設計中遇到的問題以及設計思考這幾個方面進行講述。


          簡單介紹下篩選


          篩選,也可以稱作過濾器,它屬于搜索框架的一部分主要用于內容提取,將一類數據展示,同時一類數據隱藏,可以整合很多的組件。


          在B端產品設計中,篩選區的設置便于用戶進行數據查詢和數據定位,可以快速的按照需要對數據進行查詢和篩選;篩選的存在對于整個表單來說是非常重要的,它可以幫助用戶在表單茫茫多的數據當中進行快速的數據定位;可以對表單進行快速數據按照自己想要的方式進行劃分,縮短用戶對于數據的尋找時間。

          1、篩選區的展現形式有哪些?


          篩選區常見到的有搜索、條件篩選這兩類控件。搜索和篩選雖然同在篩選區,但是二者還是有所差異的。


          通過百度百科我們可以了解到:
          搜索,意思指仔細查找,搜尋。
          篩選,篩選是利用篩子使物料中小于篩孔的細粒物料透過篩面,而大于篩孔的粗粒物料滯留在篩面上,從而完成粗、細料分離的過程。該分離過程可看作是物料分層和細粒透篩兩個階段組成的。物料分層是完成分離的條件,細粒適篩是分離的目的。

          在B端系統界面設計中,搜索是通過指定任意條件,系統對此條件進行的檢索后,展示相對應內容,功能偏主動性;篩選是系統提供指定各種條件縮小范圍,可以選擇查找不同條件的內容,功能偏被動性


          無論被動性還是主動性,搜索和篩選這倆個功能都是讓用戶使用某個條件對內容進行區分,從而找到用戶想要的內容。二者在功能上相輔相成,在B端系統的頁面中僅靠搜索或者篩選作為內容篩選都是不夠的,這就需要組合篩選區了。



          1.1搜索篩選


          精確搜索
          優點:搜索準確率高,所要即所得。
          缺點:需要用戶自己輸入,然后進行查詢。需要記憶搜索詳細信息。輸入框需要有提示輸入的內容,方便用戶填寫,以及確認輸入的類別或格式。
          適用場景:適用于用戶有清晰的目標,同時需要有查詢/搜索按鈕,來執行篩選。搜索需要配合篩選固有類一起使用。


          模糊搜索
          優點:模糊搜索可以用于搜索關鍵字的同義詞,提高搜索的精確性。字段匹配推薦搜索結果,減少記憶負擔,適用于不明確的信息篩選。
          缺點:篩選出很多類似相關的內容,需要查找鑒別所要內容,不便捷。
          適用場景:用戶對目標模糊,模糊是指不用關心輸入了什么格式,哪怕錯了,系統也會推薦給用戶相對正確的;用戶需要瀏覽操作過濾器提供的信息來輔助篩選達到目標。搜索需要配合篩選固有類一起使用。

          搜索的設計原則


          關于搜索,幾乎沒有人不知道,哪怕是不從事設計、產品的人,他們也知道。同時每一個產品,隨著規模變大,搜索一定必不可少。那么如何設計好搜索呢?有哪些原則可以借鑒,總結了以下4個方面。


          漸進呈現
          在我們設計搜索時,可以考慮漸進呈現的方式。這是指搜索結果不要一股腦兒都塞給用戶,而是使用逐步擴大的方式,讓用戶慢慢進入目標。但這里要注意,漸進的層級不要太深,漸進的內容要做到足夠為用戶著想。

          結構化
          結構化是指搜索結果呈現的形式要有歸納和整理的意圖,不能反饋給用戶的是沒有層次的內容。簡單來說,分類就是結構化呈現的體現,內容結構化后用戶查找和定位才會更快速。

          可操作
          對于搜索結果,我們可以給予操作選擇,例如收藏、分享等,這將會大大提升用戶與搜索結果之間的后續聯系。
          可操作性是最佳優先的好伙伴。同時給搜索結果添加使用類操作,這會讓用戶專注于目標。

          可保存
          無論搜索任何內容,用戶都有權保存自己常用的搜索結果,保證用戶后續無需重復搜索。這點上已經有很多C端產品做的很好了,我們在B端產品上也可以考慮起來。


          1.2條件篩選


          下拉篩選


          優點:頁面的空間利用率高,同時下拉起到了很好的收納作用,不占據頁面空間。
          缺點:由于下拉的局限性無法觀看到所有的篩選字段,需要操作點擊查看。


          適用場景:下拉的篩選字段選項有限,可以明確的總結分類時,一般采用固定選項類。這種操作起來便捷,降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕,但是也有的產品是勾選即執行的。主要需要結合具體的使用場景去判定。


          矩陣(平鋪)篩選
          優點:用戶可以直接看到篩選內容,支持輸入更多篩選條件,減少操作步驟提高了用戶篩選的效率。
          缺點:平鋪的篩選類目占據頁面空間較大,空間利用率低,信息量過多都是重點等于沒有重點,增加用戶的決策時間,不適合選項太多的情況。


          適用場景:平鋪篩選控件的普適性為最強,當沒有其他更好想法時,用平鋪總是一個好的選擇。需要注意的是,篩選條件不要過多(遵循7±2 法則)。


          注意事項:
          當確實需要支持大量的篩選條件時,有兩種解決方案可供參考
          1、用戶自行配置篩選條件:對用戶來說,單次篩選會用到的條件是有限的;通過可配置的篩選條件,實現檢索效率和信息噪音的平衡,對于用戶自定義項的體驗與應用都有更好的支持。
          2、 隱藏低頻的篩選條件:這種方法需要對用戶需求有明確的把握,哪些篩選條件是高頻、哪些是低頻需要有明確的分界,優點是第一次使用時用戶能更快上手。

          表頭篩選
          優點:通過表頭的點擊,簡潔、直觀的篩選當前表格列。
          缺點:只能篩選當前列的內容,篩選字段比較少,篩選形式比較單一。每個表頭都會有篩選的icon,影響用戶對于表頭的識別。表頭篩選學習成本最高,且和表頭排序容易沖突,篩選值展示也不夠直觀。


          適用場景:表頭篩選類似Excel表格的操作,是一種相對高級的交互,適合表格列比較單一內容的篩選。
          注意事項:
          一般來說不推薦使用,僅建議在以下幾種情況考慮使用
          1、空間是在有限或者表格非常靈活;
          2、用戶可能對每一列都有篩選需求(如數據報表、Excel);
          3、產品規劃時對于用戶篩選需求不夠明確,也可通過這種模式先采集數據,分析其使用頻次,對后期的界面優化進行指導。

          TAB標簽
          優點:篩選條件一目了然,交互步驟少,一個Tab標簽代表一個緯度,平鋪展示篩選內容方便識別,學習成本低。
          缺點:Tab標簽篩選字段數量有限制,不宜過多,分類需覆蓋選項,并且保證每一項沒有交集,空間占用多、不夠靈活,對用戶自定義項支持較差。


          適用場景:Tab標簽切換一般用于和時間、狀態的流轉有關,且沒有交集的數據內容(可以是同性質,也可以是不同性質)。權重高,選項值不超過5個。

          1.3組合篩選


          在B端系統表格類頁面中,字段屬性很多,簡單的檢索方式很難準確定位到目標數據,所以在實際使用當中,常會將大量非交叉關系的屬性進行羅列,搜索、篩選、TAB標簽切換組合出現,形成多屬性的組合檢索。而篩選項互相組合,其展示方式有如下幾種: 


          平鋪式
          平鋪式是將所有篩選項羅列出來平鋪在頁面上,可以兼容多種數據格式比如數字、文本、標簽、枚舉值、布爾值等,包含但不限于日期選擇期、標簽切換、單選框、復選框等多種控件。


          優點:用戶能直接看到選項內容,方便用戶識別選項,且提高了用戶篩選的效率(節省了篩選操作),大而全的篩選字段最大限度避免篩選條件遺漏的問題。


          缺點:篩選項多會占據大量頁面空間,信息量過多都是重點等于沒有重點,增加用戶的決策時間,不利于表格數據的直觀展示,此類型一般配合“勾選即執行”使用。


          適用場景:普適性為最強,當沒有其他更好想法時,用平鋪總是一個好的選擇。適用于從各個緯度篩選的場景,多維度篩選對信息篩選的顆粒度需求不一致,同時希望備選項被選中。

          折疊式
          折疊式篩選是平鋪式篩選的改進,一種簡單直接的篩選形式,對平鋪的篩選項進行收納,如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的,但又是必須存在的,可以通過折疊的方式將這部分篩選字段隱藏起來,高頻篩選字段外露。


          優點:高頻篩條件可優先快速篩選、一定程度上減少用戶的認知負荷,同時占用空間較小。


          缺點:不好劃分不同用戶的高頻篩選項,當高頻篩選項過多時,頁面同樣會出現信息冗雜、空間占比大等問題。


          適用場景:折疊低頻篩選,顯示高頻篩選,能滿足大多場景下不占用太多空間。針對有更多篩選需求的用戶也有更好的引導性。



          2.篩選區布局


          從位置上來說,組合篩選一般有如下幾種常見類型:上下布局水平篩選區、左右布局的垂直側邊篩選區、 內嵌的的表頭篩選區。


          上下布局水平篩選區


          最常用的上下布局,篩選區放置在表格頁面的上方,方便用戶識別選項,提高了用戶篩選的效率,明確哪些數據是用戶所需的。上下布局的篩選區也方便用戶進行閱讀,對于那些由不同數據結構組成的頁面,是一個很好的選擇。


          上下布局的篩選區的可擴展性差,當篩選項目少于五個的情況下,最常使用的就是上下布局,而當篩選項目多的時候,會占據大量頁面空間,內容在較多時,推薦增加收起功能,這樣保證篩選整體面積不會很大,提升屏效比。


          左右布局的垂直側邊篩選區
          左右布局的篩選區一般是以字段選擇進行篩選,篩選區的位置較固定,不會因為篩選項過多而影響頁面中主要內容的位置,可擴展性強,可在收起部分嵌套更多的字段值。


          左右布局的好處就是能夠將篩選的所有條件都直接的展示出來,可以適應很多場景,但是這種類型篩選器可以影響整個頁面。我們需要確保頁面上的每個元素都有效地受到篩選的影響,避免造成混亂。


          內嵌的表頭篩選區


          表頭篩選是一種復雜的篩選形式,常見于列表中,是一種列表內置篩選形式,適合表格列比較單一內容的篩選,其最開始是源于Excel的篩選形式,點擊表單的篩選按鈕,可以將表頭的篩選字段直接帶入,方便用戶。


          3.篩選區的反饋


          篩選區有兩種不同的反饋模式:數據實時更新反饋和數據手動更新反饋。


          數據實時更新反饋


          界面將與所有設置的篩選相匹配并對結果進行實時更新。
          這種模式的優點是在執行篩選時為用戶提供了一種方便簡單的體驗,可以在每次點擊后立即看到結果。適用于較低風險的交互,一旦處理多選過濾器或更復雜的輸入時可能會造成混亂。當然還需要考慮處理數據的多少,如果應用中數據量巨大,每次更新時間較長,反而會降低用戶的使用效率。


          手動更新反饋


          在手動更新反饋模式下,過濾結果只有在用戶點擊查詢時才會更新。如果用戶想在每次更改后查看結果,必須單擊查詢按鈕。
          這種模式適合多緯度復雜的篩選,所有篩選字段設置完畢之后,統一執行操作,和實時反饋結果相比降低篩選等待時間,尤其是在大量數據進行篩選中,優化了用戶體驗。

          4.篩選需要注意哪些問題


          什么情況不適合用篩選?
          選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話號碼,注冊用戶郵箱這種無明顯規則的就不適合用篩選組件去查找,用搜索會更好。


          篩選分類條件有什么要求?
          一是分類需符合大眾認知的條件。如:按照年月日的認知來選擇,地理位置按照省市區街道…
          二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時候是否清晰無困惑。

          高頻篩選操作怎么樣方便用戶操作?
          首先高頻篩選操作不是產研團隊自己主觀臆斷出來的,需要有數據支撐。很多產品為了滿足用戶快捷操作,會在篩選區幫用戶集成常用的快捷操作入口。比如很多電商產品的新品、包郵等快捷篩選。根據不同產品用戶習慣下操作整理出快捷操作入口能提高用戶體驗方便度。

          篩選和搜索的區別?
          主要區別在于用戶對目標的清晰度不同,需要選用不同組件功能來達到其目的。
          在B端系統界面設計中,搜索是通過指定任意條件,系統對此條件進行的檢索后,展示相對應內容;篩選是系統提供指定各種條件縮小范圍,可以選擇查找不同條件的內容。
          搜索和篩選都是讓用戶使用某個條件對內容進行區分,從而找到用戶想要的內容。


          5.工作中的設計思考


          在設計組合篩選的時候,篩選區的設計需要根據業務實際情況進行設計,考慮每個篩選字段和業務場景,來安排合理的篩選展示方式。
          那么到底什么情況下使用何種篩選模式?我們在設計篩選的時候可以如何思考?顯然,使用頻率和界面空間是兩個非常重要的評判維度。除此之外,我們還可以以可見性、系統性能和用戶認知等維度去深入思考,下面將逐一分析。


          頻率
          使用頻率是界面設計的一個重要考量因素,我們通常都會把高頻使用的功能放在顯眼且容易操作的位置。同理,對于篩選模式,我們也會依據篩選條件的高低頻進行設計。頻率除了影響使用什么模式外,還會影響篩選條件及篩選項的排列順序,這里就不多敘述了。

          界面空間
          一些界面模式的出現就為了應對界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過的事。
          可見性太弱,當篩選條件都被收納在一個個小小的入口按鈕時,它的可見性也會隨之降低,尤其在PC端,一個大屏幕下更難發現。

          可見性
          既然說到可見性,不妨展開講講。可見性是一項重要的設計原則之一。一個明顯的道理是,可見總比不可見好,但由于界面空間限制,我們不得不取舍。那么如何取舍才能保證可用性仍然友好?
          針對篩選模式的可見性,我們可以分三個要點去考慮:


          1、篩選條件本身的可見性:
          用戶越難發現,即可見性越低。通常,我們都可以以使用頻率來決定篩選條件的可見程度。但有時候也會失效,因為正如上文所提及,到了篩選這一步通常是顆粒度比較細的分類,否則我們可以用導航解決。但顆粒度越細,用戶對信息的需求就越不一致。比如,挑一件衣服,有人希望按品牌篩選,有人希望按價格,有人希望按顏色,我們很難判斷哪個頻率更高。面對這種情況,只能將所有的篩選條件平鋪出來供用戶選擇。例如,淘寶天貓等電商產品往往會使用矩陣式的篩選,而一些數據格式更多樣的B端產品則直接使用輸入式的篩選。

          2、篩選項的可見性:
          篩選項的可見性同樣影響模式的選擇。頁簽式和矩陣式篩選的可見性比下拉式更高,因為用戶可以直接看到篩選項。但篩選項一定要讓用戶看見嗎?對于這個問題,可直接以篩選項的多少去決策(少則可見,多則不可見),比如一些B端產品,如果將備選項都全平鋪出來可能一個屏幕都放不下,所以只能將所有篩選項收起。但這是一種極端的情況,缺乏說服力。
          用戶對備選項是否足夠熟悉?比如對于一個尺碼的下拉框,我很清楚自己能選擇什么,但對于一個衣服風格的下拉框,由于我對風格不熟悉,不能預判這個篩選條件能起什么作用,很可能會將其忽略。

          3、選中項的可見性:
          選中項的可見性,即當我選中某幾項后再次查看選中項的難易程度。

          性能


          數據量大才需要篩選,而數據量大必然會有性能問題。在不同場景下,用戶會發生不同的行為,對性能的要求也會不一樣。我們能經常發現一些篩選模式會帶有“確認”按鈕,當用戶設置完篩選條件后不會即時刷新,而需點擊按鈕才能觸發。而有的篩選模式則沒有“確認”按鈕。這分別對應著兩種不同的場景。
          第一種場景,如B端產品中的查詢報表場景。我需要找出符合條件A、B、C的所有信息,并進行對比分析,那么我就會設置篩選條件A、B、C后一并篩選出來,這種情況是一步到位的,我不需要再額外添加條件D或E,所以有“確認”按鈕的篩選模式更符合此場景。反而即時刷新會在我設置篩選條件時造成干擾。
          另外一種場景,常見于B端產品中的查詢列表場景。如果我想找到信息α,通過篩選A后得出10個信息,那么憑肉眼即可找出信息α,任務結束,但如果篩選A后得出1000個信息,我可能會再添加篩選條件B、C或D,直到篩出的信息能讓我一眼分辨出信息α。換句話說,這時候我的心理模式是即時滿足的,只要信息縮窄到一定范圍我就會停止添加篩選條件,否則我會繼續添加篩選條件。所以即時刷新能更符合此場景,但與此同時就需要考慮到性能問題。

          另外,我們也可從變更頻次和變更概率這兩個維度進行思考。
          變更頻次是指用戶反復使用篩選的次數,變更概率是指用戶使用篩選的可能性,一般來說,高頻次必然大概率,但大概率不一定高頻次。而這兩種情況對性能的要求是不同的。還是以報表和列表為例,在列表中,雖然很大概率會使用篩選來尋找信息,但由于用戶是即時滿足的,而且滿足即可,所以不會重復變更篩選條件。而在報表中,雖然用戶會一次性設置篩選條件,但需要分析的數據不只一種,所以會高頻更換篩選項,回想一下我們去分析自己產品或競品的日活月活等數據時,是不是會高頻地切換數據來分析比對?所以,高頻次的篩選就會對性能有更強的要求,而為了避免性能問題,往往也會加上“確認”按鈕。
          用戶認知
          最難解決的其實是用戶的認知問題,尤其在模式相對固定的當下,讓用戶適應并習慣新的模式并非易事。我們想出一些創新性的篩選模式時,不要忽略用戶的認知。



          作者:Colar可樂      來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          淺談B端和C端的不同

          博博

          想要了解B端C端不同,那么我們先了解B端是什么

          一、B端是什么?

          B釋義為:Business(業務),顧名思義B端產品更偏重于業務,偏重于功能的使用,B端設計在更加注重對于使用者的效率,這個功能是否方便直接達到目的。B端產品最直接的使用者是企業或者說每個“小企業”(班級、部門團隊等)要做的就是直接幫助他們用更低的成本使他們的效率大大提高。我們目前對于B端產品最簡單的理解就是疫情期間火爆的“釘釘”以及各位都熟知的“飛書”,在我們使用這兩款軟件時,我們就會發現這些功能好多面面俱到,“請假、匯報、簽到”等,不論多小的功能這兩款軟件都有,但是如果是C端的話,一些次要、點擊率低的功能指不定那天就消失了。單從產品角度來看就能看出B端與C端的區別,這些顯而易見的B端產品好像多了一絲冷靜但是很體貼的直男,C端就像一個花言巧語哄著你的playboy(僅舉例子區分,他們對于我們來說都是必不可少的產品)就像下面的自我介紹對比就能明顯的看出哪個是B端,哪個是C端。

          這些通過你應該已經初步了解了什么是B端,那么接下來我們從更深層次的開始了解。

          二、B端和C端的不同

          B端C端的不同在于哪些呢?

          1.用戶:

          B端的使用者更多是企業單位,老板等,需要共同協作,比如你的上級領導千里之外就能給你派發加急任務;我們部門需要一起進行這個需求等,這時B端產品的特性就體現了,就像現在經常有人說“只要聽到“釘”的一聲”和“紅色閃電”心里就突然揪了起來。

          C端的使用者在于用戶本身,通過精準推送直擊用戶痛點,增加用戶粘性購買度等。

          2.場景

          B端大多為辦公場景,項目需求、審批等

          C端則較為廣泛,某寶買買買,某音看看看!

          3.價值觀

          B端的價值更體現在我們整個團隊的效率,這個項目的使用成本,;比如說我需要通過這個軟件幫助我們整個團隊的效率提升,大家一起協作作圖、一起探討。

          C端的價值體現在這個活動這款產品怎樣使用戶更好的體驗,在使用時很快樂的把單下了;比如我們在某物購物時,購買完成后會獲得一張3D虛擬卡片,我們的購物體驗之旅是不是會極其開心,這里就使用了峰終法則(如果用戶在一段體驗的高峰處和結尾處是愉悅的,那么用戶對這段體驗的整體感受就是愉悅的。

          4.業務導向

          B端更注重這個功能的實現,我在使用這個功能時是否可以更高效,更加的去節省我的使用成本,再設計時我們需要去理解整個業務邏輯、業務導向,介于B端產品比較私密,很少有公開的,所以比較設計起來難度較為提高。我們我們平常面對小伙伴B端的問題時,如果不去了解他們整個業務流程就很難客觀地去判斷,很容易對他的指點使他造成一次工作失誤。

          C端的業務導向,更在于對于用戶心理、使用體驗的拿捏,能讓用戶做到“0”成本學習,無腦上手無腦沖沖沖,就比如你搞優惠搞了半天復雜操作做后才200-10這誰不氣?光明正大割韭菜啊。

          三、B端C化

          我在資料中查閱到未來的B端的進步就會在“B端產品在使用體驗和視覺感受這兩個方面和C端產品接近”,B端C化其實很簡單,就是將B段專業性強會忽略視覺這一點進行補充,B端產品也可以使自己的產品視覺更加富有沖擊力、3D、情感化、就像一些大廠最近的展示更多的去運用了一些3D玻璃質感提升B端產品的用戶視覺體驗,飛書也會制作情感也會在缺省頁的時候用emoj表情對你體現“話語安慰”是你在使用功能時不再那么枯燥,釘釘的IP設計同樣也是在拉近與用戶之間的距離,通過IP讓本就繁瑣的產品得到心情的愉悅,這都是在進一步提升B端的情感化,淘寶的功能、抖音的功能更加方便高效其實也是B端的體現,所以我們B C端其實歸根結底我們的目標服務都是為了人設計的,設計也一樣,服務于人,都是以更加舒適的道路上前進。

          總結

          其實B端C端從根本來說不同點很小,因為都是為了“人”去服務,未來的發展也是為了更好的讓我們去高效的使用;就很像國內國外設計有什么不同,其實沒什么不同,我們設計每一個項目、每一個作品時不管我們是否屬于哪個國家,我們的目的也只有一個“為了讓這個世界因為有了設計而看起來更美一點!”





          作者:小蘆同學有大腦袋      來源:站酷



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          B端體驗設計之列表設計

          博博

          B端中后臺產品中,列表頁和表單面占了80%以上的頁面,以下文章針對如何設計一款好用的B端產品列表頁進行了講解

          列表頁多用于一個功能的首屏,是一個功能的數據集中載體,它的主要功能就是集中處理、展示、查詢、以及統計數據等。列表頁一般包含5個組成部分:標題、查詢、操作、統計以及表格。

          一、標題


          系統中只要是功能,就一定有標題,就像只要是個人,就一定有姓名一樣,標題的展示根據系統的結構,可能在面包屑中,可能在標簽欄中,也有可能在頁面容器中。如果標題放在容器中,位置一般是固定的,不隨著頁面滾動而滾動,標題字體也要和內容字體做區分,一般是字號增大或者加粗等方式。



          二、查詢

          查詢條件的設計也是五花八門,根據查統頁使用場景大致可以分成兩種:一種是省空間的設計,一般只需要放一兩個查詢條件,那么它就可以和操作按鈕放一起,多出現于數據字段比少且簡單的情況;一種是經常需要混合高級查詢,一般會獨立有一塊查詢條件模塊,多出現于數據統計類頁面。

          2.1、省空間查詢條件


          為了達到省空間的目的,查詢條件和操作放一行,一般會只放一兩個查詢條件,輸入或選擇后即執行查詢,不需要單獨點擊查詢按鈕,這種方式好處就是省空間,缺點是它默認展示的篩選項比較少,需要再點擊“更多查詢”才能看到更多。設計這種查詢方式需要注意的是,輸入查詢一般是輸入后即執行查詢,容易導致執行過于頻繁(輸入一個字符即執行了),因此會做防抖設置,可以在輸入0.5s后執行。再一個,這種展開收起的情況,用戶容易看不到隱藏的篩選,因此需要一些標記,比如展示已選擇的數量。



          2.2、獨立查詢條件


          獨立查詢條件的方式,就是將查詢條件單獨劃出一個模塊,可以一次性展示多個查詢條件。這種方式的好處就是,查詢更便捷,還可以做更多的拓展性方案,如用戶可以自定義高級查詢方案。缺點就是占空間,對于小分辨率電腦不是很友好。



          三、操作


          列表的操作是由產品的功能權限控制,由權限決定哪些人能夠使用和查看數據,下面從操作的類型、組合、操作反饋以及狀態的角度分析如何設計好操作功能。

          3.1、類型


          操作模塊一般是由一組用于操作表格數據的按鈕組,主要分為3種:一種是全局性操作,一種是選擇數據進行操作,一種是混合型操作。全局性操作(如新增數據、導入、導出模板、刷新等)不需要勾選當前具體某行數據,就可以直接點擊操作;選擇數據進行操作(如刪除、編輯、審批等),即操作前需要至少勾選一條數據,因為它是對當前已存在的數據進行操作;混合型操作(如導出、更新狀態等),在勾選數據的時候會對當前數據進行操作,未勾選數據的時候默認會全部處理或者其他的操作,比如“導出操作”,勾選數據時會導出已選數據,未勾選時則默認導出空模板或者導出全部數據(根據具體產品要求)。



          3.2、組合


          操作組一般會由一個或多個按鈕組成,通常只有一個主操作(primary)。主操作是帶有引導性的功能,如“新增數據”,還有若干個普通按鈕(default),不帶有引導性。按鈕組還可以根據操作類型形成組合,以分割線或收納的形式展示,收納按鈕主要有兩種展示形式:一種是帶主操作的收納按鈕(如歸納同類型的操作),一種是直接收納,不帶主操作的(如按鈕太多需要進行收起)。操作的順序通常也會根據優先級和操作頻次來決定。



          3.3、操作反饋


          操作后需要給個反饋,告知用戶操作結果,告知結果分三種情況:1、直接給結果,如toast提示,操作成功/操作失??;2、給操作建議,如:toast提示,請先勾選至少一條數據;3、警告提示,如刪除數據時候告知風險,二次確認防止誤操作。



          四、數據統計


          數據統計一般是拾取表格數據某些維度的統計結果,用于快速知曉當前所有數據的情況,有些統計還帶交互,比如點擊選中后進行數據過濾。



          五、表格


          市面上封裝好的表格組件可配置api很多,像antd,但是想要做的更強大,還有很多能夠做的細節,我們先來分析下表格的組成。表格是由行和列組成的網格數據,表格可以分2種,明細表和交叉表,查統頁中采用的就是明細表中的橫表,即表頭是橫向的。


          5.1、表格設計原則


          表格的設計原則遵循以下幾點:數據可讀性、展示效率、操作便捷性、以及靈活性等。



          5.1.1、數據可讀性


          表格作為信息密度最大的組件,在設計的時候要考慮數據的可讀性,可以從以下幾點入手。

          • 對齊方式。比較常用的是左對齊,數字金額百分比一般是右對齊,方便百分號小數點和千分位的對齊。如果表格不帶豎向分割線,則表頭也要和表體內容對齊。
          • 斑馬線。尤其是屏幕比較寬的時候,兩個字段隔得比較遠,在眼睛移動過程中容易看錯行,斑馬線就是解決這個問題,當然,如果不嫌麻煩,鼠標懸停上去,該行的背景色一般也會變化。
          • 行高。文字行高一般是字號大小的1.2-1.8倍。單行文字表格行高一般在32px-56px之間,如果支持換行則換行文字自動擠開表格行高。
          • 表頭樣式。表頭要和表體在樣式上做區分,如文字加粗,背景色等。
          • 滾動。當表體產生滾動的時候需要出現滾動條或者在固定列旁邊出現陰影。


          5.1.2、展示效率


          B端產品尤其是ERP這種數據密集程度很高的產品,對空間的利用要求是很高的,因此在設計的時候要充分考慮展示的效率,可以從行高、列寬等角度去設計表的細節。我設計表的時候習慣先跟產品討論清楚每個字段大概的長度,在設計的時候就會預留匹配的默認字段寬度,比如14號字體的表格,在展示“創建時間”字段的時候,字段寬度不會超過170px,我會留180px的默認寬度,既有呼吸感,又不浪費空間。最后預留一個字段寬度作為auto自適應,給到個min最小值,這樣在不同分辨率上能展示相同的效果。


          5.1.3、操作便捷性


          表格在展示數據的時候往往會遇到一些問題,比如字段顯示不完整,這時候就需要手動支持調節列寬,或者懸停tips展示全部內容。再比如想要復制某段內容,而文字展示不全,又不支持調整列寬,這時候要么在比較常用于復制的字段后面跟個“復制”圖標,或者懸停出現tips的時候鼠標移上去不會馬上消失,這樣用戶就能框選文字復制了。



          5.1.4、靈活性


          表格設計的時候不一定能覆蓋所有用戶和場景,因此需要預留一些靈活調整的空間,下面介紹幾個常用點。

          • 調整字段順序。有些產品為了能讓用戶根據習慣更靈活地查看內容,會讓用戶直接拖拽表頭進行重新排序。
          • 調整字段寬度。表格內容有些長度是未知的,在使用的時候發現信息看不全,因此通過拖動可以快速調整字段寬度。


          5.2、表格元素


          表格元素包含了背景、數據(文字、圖片、圖標、標簽、附件等)、序號、邊框、選擇框、操作項、斑馬線等。這些在設計表格的時候都是設計師需要去定義展示形式


          5.3、操作列


          為什么要單獨把操作列拿出來講,因為操作列的設計蘊含了太多內容需要考慮,設計師在設計的時候很容易忽略。


          5.3.1、形式


          目前操作列按鈕主要兩種形式,“圖標按鈕”和“文字按鈕”,圖標按鈕主要用于比較簡單易懂的一些常規操作,優勢是長度可控,容易對齊,劣勢是,有時候需要懸停上去才知道含義,不夠直接;文字按鈕用的范圍比較廣,簡單明白,缺點是長度不可控,不好對齊。



          5.3.2、數量控制


          操作列和復選框一樣,一般作為固定列,不隨著字段橫向滾動。數量也不可控,根據業務情況,有多有少,因此在做的時候要解決數量問題,如果全部展示,則勢必影響內容的展示面積,因此設計師根據真實的操作數量設定固定列寬度規則,操作項超過一定數量或一定長度做“更多”按鈕收納。還有一種展示方式,默認不展示,鼠標懸停展示該條數據需要展示的操作,這樣既可以解決信息展示面積問題,又不需要考慮和其他行數據的操作對齊,還不需要定操作列列寬規則,缺點是,不夠直接,如果不懸停就不知道還有操作項。有的產品干脆直接把操作項去掉,全部采用上面的全局操作,勾選數據后執行,總之各有各的優缺點。



          5.3.3、操作狀態


          設計師經常會困惑,什么時候操作禁用,什么時候隱藏。按鈕隱藏一般根據數據權限控制,“隱藏”通常是角色無該操作權限的時候采用,“禁用”通常是由于數據本身的問題導致暫時性失效。舉例個例子,組織架構的頁面,管理員對所有組織架構和成員有編輯和刪除權限,而普通員工只能查看數據,這時候操作按鈕就需要隱藏。再比如訂單功能,有的訂單已經進入審批環節不可刪除,那么它的刪除按鈕就會變成禁用,而有的訂單還未進入審批環節,這時候是允許刪除的,這時候刪除按鈕就會亮起。


          5.4、分頁器


          數據量比較大的時候會用上分頁器,設計師在設計的時候也要定好默認一頁幾條,不然開發就會根據自己的臆想來做。分頁器位置的設計也分兩種,在表格上方和表格下方,市面上看到的大部分都是在下方。放在下方就有個問題了,是要固定頁面位置還是隨著表格自動計算位置?我對比了幾個比較成熟的產品,大部分都是固定在底部,不隨著頁面滾動,整個頁面滾動的區域只有表身,有小部分是跟在表格尾部,每頁條數超過屏幕高度可展示量,分頁器就會被擠到下面看不見,這種好處就是省了一點展示空間,不好的地方就是,要想再使用分頁器得往下找。還有極小部分產品兼容了這兩個方案,當條數少的時候跟在表格尾部,當條數多的時候,會頂在底部,類似固定釘功能??傊还懿捎媚姆N方案,都要兼顧便捷性和易用性。



          5.5、表頭


          5.5.1、表頭篩選


          表頭篩選平時用的比較少,因為外面已經有獨立的篩選功能,有些也放出來,補充一些不常用的篩選。



          5.5.2、表頭排序


          排序規則主要由產品提供,設計需要知道一下。一般默認是以產品的創建時間為排序,排序不帶具體業務含義的一般采用時間倒序,最新數據在表格最上面,這樣每次新增數據就可以快讀看到,不用劃到最后面甚至翻頁后才能看到。有的采用時間正序,最新的數據在最后面,這種一般是數據本身帶有排序屬性,如果貿然在最上面插入數據會打亂已設定好的順序,這種帶排序屬性的表格,往往還有調整順序的操作。觸發排序一般只需要點擊表頭即執行,通常點一次會進行正序/反序,再點一次會反過來,再點一次取消排序。如果點另一個字段的排序則默認會采用最新的排序字段。



          5.5.3、表頭提示


          有些比較難懂的字段需要在表頭增加一個提示信息,來輔助用戶理解字段含義



          5.6、表格配置解決方案


          前面講了表格的各種屬性,為了使用的靈活性,有些成熟的產品會設計一個設置表格屬性的功能,可以讓用戶自定義表格屬性,如字段展示(篩選)、字段順序、字段對齊方式、字段固定列、是否展示序號、斑馬線等。事情有利必有弊,靈活也意味著學習成本高和投入開發成本大,是否需要做有各自的真實情況決定,不過作為設計師得知道,這些就是你能雕琢的地方。



          六、額外功能


          還有一些額外的設計過程中你不一定會注意到但挺好用功能推薦。


          6.1、只看已選


          在選擇數據的時候,為了便于一眼看到選中的數據,會做這個么個操作。



          6.2、已選數量


          表格的選擇,默認一般是不支持跨頁選擇的,所以產品或者設計需要要求開發支持跨頁選擇,而一旦支持跨頁選擇,就容易忘了到底選了多少條,因此會展示選中條數,以及一鍵清空選中,這個功能還可以和“只看已選”功能混合著用。



          6.3、只看表頭


          對于有些帶明細數據的表單,通常在表單中會分表頭和明細(表身),舉個例子,商品訂單中會包含一些像訂單編號、客戶名稱、發貨時間、發貨地址等等這種,叫做表頭。像具體的明細數據,如訂單中包含100個a商品,200個b商品等等,叫做明細(表身),因此在列表功能展示的時候有時候需要一眼看出明細數據,就會以表身明細數據為主數據展示,但是數據量會蹭蹭往上,因此用戶可能會選擇是按“表頭”數據展示還是按“表頭+明細”數據展示。



          七、總結


          列表頁承載了一個b端系統半壁江山,設計師在設計過程中需要不斷打磨,設計出符合自己產品特性的列表。





          作者:落難的黑人      來源:站酷



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          日歷

          鏈接

          個人資料

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

          存檔

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