<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>

          首頁

          用戶體驗|我研究的三招,應對用戶的回避小心思

          seo達人



          00.【前言】

          圖片

          現在我們在目標導向流程的第一個部分:研究

          我是從0開始、系統講解用戶體驗設計方法的CC~

           

          01.【為什么會得到錯誤的反饋】

          用戶做出錯誤反饋的原因:

          大概會分為這幾類情況。

          從心理學角度舉幾個例子來分析一下:

           

          舉例一:

          當別人穿著新買的衣服,興高采烈的詢問你,“你覺得我這身衣服好看嗎?”

          通常出于作為一個自認為情商還可以的社交人類而言,哪怕這件衣服在自己看來并不是很喜歡,我們依然會表達出贊賞。

          不論是出于禮貌,還是為了促進關系良好的發展,我想很少有人會直接坦蕩的說,你這件衣服真丑吧。

          有些非常的善良的用戶,在調研過程當中,也會出于考慮到我們產品開發者的面子而忽視自己真實的想法。

           

          舉例二:

          我們在學生時代,老師提出一個問題,“大家都理解了嗎?”有些人明明似懂非懂,但依然會逞強的說出“我理解了”這四個字,也是為了掩飾自己的想法,維護自己的面子工程。

          用戶也一樣,他們有可能為了維護自己的形象或不好意思表達自己的想法,說出違心的結論。

           

          舉例三:

          參加過教師資格證的小伙伴應該都知道,在教師面試的時候,有一個試講的環節。需要當場對抽到的考題進行備課和試講。

          通常我們在家里準備考題的時候都可以非常流利的進行演練,但到了考試當天,進到考場當中我們又總會緊張到不知道該說什么。

          【在陌生環境下,我們經常會覺得不知所措。】

          同時面對陌生的人,很多人也很難真實的表達自己的想法。

          我們的用戶也一樣。

           

          02.【我們應該怎么做?】

          我自己總結了三種應對問題的方法。

           

          方法一:關系培養法

          善良的用戶是最好溝通的。

          想象一下,對我們的真心朋友,在他真心想得到我們認真的反饋的時候,我們是否可以說出逆耳的忠言?

          嘗試把用戶當作我們的朋友,以一個向好友真心詢問意見的語氣和用戶交流,整個過程不用很正式,告訴他我們只是單純的朋友間的閑聊和吐槽,真誠的去訪談。

          善良的用戶更能說出發自內心的想法。

           

          方法二:路人觀察法

          對于不愿意談論他們難以理解產品行為的用戶,我們不必過分強調訪談的重要性。

          通常急切的追問對這類用戶而言,更容易產生逆反心理。

          我們可以采用路人觀察的方法,在公開場合不著痕跡的觀察這類用戶的具體行為。

          有人會疑惑,這說的很輕松,怎么才能不著痕跡的觀察呢?

          提供一個小的思路,我們可以收集用戶頁面停留的時間,點擊的次數,甚至眼動的頻率,又或者觀察用戶的微表情,來分析用戶對于當下產品的理解情況。

          當然這是B端產品,如果是適合公共場合使用的產品,可以直接將自己作為一個周邊的普通用戶,輕松的觀察身邊其他用戶的行為。

           

          方法三:情景營造法

          選擇用戶熟悉的場景,最好是每天辦公的辦公場所,讓周圍充斥著熟悉的日常用品,在自己把控范圍內的環境來進行訪談,更能夠讓用戶有把握感,主動的表達出想法。

          就像我們在自己家里接待客人,遠比去別人家做客感覺來的輕松。

          如果用戶工作場地有限制,必須選在陌生的環境,那我們也注意不要選擇看起來就很嚴謹,很正式的實驗室場所,容易增加用戶的焦慮感。

           

          小思考  提一個小思考:【你知道怎么樣準確的定位自己的訪談目標嗎?】下節我們聊這個。

           

          原文地址:達芬奇的火柴盒(公眾號)

          作者:CC本人

          轉載請注明:學UI網》用戶體驗|我研究的三招,應對用戶的回避小心思

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

          截屏2021-05-13 上午11.41.03.png

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

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



          為你解密設計中的節奏感!

          資深UI設計者

          、

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

          文章來源:站酷   作者:美工美邦

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          如何做好數據可視化

          資深UI設計者

          在如今這個時代,越來越多的信息和內容呈現開始依賴數據驅動,也開始有更多的場合需要信息圖來輔助呈現,對于可視化數據,從來沒有像現在的要求這般高。但是另一方面,我們周圍充斥著大量錯誤的圖表呈現,希望這篇文章提供的 20 條建議能夠幫你設計出更好的信息圖。

          1、選擇正確的圖表類型

          不同的圖表類型所承擔的功能是截然不同的,不合理的數據呈現會容易讓用戶誤讀。同樣的數據可以使用不同的圖表呈現出不同方面的特征,因此,在設計信息圖之前,先理清需求,再來選擇使用哪種圖表能夠更好地呈現。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          2、根據數據的正負值選擇正確的繪圖方向

          當使用數據在0的左右波動,產生正負差異的時候,請使用基線來正確反應正負關系,不要在同一側來呈現數據,這樣很容易帶來誤讀。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          3、始終從0處開始繪制條形圖

          和折線圖不同,條形圖如果從非 0 的位置開始,確實更容易反應趨勢,但是給所體現的數據量級和特征是失真的。比如在下面的案例中,B看起來是D的3倍以上,但是實際的情況是,兩者差異并不大。所以需要從座標 0 處開始呈現數據,這樣會更準確。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          4、折線圖應該清晰呈現Y軸上的趨勢變化

          對于折線圖,需要考慮一下 Y軸上的尺度,因為如果單位太大,那么折線圖所呈現出來的波動幅度不夠大,趨勢的表達也不夠清晰。這個時候,建議調整Y軸上的單位大小,確保折線的波動幅度大概占整個Y軸的 2/3 即可。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          5、使用折線圖的時候注意時間

          折線圖是使用線條連接特定時間節點的特定數據的一種數據呈現形式,它有助于說明隨著時間推移,某些情況的變化,但是當間隔時間頻率不對,參差,缺失,那么折線圖的數據可能會無法對應,這個時候使用條形圖其實是更容易呈現的。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          6、不要使用平滑的折線圖

          平滑的「折線」在視覺上看起來是愉悅,但是它歪曲了背后的實際數據,也很難讀到關鍵的轉折點數據。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          7、避免讓雙折線互相交叉

          通常,為了為了節省可視化設計的空間,設計師會采用雙折線來呈現數據,但是在數量級不對等的情況下,折線圖會很難讀,甚至容易會誤導用戶,這個時候,建議分開使用2個不同的座標系來呈現,更加易讀,同樣可以看的出趨勢,也不會得出錯誤的結論。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          8、限制餅圖中的扇形的數量

          餅圖是最常用但是也是最容易誤用的圖表之一,在絕大多數的情況下,條形圖是更好的選擇。如果你決定使用餅圖,那么這里有2個基本的建議:

          不要超過7個不同的扇區,讓餅圖盡量簡單
          你可以將額外的片段分組到「其他」的扇區中

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          9、在餅狀圖中直接標注對應的數據

          沒有合適的文本標簽說明的情況下,無論信息圖設計得多好都沒有意義,直接在圖表上進行明確的標識,才會對觀看者產生價值,需要觀看者自己去關聯的設計是失敗的。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          10、不要在扇面上做標注

          不要將數值直接放置在餅狀圖的扇區上,在較小的扇區塊上數據會非常難讀,相反,使用引線來指引數據對應的區塊會是更好的方法。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          11、控制餅圖中扇面的排序讓其方便閱讀

          對于餅狀圖的切分方式,有2種常見的順序:

          將最大的一塊置于12點鐘方向,然后順時針按照大小來排布所有的塊
          將最大的一塊置于12點鐘方向,然后在右邊放次大的塊,右邊放置再次的塊,基本上就是越大的扇區約靠上。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          12、避免隨機排列

          同樣的建議也適用于其他的圖表,不要使用字母順序來進行排列,不要使用筆畫排序,而是按照數據大小來進行排列,水平條形圖就將最大數據放在頂部,垂直排布則將最大數據的放在左側,減少閱讀的時候的信息分辨的障礙。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          13、不要犧牲信息圖的可讀性

          餅狀圖通常是最不容易讀的圖表,因為它很難對相似的數據進行對比,所以在將它設計成環狀的時候,我們可以使用輔助的數據來呈現,但是一定不要犧牲彩色扇區的可讀性,這樣看起來高級但是并不具備基本的可讀性。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          14、視覺效果不要影響數據的呈現

          不要讓不必要的視覺效果來分散用戶的注意力,這可能會導致用戶對于數據產生誤解,通常你應該避免使用:

          3D元素和陰影
          漸變和失真的色彩
          斑馬紋或者過多的網格線
          裝飾性過強的字體

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          15、選擇和數據屬性匹配的配色

          配色是可視化設計當中繞不開的一個重要的部分,在設計的時候可以考慮以下三種不同的配色方案:

          使用定性的配色方案,不同的色相對應不同的元素,確保在整體配色的可訪問性
          使用符合一定順序(比如明暗)的近似色的配色,呈現出一種連續的色彩變化
          橫跨冷暖色調的配色方案,將中性色置于中間,用來呈現存在正負關系的數據變化

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          16、使用無障礙的配色

          根據目前的統計數據,大概 12 人當中有一個人存在視覺障礙,有的是色盲,有的是色弱。你的圖表設計需要確保兼顧到這一部分用戶的需求。

          在配色方案當中使用不同飽和度和明暗的色彩
          使用去色效果來校驗你的配色的對比度

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          17、關注內容的易讀性

          在信息圖的排版易讀性上同樣是有要求的,要避免分散用戶的注意力,不會制造視覺障礙:

          選擇清晰的非襯線字體,避免使用襯線體和過度裝飾的字體
          避免使用斜體、粗體和全大寫字體
          確保和背景之間的信息對比度
          不要旋轉文本

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          18、使用水平條形圖來優化傾斜標簽

          這是一個非常簡單的技巧,能夠確保用戶在閱讀的時候足夠輕松,不會因為傾斜的文本扭傷脖子或者加重落枕的癥狀。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          19、事先選好你的圖表庫

          如果你的設計項目是面向 Web 或者移動端的交互式圖表,那么你需要考慮的第一個問題就是,要用什么樣的圖標庫。如今不同的圖表庫在功能模塊和規則上各不相同,你需要在一開始就基于你的需求和設計想法,做出選擇。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

          20 、不只停留在在數據靜態呈現上

          信息圖本質上是在對數據進行優化處理、呈現的基礎上,幫助用戶進行探索,最大化地從數據中獲得信息洞察,讓數據發揮價值。在下面的 iOS Health 應用就是在最大程度地反映數據應有的意義和功能。

          想把數據可視化做好?這 20 個超實用的經驗總結一定要先看過!

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

          文章來源:優設   作者:Taras Bakusevych

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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




          vue-cli@3添加sass(vue項目模板封裝系列)

          前端達人

          前言

          上一期分享了如何在vue-cli3的框架中,封裝mixinsmodule 。本期將分享如何在vue項目中添加sass
          在這里插入圖片描述

          GitHub項目地址:https://github.com/jiangjiaheng/web-template

          關于sass

          本文默認你對sass有一定的了解,并且閱讀過相關的官方文檔,因此本文就不在贅述關于sass的基礎知識。

          在這里插入圖片描述
          sass官方文檔:https://www.sass.hk/

          添加方式

          1. 創建項目時選擇預處理器sass

          $ vue create vuedemo
          ? Please pick a preset: (Use arrow keys)
          > default (babel, eslint)
            Manually select features 
          
          • 1
          • 2
          • 3
          • 4

          移動上下鍵選擇Manually select features:手動選擇創建項目的特性。

          顯示如下:

          ? Check the features needed for your project: (Press <space> to select, <a> to t
          oggle all, <i> to invert selection)
          >( ) TypeScript
           ( ) Progressive Web App (PWA) Support
           ( ) Router
           ( ) Vuex
           (*) CSS Pre-processors
           ( ) Linter / Formatter
           ( ) Unit Testing
           ( ) E2E Testing 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10

          移動上下鍵在CSS Pre-processors,按提示點擊空格鍵選擇CSS-processors

          顯示如下:

          ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
          > SCSS/SASS
            LESS
            Stylus 
          
          • 1
          • 2
          • 3
          • 4

          選擇第一個SCSS/SASS作為我們的CSS預處理器。

          完成后項目會幫我們安裝sass-loader node-sass

          2. 手動安裝sass-loader

          如果在創建項目沒有選擇CSS預處理器,我們也可以手動安裝sass-loader node-sass來集成scss

          npm install -D sass-loader node-sass 
          
          • 1

          使用

          完成添加后,我們只需要在style指定langscss即可,無須多余操作:

          <style lang="scss" scoped>
          $color: red;
          
          h1 {
            color: $color;
          }
          </style>




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

          文章來源:csdn

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

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

          Vue報錯Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.解決方案

          前端達人

          錯誤提示:

          
          
          1. ERROR Failed to compile with 1 errors 下午6:51:57
          2. error in ./src/views/Login.vue
          3. Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
          4. at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\utils.js:77:13)
          5. at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\index.js:34:59)
          6. @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
          7. Config":false}!./node_modules/_sass-loader@9.0.3@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
          8. 13:3-17:5 14:22-397
          9. @ ./src/views/Login.vue
          10. @ ./src/router/index.js
          11. @ ./src/main.js
          12. @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

           解決方案:

          找到問題所在:Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

          這個問題是因為Sass的版本過高導致,所以根據提示將版本改為對應的版本就可以了,我這里是改為4.0.0版本。

          下面是怎么改版本:

          1.首先在IDE中找的package.json文件:

          2. 然后打開該文件找到“sass-loader”,后面跟著的便是你現在的版本,根據提示將其改為對應版本即可 :

          3.在Terminal(終端)中輸入:cnpm install(注意用cnpm 淘寶的鏡像,用npm可能會下載不成功)

           4.運行成功:npm run dev


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

          文章來源:博客園

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

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

          2021-2022設計趨勢ISUX報告·社交APP篇

          seo達人



          互聯網社交發展方向

          先來看看技術發展和現階段人口結構的變化對線上社交有什么影響。

          技術上:

          2G時代的社交實現了跨地域聊天,用戶可以在QQ里和天南地北的人聊天,強調在線狀態。QQ號是用戶社交虛擬身份的id,是用戶自我創造的線上人設。2G時代的社交尋求更為方便的溝通方式。

          3G進入了移動社交,著名風投公司合伙人約翰·杜爾提出SoLoMo概念(社交化、本地化、移動化)。用戶可以基于位置進行交友,比如附近的人;基于行為匹配,比如微信搖一搖。沒有在線狀態,可以隨時隨地的聯系,隨時在朋友圈獲取對方線下的生活狀態。

          4G時代,手機硬件、大數據和AI的發展,大大提升了匹配的效率,高效地建立潛在社交關系。不論是看臉社交還是靈魂匹配,都能在很短時間內找到合適的人聊天。信息傳輸越來越快,溝通互動的方式不斷革新,用戶從文字、圖片聊天進而習慣于實時語音和視頻。

          隨著5G到來,高帶寬互聯網、云、AR/VR/MR的高速發展,視頻作為主要的信息和溝通載體變得日益普及,疫情讓在線溝通和協作越來越方便,更多的線下社交場景轉移到線上,線上社交的頻次大大增加的同時,副作用也開始呈現,社交隔離讓人們感到更孤獨,對云社交的需求愈發強烈。

           

          人口結構變化:

          獨生子女群體在80年代出現,但由于父母輩基本是有數量較多的親兄弟姐妹,因此第一代獨生子女的同輩中有較多的表兄弟姐妹或堂兄弟姐妹互為玩伴。而由第一代獨生子女繁衍出的第二代獨生子女,也就是現在的大部分00后,家庭規模越來越小,親屬同輩越來越少,加上人口流動頻繁,少有的親屬同輩也較為疏遠。

          00后這一階段的出生率跌至了最低點,平時家庭、學校二點一線的生活,繁重的課業負擔,原本在親屬同輩圈的社交就少,在學校的熟人同輩圈的社交也越來越少。

           

           

          2018年發布的《00后來襲-騰訊00后研究報告》中說到,“75%的00后渴求有更多的時間跟同伴在一起”。00后在現實生活中缺失的同輩圈社交,更有強烈的訴求去互聯網上尋找。他們有著更為復雜的社交需求,通過與同輩圈的互動,建立同輩伙伴關系,從中獲得陪伴感、歸屬感和自我認同,形成自我認知。

          回顧這幾年社交的變化,技術讓社交體驗從“線上線下割裂”向“虛擬空間映射真實世界”發展,00后的線上社交需求更加強烈,我們如何解讀用戶、解讀人群,尋找他們的需求痛點。接下來,本文從自我展示、匹配連接、溝通互動的社交體驗路徑來探討社交的設計趨勢和特點。

           

          最初的互聯網社交身份是簡單的虛擬身份ID:虛擬頭像、昵稱、個性簽名、QQ秀,當時的社交體驗線上和線下完全割裂,用戶的自我展示強調純線上人設打造。隨著硬件設備和圖像技術發展,用戶慢慢豐富社交資產,用真實身份交友,高清美顏自拍、沙雕表情包和聲音名片,線上的自我展示與線下生活緊密聯系。而現在,更多人用虛擬形象代表自己,技術的進步讓虛擬形象的展示更完美、更逼真。

           

          1-1 真實身份展示從單一趨向于全面

          用戶在展示自我的時候往往需要填寫大量文字信息和傳輸多張精修過的照片,導致編輯成本高、瀏覽效率低。視頻化的普及讓用戶隨時隨地記錄自己,在這種沉浸式的自我展示中,身份信息傳達更加有效和真實,也進一步放大用戶的自我炫耀感。

          Feels的個人資料由全屏照片、視頻、問答組成,用story的交互方式進行瀏覽。

           

          1-2 從聲音名片到聲音形象,更加賦予了情感和靈魂

          語音的優點在于比文字傳輸效率高,一篇完整的文字自我介紹用語音三言兩語就說完了。而語音的缺點是無法在嘈雜的公共環境中使用,所以老年人最愛用語音,因為他們私人空間較多。疫情讓人們大大減少了旅游和外出娛樂,享受個人空間的時間變多了,從而縮小了語音使用環境受限的缺點,放大了傳輸效率的優點。在今年,出現大量語音房社交,語音從“蘿莉音”“正太音”的聲音社交名片變成展示個人形象的方式。

          Clubhouse帶來語音社交熱潮,Facebook、Twitter也相繼上線語音房hotline和Spaces,用戶可以找到一個感興趣的主題房進行聊天或圍觀,那些通過短短幾分鐘發言就吸粉的高質量用戶,通過聲音賦予了個人的情感和有趣的靈魂。

          Reddit Talk 

           

          1-3 從“我是誰”到“我們的關系”

          展示自我除了從展示者的角度來設計“如何更好的展示社交資產”外,也要從看的人的角度考慮“如何更好地了解他”。

          ios15從spotlight輸入聯系人的名字,對方個人信息會智能拉取你們相關聯的信息,包括最近的聊天、共享的位置和照片。

           

          Snapchat能根據生日、出生時間、地點生成個人星座運勢和個性,還能和好友進行星座合盤。通過個人資料之間的交互,強化雙方身份的情誼特點。

           

          1-4 虛擬和真實之間,越來越強調“真實”

          虛擬形象的概念不新鮮了,2003年QQ秀是虛擬形象的雛形,Y世代網民根據自己的喜好拼出屬于自己的QQ秀形象,用于QQ聊天時的自我形象炫耀和情感表達。Z世代逐漸成為互聯網的主力軍時,他們的個性習慣和獨特的表達方式讓虛擬形象在社交中的使用需求愈發強烈?!禯世代圈層消費大報告》提出z世代五大典型興趣圈層為:電競、國風、二次元、模玩手辦、硬核科技。Z世代已經從他們的興趣中建立了對虛擬形象的情感,興趣成為他們建立自我人設的重要手段,他們跳出固定人設,在不同興趣圈層展示多樣個性,使用特定沖浪語,以此獲得歸屬感和認同感。

          高新技術的發展讓虛擬形象變得越來越高質量。蘋果的Memoji、Snapchat的Bitmoji和Facebook的avatars讓虛擬形象成為自己的化身,用于個人資料展示以及聊天表情包、合照、視頻互動等場景。Snapchat最新的資料設計中展示了3DBitmoji。

           

          依靠面部捕捉、表情捕捉、動作捕捉的技術,實現了真人與虛擬形象的動態同步,降低了真人化虛擬形象的設置成本。在SXSW2021音樂節上,展示了Facebook新avatar系統推出的VR社交應用Horizon。人與人能通過虛擬形象進行實時互動,除了有自己逼真的形象外,還具備真實的眼神表情和肢體動作,還會根據肢體動作變化不同情緒。

           

          大數據和人工智能時代,融合了AI技術的虛擬形象也在近幾年層出不窮。與真人虛擬形象不同的是,它不受對方在線的限制,能隨時進行實時互動,來滿足用戶對陪伴和娛樂的需求。麥當勞推出一位唱跳型愛豆的虛擬形象,她可以和小朋友進行溝通互動,一起跳舞,跟小朋友講故事,增加與消費者之間玩伴、陪伴關系。

           

          麥當勞虛擬偶像“開心姐姐”

          用戶在社交網站分享動態,維系自己的人設,獲得群體的存在感和認同感。在未來,這些記錄和創作的內容是否會形成自己的虛擬空間?每一個人不同的故事動態與空間產生聯系,形成自己獨有的虛擬空間社交資產。

           

          1-5社交人格從「完美人設」到「透明人設」

          隨著好友列表數量增多,很多人開始逃離朋友圈,人們在朋友圈的人設經營也越來越謹小慎微,開始疲于“完美”人設的表達,社交產品開始減壓。正如越來越多的年輕服裝品牌進行的「透明商品運動」,他們在品牌宣傳時,將商品從生產到制作的全過程透明化公開給消費者?!竿该魅嗽O」是反對當今社交信息流充斥著的完美人設,鼓勵自我展示更加真實和未經編輯。

          Dispo復古相機拍攝后需要24小時才出片,并且沒有任何美圖的編輯工具。傳達現實生活中不完美的時刻也是值得捕捉和分享的。

           

          Poparazzi能連續拍照變成GIF進行分享,同樣也傳達未經過編輯的更真實的自我展示。用戶用emoji進行互動,僅展示動態收到的emoji表態數量。

           

          你是否會因為動態無人互動而焦慮?是否會因為很久不更新動態而失去展示的動力,慢慢社恐?instagram和Facebook允許用戶隱藏帖子的贊數,來減輕用戶的壓力和焦慮。

           

           

          2-1 匹配趨向于多元化

          調查發現,現實中兩位互不相識的陌生人要花50小時,才可以在路上叫出對方名字,再投入40小時,才能蛻變為真正的友情?;ヂ摼W幫助用戶高效匹配,縮短認識的時間,降低認識的成本。

          近幾年,用戶的喜好正在極速分裂和細化?!?0后來襲-騰訊00后研究報告》表明73%的00后會主動地獲取資源來發展自己感興趣的領域。由于現實中同輩社交圈狹窄,他們需要在互聯網的社交陣地上尋找更垂類的興趣伙伴,比如云學習伙伴、游戲玩伴、coscp等,線上社交在不斷垂直細分以便更快捷的連接同輩伙伴。

          隨著傳輸速度的發展,匹配連接的體驗具有更實時的交互和面對面的互動體驗。Distance Disco是一款云蹦迪平臺,疫情期間,大家在各自房間里通過在線視頻就能開啟一場線上舞會,結識一起蹦迪的朋友。界面上的視覺元素和色塊會隨著音樂節奏變化,增強迪斯科的互動氛圍。

          Honk匹配陌生人聊天的動畫,傳達了穿越了人山人海,遇見了你的感覺。頭像出現時,出現招手動畫,像是剛剛見面的人招手打招呼。、

           

           

          2-2 匹配提升安全感和隱私保護

          現實生活中我們都有意識地保護自己的隱私,而到了互聯網,卻容易放下戒心將自己的信息分享給他人,線上社交會放大陌生人有趣、友善的一面,卻也隱藏了人性的缺點。社交產品的在幫助用戶建立社交關系的同時,也要提升用戶隱私保護和社交安全的體驗。

          Instagram帳戶注冊時,未滿16歲的未成年人默認使用私人帳戶,僅粉絲才能查看其發布的信息,在平臺內容分發和互動上與成年人帳戶進行隔離。當用戶更改成公共帳戶時,會給到提示強調私人帳戶的好處。

           

          Snapchat推出“好友檢查”,用戶可以快捷私密地刪除不聯系的人,確保好友列表里仍是真正的朋友。

           

          Tinder的一項調查顯示,40%的人在Tinder中發現了前任,24%的人遇到了家人。為了保障用戶隱私,用戶可以上傳他們的聯系人名單以選擇不想在app中遇到哪些人,屏蔽所選的聯系人。

           

          在社交產品中,聊天是關鍵的一環,匹配到合適的用戶后,如何加強雙方情感連接和信任的紐帶讓用戶為關系而留?從書信到電報到電話到視頻通話,都是通過技術的發展獲得了更高效真實的溝通體驗,線上溝通的用戶體驗一直不斷還原線下的真實體驗,疫情加速了多人在線視頻通話的發展,既讓人在溝通時保持社交距離,又讓人感覺對方近在遲尺。

           

          3-1 更臨場

          相較于面對面溝通交流,線上的交流在聽覺、視覺、觸覺、情緒傳遞的體驗上,決定了用戶社交臨場感的強弱。

          Honk用文字交流時,能看到對方一個字一個字實時的輸出,模擬真實的說話方式。

           

          2021年Google I/O大會的3D視頻聊天設備Project Starline,利用多個高分辨率攝像機和深度傳感器在不同角度捕捉用戶,以3D的效果進行人物呈現,營造對方真的就在對面的裸眼3D感。

           

          2021年F8大會上,Facebook提出用于AR視頻通話的MultipeerAPI,更方便創作者制作AR特效,用于多用戶、多屏幕的共享AR體驗。用戶在多人視頻通話時,視頻中會出現太空或篝火的AR特效,讓視頻者感受到大家都在同一個共享空間。還支持輕量級游戲,多位玩家屏幕由一根曲線貫穿,玩家用臉引導甜甜圈共同完成接力游戲。

           

          2021年IOS15的更新,Facetime使用的空間音頻讓通話的聽感更加自然、逼真,仿佛在同一房間面對面聊天。

           

          面對疫情人們在生活中的社交禮儀都以非身體接觸式動作替代,線上社交的頻次和密度大大增加,視頻通話在視、聽處理上越來越自然和逼真,在觸覺上也向著《頭號玩家》的男主角在虛擬空間中感受到的虛擬觸覺傳遞到現實中那樣在進化。美國西北大學的研究中,一位媽媽與孩子視頻通話時,通過撫摸屏幕,能把來自媽媽的撫摸傳遞到孩子身上的“AR皮膚”上。未來在虛擬社交中也能獲得真實的觸碰,加強情感的連接。

           

          3-2 更個性

          個人展示是單向的,溝通交流是雙向的,雙方在不斷交換彼此之間的狀態和感受,從中獲得被了解和認可。個性聊天氣泡、表情包、自定義聊天背景,幫用戶在溝通交流時展現自己獨一無二的個性。線上社交的用戶語言設計要打造個性化的社交氛圍,讓用戶的個性在溝通中被挖掘和展現。

          MUZE在聊天中可以自由擺放文字、貼圖、涂鴉,讓交流更個性化和自由。

           

          Google I/O大會推出的全新設計語言Material You中,系統會基于用戶選擇的壁紙進行自由取色,并應用到UI中。是否聊天的UI也能隨著聊天中的圖片,或是聊天發送的表情文字提取心情語義,進行UI的變化,加強情緒的傳達。

           

          3-3 場景化

          人和人的社交通常依附于不同的場景,群聊或好友分組就是將特定的社交關系進行場景設定。比如“火鍋突擊隊”“老廢物樂園”“吃瓜小分隊”依附社交場景來進行互動,幫助用戶帶入社交氛圍。

          咖啡館社交,通過構建咖啡館場景,傳達和陌生人進行一場閑聊的慢社交體驗。

           

          Facebook的視頻通話,用煙花和禮帽的AR特效來構建派對的社交場景。

           

          2021年WWDC大會上,現場用不同的Memoji營造了線上觀眾參與會議的場景。

           

          3-4 感官刺激

          2021年Google的一份統計數據表明,用戶平均注意力時長從12s下降到9s,而00后的平均注意力僅8s。面對這樣的用戶,需要讓他們在短時間內獲得極大的感官刺激來延長注意力,以及在溝通交流時有更極致的情緒表達。

          Honk可以同時發送大量的emoji表情。

           

          QQ團隊運用Lottie技術推出每秒60幀超高幀率、動效更細膩的小黃臉表情包。

           

          微信的表情包不僅帶來視覺上逼真的3D動畫效果,屏幕上其他內容也會隨之震動,還有觸感上的沖擊。

          網絡表情包 

           

          3-5 輕娛樂、游戲社交

          《社交媒體趨勢報告》提到“和朋友保持聯系”一直被列為是使用社交媒體首要原因,但在16-24歲的用戶中,主要驅動力變為“尋找搞笑和有趣的內容”。青少年通過線上社交彌補線下社交缺口,獲得同輩認同,排解孤獨和學習壓力?!敖M隊開黑”“一起微光”“找長期固聊固玩”,00后們的社交需求更多放在娛樂、游戲化社交上。社交體驗也從物理空間的連接轉變到精神空間的連接。

          用戶在Housparty進行視頻聊天時,如果感到無聊,可以玩一場輕松的游戲,游戲過程中可以通過視頻看到對方的狀態。

           

          Snapchat正推出一種叫Connected Lenses的新型增強現實鏡頭,它可以讓不在同一個物理空間的用戶一起進行AR游戲,比如共同組建樂高模型。

           

          IOS15中Facetime加入Shareplay功能,可以與朋友共享屏幕,一起線上追劇、聽音樂、玩游戲。

           

          Tinder在今年推出第二季Swipe Night活動,用戶通過觀看每周一集的互動故事,向左或向右滑為故事中的角色做決定,每一集結束后會匹配到在故事中做出類似選擇的用戶,并可以繼續相關話題的聊天。

           

          結尾

          科技重塑了我們的生活。線上社交讓我們日常溝通更為方便,也讓我們輕松維系現實中的社交關系,越來越多的人依靠它構建新的虛擬關系,互聯網帶來溝通便利的同時,也減少了人與人面對面交流的機會。

          美國傳播學家艾伯特·梅拉比曾給出一個公式:信息溝通傳遞=55%視覺+38%聲音+7%語義。大意是人們在現實生活中進行面對面溝通交流時,7%是語言上的內容,剩下的是面部表情、肢體動作、目光接觸、語速語調等非語言內容的交流。隨著技術的進步,社交不斷在補充非語言內容交流的缺失。在自我展示中,無論是視頻化、聲音形象、富有表情和肢體動作的虛擬形象,還是溝通場景中越來越臨場的體驗和充滿感官刺激的表情符號,線上社交的趨勢都在不斷映射線下社交的體驗。

          最后,你還想看ISUX什么趨勢的文章? 歡迎在評論區留言呀~

          感謝閱讀,以上文章由騰訊ISUX團隊創作,版權歸騰訊ISUX所有,轉載請注明出處,違者必究,謝謝您的合作。 

           

          原文地址:ISUX

          作者:騰訊ISUX

           

          轉載請注明:學UI網》2021-2022設計趨勢ISUX報告·社交APP篇

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

          截屏2021-05-13 上午11.41.03.png

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

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



          設計師必備的Chrome插件,超好用?。?!

          seo達人



          01.Go Full Page

          設計師在網上沖浪時,看到一些排版精美、設計優秀的界面總想要保存下來,以便日后尋找靈感。

          不知道大家都是怎樣保存整個網頁的。

          我之前的笨辦法是這樣的:先是一屏一屏地截圖,然后再拼接起來,特別是拼連接處時需要小心翼翼地對齊,簡直是太麻煩了。

          現在的高效方法就是使用Go Full Page,它是整個網頁的截圖工具,可以輕松松松地保存整個頁面。

          輕輕動一下手指

          圖片

          便生成了一個長圖

          圖片

           

          02.WhatFont

          如果我們想查看網頁中的字體,這就是神器WhatFont。僅僅通過鼠標停留在字體上就可以查看Web字體,簡單又優雅。

          圖片

           

          03.ColorPick EyeDropper

          我經常有一種苦惱,比如同樣是藍色,為什么別人家的顏色這么干凈清透,令人愉快?這時候就不得不舔屏了……

          ColorPick EyeDropper就是一款吸色工具,能夠直接從網頁中選取顏色值。

          圖片

           

          04.Window Resizer

          當想對各屏幕的尺寸測試設計稿時,可以使用Window Resizer快速調節,了解設計稿在不同屏幕上的兼容性。

          圖片

           

          05.CSS Peeper

          如果想更加全面的獲得網站上的一些信息,比如圖標、svg、圖片、字體樣式、元素間距等等,CSS Peeper便是一個完美工具。

          可以查看字體樣式,可以查看元素之間的間距

          圖片

          可以查看網頁中使用的顏色

          圖片

          可以查看網頁中出現的圖片或圖標

          圖片

           

          Chrome拓展程序的安裝也是超簡單,在拓展程序中搜索,然后點擊應用就可以啦。

          拓展程序地址:https://chrome.google.com/webstore/category/extensions

           

          原文地址:栗子設計喵 (公眾號)

          作者:栗子

          轉載請注明:學UI網》設計師必備的Chrome插件,超好用?。?!

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

          截屏2021-05-13 上午11.41.03.png

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

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



          適老化設計研究實踐

          資深UI設計者

          編輯導語:現今以至遙遠的將來,我們將面對一個殘酷的現實問題:人口老齡化。未來將有很多人群去關注這個群體,但是在市場上,對老年人的產品還是很少的,還存在很多問題。本文應對這個問題,展示不同適應老年人的產品設計細節,我們一起來看看。

          當前,我們正面臨老齡化問題的嚴峻挑戰。

          統計表明,中國的老齡化人口已達到2.64億,且這一數據仍在持續增長,而老年人在生活、情感上都面臨諸多問題。

          • 首先,老年人在視覺、聽覺、肢體、認知方面都出現了不同程度的退化,無法平等地獲取信息和服務;
          • 其次,年輕人涌向大城市尋找機會,老年人被迫成為空巢者,疫情的發生更使親人長期兩地分離,老人情感孤獨缺少陪伴;
          • 另外,疫情的爆發也促使線下服務轉為線上化,老年人不能很好適應這一轉變,遇到很多困難。

          但是研究發現,市場上目前沒有產品很好解決了上述問題。

          當下移動APP產品缺少對老年人體驗的深層次關注與設計,只通過單一加大字號與簡化功能等解決基礎體驗,缺乏通過新技術應用和更全面的適老化設計服務老年群體,老年人的需求依舊未得到關注和滿足。

          因此,百度基于自身雄厚的AI技術和精細、系統的適老化設計適時推出百度大字版,使老年人更平等地獲取信息和服務、獲得情感陪伴。

          百度大字版精細系統的適老化設計研究實踐

          百度大字版精細系統的適老化設計研究實踐

          一、精細系統的適老化設計:易閱讀、易收聽、易操作、易理解

          目前行業內缺失成體系的老年人研究報告,針對老年人的研究資料分散在建筑/平面/醫療/家居等各個行業,同時業內也缺少針對老年人系統的設計標準或設計指南。

          現有無障礙設計標準針對殘障人士,且部分標準只適用于PC端,不適用于老年人和移動產品。

          因此在進行百度大字版的適老化設計時,我們系統的研究了老年人面臨的問題、PC端無障礙設計標準及其他相關資料,產出了系統的移動端適老化設計標準體系,同時結合百度大字版實際場景產出了解決方案。

          適老化設計包含:易閱讀、易收聽、易操作、易理解四個方面,后續將詳細闡述。

          百度大字版精細系統的適老化設計研究實踐

          1. 易閱讀

          隨著年齡增長,老年人會出現視力下降、色彩感知弱、動態視覺減弱的問題。

          老花眼、眼睛進光量減少等問題會導致視力下降。

          眼睛晶體渾濁,晶體變黃的現象會導致色彩感知弱。視力減退,注意力降低,導致眼睛失去快速對焦的能力,動態視覺減弱。

          因此為了使老年人更易獲得視覺信息,我們對界面元素做了一系列的改造,使內容更易閱讀。

          1)增大字號

          增大字號是適老化設計最有效的手段。

          PC端WCAG無障礙設計標準建議字號可以放大到200%。

          按不同的閱讀媒介與人眼距離進行推導,移動端字號大小建議在60px-81px之間,標題、正文、輔助信息等不同信息層級采用不同的字號標準。

          此字號標準經過眼動實驗和用戶訪談進行了雙向論證,形成完整覆蓋各信息層級的字號大小標準,已經在百度大字版落地。

          百度大字版精細系統的適老化設計研究實踐

          字號與眼睛距離對照圖

          百度大字版精細系統的適老化設計研究實踐

          字號標準體系

          百度大字版精細系統的適老化設計研究實踐

          字號應用場景

          2)使用符合老年人生理、心理特征的顏色

          老年人眼睛晶體變渾濁、變黃,導致對色彩的感知減弱,且研究表明老年人更喜愛溫暖明亮的顏色,更希望感受到活力而不是蒼老。

          因此在顏色的設計上,我們通過增加色彩對比度到不小于3:1、大量使用暖色調、減少紫色和青色的使用3個手段,來進行界面色彩的設計。

          百度大字版精細系統的適老化設計研究實踐

          顏色的選取和使用

          3)提供有效的反饋提示

          老年人的動態視覺減弱,對動態內容的捕捉和感知速度明顯下降。

          因此,對界面中短暫出現的提示性信息,我們在現有提示時長的基礎上延長了一檔。

          例如現有提示的停留時間小于3秒時,百度大字版延長到3秒,現有提示的停留時間在3-5秒之間時,百度大字版延長到5秒。

          現有提示的停留時間在5-7秒時,百度大字版延長到7秒。超出以上時間則提供適當的關閉機制,避免打擾。

          百度大字版精細系統的適老化設計研究實踐

          提示時長適當延長

          2.易收聽

          隨著年齡增長,老年人也會逐步出現聽力下降的問題,聽力損失程度受地域、受教育程度、疾病等多重因素影響,且高頻和低頻聽力損失程度更深。

          因此我們通過增加音量、適當降低語速等方式幫助用戶更好的獲取聽覺信息。

          1)增大音量

          針對老年人聽力下降這一現象,我們適當增大了音/視頻的音量。

          研究表明,老年人聽覺平均感知音量在67.5~75.3分貝之間,因此在視頻開始播放時,我們對低于設定值的音量適當增加到約44%。

          百度大字版精細系統的適老化設計研究實踐

          iOS系統音量分布

          2)降低語速

          為了保證老年人有效的接收到聲音信息并進行理解,音/視頻的播放速度也需要適當下降。

          因此,我們減少了高檔位語速,并提供了高、中、低3檔語速,使老年人選擇適合自己的速度,更有效的獲取聲音信息。

          百度大字版精細系統的適老化設計研究實踐

          速度檔位選擇

          3.易操作

          移動應用需要通過手勢交互來完成任務,但老年人的肢體運動能力也會逐漸下降。

          動作精準度下降使老年人無法準確的完成手勢操作,對動作的精細控制程度降低。

          同時老年人相較年輕人運動更加遲緩,逐漸出現操作遲疑、猶豫或暫停,運動幅度或速度也會下降。

          因此為了保證老年人可以準確的完成操作,我們采用了增大觸控區、降低手指運動距離和精準度要求、提供有效的反饋提示、操作功能顯性化等方式。

          3)增大觸控區

          增大觸控區是使移動應用易操作的最簡單有效的方式,同時視覺設計上也需要讓老年人感知到觸控區增大。

          我們通過對iPhone XS Max三倍屏的分辨率和物理尺寸換算,結合人拇指和食指的點擊區域大小,推導出移動應用上,觸控區應大于等于112px×120px。

          百度大字版精細系統的適老化設計研究實踐

          觸控區域示意

          2)降低手指運動距離和操作精準度要求

          老年人的肢體運動能力下降,難以完成長距離、長時間、連續、高級的操作。

          因此我們集中界面的主要操作在屏幕下半部分,保證用戶在使用時手指移動的距離更短,同時減少使用具有明確方向性、精準度要求的高級手勢,如雙擊、旋轉圖片到正向等。

          百度大字版精細系統的適老化設計研究實踐

          降低手勢操作的精準度要求

          3)提供明確的操作反饋

          為了提醒老年人注意、告知其已完成操作、增強操控感,我們在特定場景增加了振動反饋,如臨界值、出錯、滑塊、警告場景。

          百度大字版精細系統的適老化設計研究實踐

          振動反饋

          4)隱性操作顯性化

          為了減輕用戶的學習難度,我們將所有隱性功能或需要手勢操作觸發的功能進行了顯性化設計,如點擊底bar刷新,功能隱性不易發現,百度大字版采用動態刷新圖標的形式,增強底bar可點擊刷新的感知。

          百度大字版精細系統的適老化設計研究實踐

          隱性操作顯性化

          5)輔助用戶輸入

          現實生活中,很多老年人不會使用輸入法,而且肢體運動能力的退化也為輸入帶來了不便,移動設備的輸入法操作區域小難以精準操作。

          因此我們依托百度的AI技術,提供了語音搜索和圖像搜索能力,使老年人可以方便的通過語音和圖像搜索主動探索獲取新知,答疑解惑,跟上時代進步。

          百度大字版精細系統的適老化設計研究實踐

          依托百度AI技術提供語音和圖像搜索能力

          4.易理解

          隨著年齡的增長,人的認知能力也會逐步下降,老年人會出現反應慢、學習力下降、判斷力下降的情況。

          他們很難一遍學會新內容,也難以判斷信息的真偽。因此我們通過簡單直白的文案話術、清晰明確的圖標設計、可信的來源設計來使內容易理解,安全可信。

          1)采用通俗易懂的文案

          由于老年人觸網時間短、受教育程度不同,難以理解專業的互聯網術語,為了幫助他們更好的使用產品,我們對專業術語都進行了簡化,采用了通俗易理解的文案。

          百度大字版精細系統的適老化設計研究實踐

          文案適配前后對比

          2)提供清晰明確的圖標設計

          為了幫助老年人更好的理解和使用產品,百度大字版的圖標設計都采用了簡單易理解的圖形,同時功能入口大部分采用圖形和文字結合的方式,通過雙重手段幫助老年人理解產品功能。

          百度大字版精細系統的適老化設計研究實踐

          圖形對比示意

          3)提升信任感

          在內容信息來源中或涉及經濟交易的環節,百度大字版通過增加官方標簽、提供官方平臺保障的方式來提升產品整體的可信度,增強老年人對產品的信任感。

          百度大字版精細系統的適老化設計研究實踐

          官方標識和保障示意

          4)提供即時的幫助

          為了隨時解決老年人遇到的問題,百度大字版提供了暖陽熱線,使老年人可以隨時打電話獲取專業人員的幫助和解答。

          二、AI賦能,情感陪伴

          由于很多年輕人去大城市尋找機會,導致產生很多空巢老人,他們情感孤獨,缺少陪伴。

          疫情的爆發,更使老年人在節假日也難以與家人團聚。

          因此百度大字版通過語音合成等AI能力,還原兒孫親友的真實聲音,用于全局內容播報朗讀,使老年人感受到至親至愛仿佛陪伴在他們身邊,緩解老年人的孤單和思念之情。

          全局語音朗讀也能解決老年人的閱讀障礙和長時間閱讀導致的視覺疲勞問題,同時可以解放雙手,使老年人隨時隨地聽朗讀。

          百度大字版精細系統的適老化設計研究實踐

          語音合成

          百度大字版精細系統的適老化設計研究實踐

          全局內容朗讀場景

          三、豐富內容,充盈生活

          百度大字版圍繞老年人的實際生活需求,依托百度的內容生態和個性化推薦技術,提供了符合老年人興趣的圖文和音視頻內容,一站式滿足了老年人的內容消費需求。

          • 在設計上,我們通過AI技術,對視頻增加智能字幕,方便老年人獲取視頻信息;
          • 在內容流的操作上,通過統一的容器和流式交互,為老年人提供便捷的操作體驗,使他們更方便、平等的獲取信息和內容。

          百度大字版精細系統的適老化設計研究實踐

          智能字幕

          四、生活助手,便捷服務

          百度大字版還提供了多種實用工具,滿足老年人疫情時代和日常的生活訴求。

          疫情導致線下服務線上化,因此為了幫助老年人適應這一生活方式的轉變,百度大字版提供了在線政務工具。

          很多老年人承擔了教育孫輩的責任,因此我們提供了一些輔助教學工具,幫助他們帶孩子。

          更有疫情地圖、垃圾分類等貼合日常生活場景的工具,使智能技術更貼近、融入老年人的生活。

          百度大字版精細系統的適老化設計研究實踐

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

          文章來源:人人都是產品經理   作者:百度MEUX

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          B端體驗細節:列表構建器的設計模式

          資深UI設計者

          什么是列表構建器

          在了解“列表構建器”之前,我們先來了解下什么是“列表”和“構建器”。

          列表是一種數據項構成的有限序列,即按照一定的線性順序,排列而成的數據項的集合。常見的列表有新聞流、表格、事件列表、好友列表等。

          在 java 中,構建器主要用于把復雜對象的構建過程抽象出來,使得復雜對象的構建可以分部件分別創建,從而根據需要構建出來非常復雜的對象。由此我們可以推演出日常中大家口口相傳的圖表構建器、地圖構建器等實際是在闡述圖表、地圖等依據某種規范或規則生成此類對象的過程。

          因此,我們今天要聊的“列表構建器”就是通過某種途徑,達到用戶所需的列表對象的過程。

          在 B 端界面中,穿梭框就是列表構建器的一種展現形式,用戶從較大的數據集合中挑選出符合自己所需的較小的數據集合。通常大數據集合在左邊(待選區),稱之為源數據區;小數據集合在右邊(已選區),稱之為目標數據區。

          為什么需要列表構建器

          B 端界面上為何會需要列表構建器這種組件呢?從實踐經驗來看,無外乎以下 2 點:

          1. 所見即所得

          源列表和目標列表在同一個頁面,用戶無需通過跳轉頁面來回查看源和目標數據,不僅提升了用戶操作效率,也提升了用戶操作的愉悅性。

          2. 數據展示量大

          列表構建器可展示的源數據空間和目標數據空間都比 select 組件大的多,這非常方便用戶在界面上自由與直觀地操作。對于 B 端產品來說,數據量大是不爭的事實,在展示、操作、呈現上也是急需解決的問題。列表構建器的出現在一定程度上解決了某些場景下的問題。

          什么時候使用列表構建器

          使用列表構建器設計模式的情景為:

          1. 源數據量大,且目標數據量也大的情況下,適合使用;
          2. 不想通過滾動、跳轉等方式查看源和目標數據時,適合使用。

          6 種常見的列表構建器

          根據不同場景下的不同需求,衍生出了列表構建器的多種形態,下面分享一下 B 端常見的列表構建器場景設計模式。

          1. 基礎列表構建器

          What 是什么

          基礎列表構建器是列表構建器的基礎用法,展示了數據量不大的源數據,用戶通過選擇后確定目標數據。

          When 使用場景

          當源數據量小于大約 50 條時,且選擇的目標數據要直接可見時,可以考慮使用。

          How 如何使用

          用戶直接通過滾輪查看源數據中的目標數據,然后選中它們。當確認后,點擊穿梭按鈕將已選擇的數據轉入已選區。

          B端體驗細節(四):列表構建器的設計模式

          2. 可搜索列表構建器

          What 是什么

          展示了數據量較大的源數據,且有搜索功能,用戶通過選擇后確定目標數據。

          When 使用場景

          當源數據量較大,用戶已經無法通過在有限容器中滾動鼠標快速查閱和定位數據時,可以考慮使用。

          How 如何使用

          用戶通過搜索確定目標數據,勾選后再通過穿梭按鈕將已選擇的數據轉入已選區。

          B端體驗細節(四):列表構建器的設計模式

          3. 可排序列表構建器

          What 是什么

          該列表構建器可對數據進行排序,讓用戶將自身關心的數據前置。

          When 使用場景

          當目標數據量較大,用戶需要將自身所關心靠前展示,進行查看、對比、分析等操作時,可以考慮使用。

          How 如何使用

          用戶通過搜索確定源數據中的目標數據,勾選后再通過穿梭按鈕將已選擇的數據轉入已選區;再在已選區中將某些數據進行置頂展示或前置展示。

          B端體驗細節(四):列表構建器的設計模式

          4. 可自動穿梭列表構建器

          What 是什么

          該列表構建器可直接將源數據穿梭到目標數據區。

          When 使用場景

          當勾選的源數據無需反復確認時,可以考慮使用,這大大加快了用戶的操作速度。

          How 如何使用

          用戶點擊待選區數據的添加按鈕,直接可將數據添加到已選區;點擊已選區數據的刪除按鈕,也可將數據回歸到待選區。

          B端體驗細節(四):列表構建器的設計模式

          5. 表格式列表構建器

          What 是什么

          顧名思義,表格式列表構建器以表格的形式展現,方便用戶多維度確認數據范圍。

          When 使用場景

          當用戶選取的結果數據需要數據本身的多維度屬性來確定時,可以考慮使用。

          How 如何使用

          用戶通過滾輪查看或搜索源數據中的目標數據,然后選中它們。當確認后,點擊穿梭按鈕將已選擇的數據轉入已選區。

          B端體驗細節(四):列表構建器的設計模式

          6. 標題式列表構建器

          What 是什么

          標題式列表構建器除了展現普通的數據,還有圖片等信息。

          When 使用場景

          當源數據的展現需要更加豐富時,可以考慮使用。

          How 如何使用

          用戶通過滾輪查看或搜索源數據中的目標數據,然后選中它們。當確認后,點擊穿梭按鈕將已選擇的數據轉入已選區。

          B端體驗細節(四):列表構建器的設計模式

          除了以上常用場景的列表構建器設計模式,根據業務的需求大家可以在此基礎上繼續拓展和衍生,豐富 B 端界面的表現力,及滿足業務日益豐富的場景需求。

          列表構建器以及衍生案例

          基于基礎的常用列表構建器,不同產品根據自身的實際需求衍生出了多類構建器,我們一起來感受下吧。

          1. sketch 常用功能構建器

          在 sketch 界面中,工具欄被設計成只顯示用戶認為常用的功能。用戶只需通過拖拽添加的方式從工具集合中將常用的功能添加到工具欄上。

          B端體驗細節(四):列表構建器的設計模式

          2. sketch 常用色彩構建器

          sketch 提供了常用色彩構建功能,對于設計師常用的顏色可以自行添加出來,形成一份常用色彩庫。

          B端體驗細節(四):列表構建器的設計模式

          3. 應用參數關聯構建器

          應用需要在關聯參數后才可運行。右邊為參數集合,左邊為應用與待關聯參數列表,用戶只需要從參數集合里面選擇目標參數拖拽到對應的應用容器中,即可完成應用與參數的綁定。

          B端體驗細節(四):列表構建器的設計模式

          4. 表格列顯示字段構建器

          當表格列非常多時,用戶可以選擇列顯示字段構建器來將常用列字段選取出來。如此表格會變得輕盈,且數據加載變快。

          B端體驗細節(四):列表構建器的設計模式

          5. word 底部欄元素構建器

          鼠標右鍵點擊 word 底部欄,會出現底部欄上可展現的所有元素。用戶點擊勾選后,元素被展現到了底部欄上。

          B端體驗細節(四):列表構建器的設計模式

          6. 自定義模塊構建器

          富途牛牛允許用戶自定義界面模塊,方便用戶按自身的習慣查看行情和操作等。用戶只需從富途牛牛提供的組件庫中挑選出自己需要的,配置成自己想要的模塊界面即可。

          B端體驗細節(四):列表構建器的設計模式

          7. 選成員構建器

          很多 B 端產品的成員管理模塊都需要涉及到添加成員,這時候會用到選成員構建器,將成員從一個池子添加到另一個池子。

          B端體驗細節(四):列表構建器的設計模式

          總結

          列表構建器在 B 端必不可少,產品經理和設計師根據產品本身的業務訴求,基于基礎的列表構建器衍生出了很多種玩法,以不斷提升 B 端的用戶體驗。

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

          文章來源:優設   作者:小果

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          用戶界面設計中的對比類型

          ui設計分享達人

          了解對比如何在設計中發揮作用,在用戶界面中可以找到哪些類型的對比,以及為什么它對積極的用戶體驗很重要。

          一般而言,“對比”一詞用于描述彼此截然不同的對象。談到視覺感知,對比度基本上與顏色或光線的差異有關,可以使物體清晰可辨。

          為什么對比度很重要?因為人眼自然會捕捉到對比度。圖像的最高可能對比度稱為對比度或動態范圍。更重要的是,對于色盲等視力不佳的人來說,對比度成為他們看到的物體的核心特征,并讓他們能夠區分它們。

          在學術藝術中,對比處理對立元素和效果的排列,例如明暗顏色、大小形狀、粗糙或光滑的紋理。在這種情況下,對比不僅可以用來吸引注意力,還可以設置情緒和氛圍,在藝術品中創造多樣性、視覺趣味和戲劇性。

          在設計中,對比度是影響效果的關鍵因素之一。 可掃描性網頁或移動屏幕的視覺層次結構。它使設計師能夠以一種方式呈現布局,告知用戶哪些交互點是重要的,哪些是次要的。對比度可以有效地吸引用戶的注意力并將其吸引到特定元素上,因此它在支持數字產品的直觀導航和可用性方面發揮著重要作用。

          Pass-On 應用程序登錄頁面的設計展示了有效的顏色和尺寸對比示例,為頁面構建了堅實的視覺層次結構。

          UI設計中的對比類型

          對比可以基于 UI 元素的不同特性,包括:

          A. 顏色:這種類型是人眼最自然和最明顯的對比之一;它適用于顏色明顯不同的情況,例如,通過互補、分裂互補或三元方案組合,這種類型的對比最廣泛地用于制作按鈕和其他關鍵導航元素。在網頁布局或應用程序屏幕中立即看到,支持清晰直觀的導航。

          B. 大?。哼@種類型的對比是基于首先引起注意的元素明顯大于其他元素。

          C. 形狀:通過使一個元素的形狀與其他元素不同來吸引用戶的眼球。

          D. 位置:在這種類型中,設計師以這種方式更改一個元素的位置,使其看起來不同,例如,文本片段的新段落以縮進開頭。

          E. 紋理:這里的差異是由于使用彼此明顯區分的紋理而建立的。

          F. 方向:改變元素的物理位置,使其在其他方向,這樣以不尋常的方式吸引用戶的注意力。

          經常想到的關于對比度的第一個想法是黑白的東西。在沒有陰影和多種顏色的情況下,單色圖像使用對比度作為表現潛力的主要助推器。這在用戶界面中的工作方式相同。更重要的是,與藝術品或攝影作品相比,對比度不僅會影響美感,而且對布局的可用性也有重大影響。因此,深思熟慮的對比度使用是使網站和應用程序用戶友好且易于使用的強大方法。

          排版對比

          另一種特定類型的對比是排版對比,它基于設計作品文本部分所用字體的區別特征的差異。

          加拿大字體設計師卡爾·戴爾定義了 7 種核心類型的排版對比:

          A. 尺寸對比:它是關于由表格創建的基本圖案的物理放大和用于文本的類型的重量。這里最常見的情況是使標題或標題明顯大于文本。

          B. 重量對比:粗體在同款較輕的對比中突出。它有助于將注意力吸引到文本的特定部分,并讓用戶了解它們的重要性。

          C. 形式對比:這里的形式是指大寫字母和小寫字母之間的區別,或者羅馬字母和它的斜體變體,壓縮和擴展版本,與標準類型協調的腳本類型——所有提到的都可以用于戲劇性的形式的改變。

          D. 結構對比:結構意味著不同類型字體的不同字母形式,例如單線無襯線與高對比度現代,或斜體與黑體。

          E. 紋理對比:這是關于字體的線條如何看起來像一個整體,這部分取決于字體本身,部分取決于它們的排列方式。

          F. 顏色對比:第二種顏色通常不如基本的白底黑字(或黑底白字)強調,因此必須仔細考慮需要強調的元素并注意色調值使用的顏色。

          G. 方向對比:這種類型是關于垂直和水平之間的對立以及它們之間的角度。出文本塊也有它們的垂直或水平方面,將寬的長線塊與高的短線列混合可以產生對比。

          另外,還有一些不太流行的對比,比如所謂的孤立對比,就是把一個詞或詞組放在遠離其他元素的地方,這樣就可以從人群中脫穎而出,以及對比按節奏(空間間隔)——破碎的部分形成對比并吸引注意力。

          對比輔助功能

          閱讀上面提到的所有內容,很容易假設這里的經驗法則是對比度越高,設計越好。然而,事實并非如此:以及任何其他設計方面太多并不意味著更好。雖然低對比度會使內容難以感知和閱讀,但過高的對比度會引起眼睛疲勞,使交互更加困難。

          根據網頁內容無障礙指南 2.0,文字的視覺呈現和文字的圖像應該堅持至少 7:1的對比度,以下情況除外:

          大文本:大文本和大文本圖像的對比度至少為 4.5:1;

          裝飾:作為界面組件的一部分的文本或文本圖像,作為裝飾沒有對比度要求。

          標識:作為徽標或品牌名稱一部分的文本沒有最低對比度要求。

          注意留白

          空白是留空的布局區域,不僅在對象周圍,還包括對象之間和內部??瞻资琼撁婊蚱聊簧纤袑ο蟮囊环N呼吸空間,因此它極大地影響了 UI 中應用的不同類型對比度的有效性。

          總結

          生活充滿了對比,無論你會采取什么方面。對于所有的生命,我們必須學會如何接受這一點,并嘗試享受如此多樣化和不可預測的生活。與現實相呼應,設計也充滿對比,并盡可能多地借鑒。

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

          文章來源:站酷   作者:對啊設計君

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          日歷

          鏈接

          個人資料

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

          存檔

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