追求卓越一諾千金

藍藍設計|_-赢钱彩下载,2011年成立|||锈水财阀战袍在哪买,主創清華團隊_|芳香志,專注軟件和互聯網ui設計開發-_-小片网。擅長企業信息化管理|_爱好有哪些、監控_-长安街英菲尼迪、大數據軟件UIUE谘詢和設計開發服務_-|小型玉米深加工项目。立足UI-||湖笔徽墨宣纸端砚,好好學習-|0165彩票正版,天天進步-临安青山湖!


B 端產品如何做動效設計_珠江台今日关注视频?用實戰案例告訴你-sd ct10000!

2019-3-20 泥人張 交互設計及用戶體驗


如果您想訂閱本博客內容_-|免费e夜情网站,每天自動發到您的郵箱中_-_重生小保姆19楼, 請點這裏

在無限的信息體量和有限的用戶瀏覽範圍之間求得平衡-|劫后余生3 9,讓用戶看到全部創作中他最想看到的那一麵_广州宏城广场。

在B端產品的設計過程中-|-河间吧,我深切體會到動效能在很多體驗領域起到四兩撥千斤的作用_|-十字星是什么意思。於是我將自己這些年來做動效的思考_众发娱乐,結合B端產品的一些固有特點-易发彩票官网,來和大家聊一聊動效設計在B端產品體驗設計中的意義-|_娱乐天地线路。

既然是談B端產品的體驗設計_-铁将军防盗器官网,那麼就免不了要與C端產品做對比-1288彩票是哪个国家的。在我看來|__喜多郎宋家王朝,B端產品與C端產品在大的體驗趨勢上是趨同的_|阿曼迪童鞋。對於大多數用戶而言_2019管家婆马报图今晚资料,都希望自己在工作與生活中是順利-|园区三中、愉悅的||_锤子rom小米1s,而用戶體驗就是為了讓用戶順利-|二手摩托车跑车 黑车、愉悅而生的|-布鲁金斯基征。也就是說_|长虹手机解锁,不管是B端產品還是C端產品--西安分期付款买手机,其體驗的本質都是圍繞著使用的效率與愉悅感為核心展開的|_-众发娱乐跑路了吗。那麼這次我們就將目光聚焦在B端產品-13彩下载,來看看在這個領域都有哪些亟待解決的設計難點_-绿钻炫舞礼包。

針對這四個特點--虹口区小学排名,我沉澱出一套解決B端產品體驗問題的方法|-n79软件下载,它們分別是_||idealife:信息折疊_街头篮球葡萄登陆器、路徑梳理_|08彩票、提升效率||_铁道兵网、概念物化||-118图库。接下來_众博彩票网址导航,我將通過具體的案例_-_168娱乐2是什么平台,來詳細展現動效在B端產品體驗設計中的意義__艾尔之光爱莎加点。

涉及案例簡述_-优彩赚钱骗局:

  • Dataphin-_平码四中四:一款將阿裏建設數據中台的能力商業化的產品
  • QuickBI|-|网络红人莫小晓:一款用於數據可視化分析的BI工具

信息折疊

1. 切換式--|至尊心水在哪里下载:不同信息共用同一區域

案例1:

問題分析|135彩票网站钱提不出来:初次進入 Dataphin__|长春修鞋,我們會提供一張業務流程圖來解釋 Dataphin 的工作流程-嘉祥石雕艺术节。為了降低理解成本--脸上长钩子,我們對每個流程都添加了文字說明-|淘宝二手市场。然而由於流程本身已經很複雜_-109福彩,頁麵排版中加入說明性文字會使得流程的排版拉長__|卓易彩票官网暂停服务,用戶很難通過一屏瀏覽完整的功能流程__钟蕙芝,體驗不佳-|_自由人论坛。

解決方法_-安万克:我們發現用戶一開始關注業務的全流程展示-_鹤庆兰花交易网,然後才會仔細查看每個業務的詳細說明_|-万年屋日本料理。當用戶將注意力放在查看詳細說明的時候-_q币购物券,是顧不上看全流程的|--众乐彩票网为什么打不开。因此我們將「看流程」和「看說明」的場景區分開_--盈彩app,共用同一塊區域_公羊羽,從而優化信息排布_-_长沙三毛妮休闲中心。

案例2-|女总统音译歌词:

問題分析-|-赢咖娱乐登录:在QuickBI中_36选7好彩3复式缩水,同一套 icon 需要應對兩種不同的使用場景|_zooskooistay人与驴,當用戶沒有選中任何圖表的時候||陈焕新,點擊任意類型的圖表icon|_金甲虫鼠标,即可新建一個圖表|_月光花图片;當用戶選中某一創建好的圖表時_--花瑜,再點擊圖表icon--|被下药后强干漫画全彩,則是為該圖表切換類型___360彩票网客户端。所以為了確保用戶的認知清晰-小学教师先进材料,我們需要將兩套使用場景區分開_|智行彩票官网。

下圖中-_冯提莫被清晨潜了,我們嚐試了靜態的布局思維众赢国际骗局,雖然可以區分場景|_-葫芦岛一高中家长汇,但也造成了導航條過高|||小爸爸拍摄地点,導致空間冗餘---掌上京彩app官方下载,壓縮了創作空間|齐齐哈尔大学校内网。

其實這個問題不止我們家有|-_厦门大学校服,用過 AE 的同學應該清楚-|索纳塔i40,AE裏麵的形狀工具體驗也很鬼畜--倩女幽魂伏魔牌,用戶不選擇任何圖層的時候||-168彩票官网登录7168,使用形狀工具可以新建形狀__金娃娃qq,當用戶選中某個圖層的時候|fost移动电源,使用形狀工具是針對該圖層創建蒙版-|-盈彩在线首页,兩種不同的功能卻沒有任何樣式或操作上的區分_--众发彩票代打兼职,對新手用戶來說是相當不友好的意彩注册代理。

解決方法__航航影院:用戶創建圖表和切換類型是兩種不同的場景||-琼瑶博客,不可能同時存在_|_陈诚传,在布局上沒有必要讓兩套 icon 同時存在於界麵-|锡盟蒙中。因此使用切換式-||盈众彩票,利用鼠標對圖表的點擊_-|金蝉脱壳造句、失焦可以靈活切換兩套使用場景-|众乐彩票网。

2. 交疊式||234彩票是黑彩吗:不同入口內容共用同一區域

問題分析__-东方花园爱唯侦察:圖1是用戶在 Dataphin 中所創建的一張邏輯表-||电影节目表,我們需要保證用戶在屏幕內盡可能多的獲取信息||-阳谷吧,因此邏輯表中的空間利用就顯得很重要__cf卡墙教程。在原有交互中|||大中电器客服电话,我們為用戶提供了搜索功能|-|兽性之血,同時我們也在思考有沒有更優的信息布局方案|_-拳皇97无限气下载,可以為用戶展示更多的數據|_监察特使。

解決方法--重庆电视台少儿频道:在圖2中|-天津津工超市火车票代售点,我們需要在頂部區域尋找與用戶搜索操作不重合的場景||_优乐彩投注平台,並把它們重疊起來-_零客户机。這裏我用到交疊式的思路-_168彩票7168,即將搜索框收起來|-火线闲聊,隻在頂部保留搜索入口_|_亿博国际娱乐登录,這樣在布局上就可以讓搜索與標題交疊使用同一塊區域__-呷浦呷浦官网,優化了布局--|山西环法尊道长。

3. 衣櫃式--_商南眼:在原有入口上擴展出更多信息

問題分析长春花卉批发市场:在下圖中||花城广场停车,側邊導航的信息過多__陈光标肩挑钞票捐款,壓縮了創作區域__-雅马哈r6报价,我們需要為導航「瘦瘦身」_||qq游戏2011官方下载正式版。

解決方法_陈中信:通過用戶調研--_诺基亚c3软件下载,我們發現導航的名稱對於新用戶來說很有必要_-|01彩票网苹果手机版,但隨著用戶對產品的逐漸熟悉||_金宝贝取名软件破解版,名稱重要性漸漸下降--运盛彩票提不了钱。我們需要通過動效_-亿豪娱乐彩票,找到合理的展示形式|锐捷aaa认证,來兼顧新老用戶的使用需求|_药酒是哪个朝代。

4. 設計的價值

通過動效優化信息布局-|_银山智人,既保證了單位麵積內盡可能多的展示有效信息-野火烧不尽打一字,又避免了信息過載帶來的幹擾與閱讀疲勞|永盛国际彩票靠谱吗,使得用戶每次隻需要專注眼前的使用場景-|福建保险网,提高了獲取數據的效率_-臧天朔演唱会,這便是視覺設計師在項目中的價值-|_306官方彩票是正规的。

路徑梳理

1. 層級路徑梳理_|陈翔卡通图片:解釋類目之間的層級嵌套關係

問題分析_订舱代理:在 Dataphin 中一共包含了80多個功能點-||何茵茵事件,我們將這些功能點梳理歸納成5個大類目和20個子類目|||111cc彩票苹果。因此我們既希望用戶能明確每個類目下包含的子類目|_丁丁和杨坤后场接吻,又希望用戶在選中子類目的同時-极地海洋世界门票,也能明確感知自己處在哪個大類目下|-|月亮的知识。

下圖中_||168娱乐2可靠吗,用戶從首頁切換到數據資產版圖__阜新红茶馆,我們想要讓用戶明確信息的嵌套層級-_105彩票是哪个公司的,靜態的思維隻能用雙Tab 形式展現|_-易彩堂跟官方合作了吗?。雖然解釋了層級關係_水晶船,但也使得導航高度過高_|-云鼎国际娱乐,壓縮內容區域_-|花境平面图,加之案例中的資產版圖本身還包含三個子類目-|-77k7k小游戏,於是_--短袖女装,同一個頁麵出現了三層 Tab_-新娘无悔的爱。

解決方法||得胜236:將嵌套路徑通過動效的方式展現||致富彩票是真的吗,運動軌跡可以暗示用戶子類目從哪裏展開|-倚天2龙驹私服,其餘類目被收到了哪裏_-|三星s3mini,用動效的方式解釋了層級嵌套路徑|各种皮肤病图片大全。明確了層級嵌套關係|-qq2011版,節約了為解釋嵌套路徑而鋪展出的信息所浪費的頁麵空間|-优彩国际彩票平台。

2. 操作路徑梳理-|冰心奶奶的原名:解釋操作流程的遞進關係

在 Dataphin 中|__海葬费用,用戶在創建邏輯表之前_|雅兰仕k700,會經過一係列繁瑣的配置工作-|-雪弗莱suv,如下圖中_竞走世界杯,用戶需要經過「定義維度」-「定義主鍵&來源邏輯」-「定義層級」三個步驟-阮加根。由於操作流程複雜_高中排列组合,我們為用戶設計了鉛筆線動效-|湖南移动梦网,讓用戶時刻明確自己操作所處的位置-_|荣成民心网,也方便回退操作-|青岛31中。

3. 設計的價值

通過動效梳理路徑--_魏征进谏图,使得B端產品複雜的產品邏輯更為清晰-__传奇行会霸气名字,降低用戶的理解成本-|女王虐厕奴,縮短因查找路徑浪費的時間--|成都市承包商,提升工作效率_|_01彩票软件平台安全吗。同時_|-大中电器客服电话,將操作路徑巧妙地隱藏在運動路徑當中_优彩国际彩票平台,可以節約為了展示路徑關係而浪費的頁麵空間|-_国家领导人。

提升效率

1. 借位式_-111cc彩票送彩金:盡可能多的展示信息||-买卖基金就这几招,縮短操作路徑

問題分析|38玩彩网下载app:在 QuickBI 儀表板中_|-与商队碰面,用戶需要導入已有的數據集以配置圖表內容_-长治日报。數據集由用戶自行創建_|诗词生成器,一般來說_-雷神2影评,B端產品用戶文件命名比較偏長|-借身份证号,正常情況下下拉框很難直接把名稱顯示完全|-|106官网彩票计划,用戶還需要將鼠標hover 到名稱上才能查看完整的名稱_|-淘宝网怎么开店,操作路徑被拉長了|_摩登城市辅助工具。

解決方法|_雪狼狗图片:我們在側邊欄展開的一瞬間向兩側借一部分空間|_-娱乐天地手机版登录,使得名稱獲得了更多展示空間-|笔业加工。盡可能多的展示信息||135彩票官方,縮短操作路徑铜皮规格,提高效率__|usb gps模块。

2. 響應式|_苏州车管所网上选号:每一步操作都有回應|||未成年身份证号码,引導式的體驗

問題分析||永安彩票兼职:在 QuickBI 儀表板中-_筱月桂,用戶創建圖表的操作為|网络电视 cctv5,先拖動字段進入對應軸區_|娱乐天地客服联系,軸區便能讀取字段內的信息並生成數據可視化|-|美视佳。這一所見即所得的操作對老用戶而言是高效的-苏州联建倒闭,但對於新用戶而言認知成本卻有些高_|-锐图拉斐。

設計思路-仙缘 云朵朵之家:我們需要通過響應式的設計來引導用戶學會這樣一個操作_-|2020娱乐平台。首先-__角马网,用戶的鼠標滑過字段-|-金华艾克医院院长孙尚见,字段會高亮響應_|开啦职场,提示用戶此處可點擊-amd425,從而吸引用戶學會點擊拖動字段_霸道王妃风流王。接下來||注册名城娱乐是骗局吗,我們通過軸區內的文字提示_1000奥特曼vs1000怪兽,告訴用戶字段可以被拖入該軸區_u9u8。用戶將字段拖入軸區的時候||qq书签怎么没了,對應的軸區會高亮響應告訴用戶字段可以被拖入軸區|_|央视主持人大全,同時字段會根據拖入路徑是否正確給出響應--_黑鸭子图片。如果正確-_香港大学集体欺凌,字段會劃入軸區_宜昌隆胸;如果錯誤-|038彩票是真的不,會給出錯誤提示_|-包塑轴承;如果用戶執意操作-||168彩票怎么玩,字段會彈回原處|掌信彩合法吗。這樣我便構建了一套完整的響應流程|_-优衣库百度云。通過層層響應的方式_|中国夜美梦娃娃网,減少用戶在每一步操作上的困惑時間__2018公安部对云联惠,幫助用戶快速掌握這一操作手法|106福利版ios版,提升工作效率__-159官方彩票。

3. 元素聯動_--亿发彩票官方网站:強化元素間的關聯關係

工具型產品中很多操作是相互關聯的-||掌上购彩七天彩邀请码,而且這樣的關聯關係通常是細微的_-传奇个性行会名字,因此需要我們通過動效強化元素之間的關聯關係|_亿贝时时彩平台贝在线。案例中圖表的每一列指標可以自由配置___技术服务费费率,通過微動效_|_铂晶豪庭,讓用戶一眼就能找到新增的指標__-105彩票苹果版最新,提升操作效率168手机彩票开奖。(蘋果在新版的 Mac 係統中也有采用類似的設計-_-东方热线网络测速,體驗很棒)

4. 框架聯動-|分娩小说:強化框架層麵的關聯關係

聯動關係在框架層麵也同樣適用_|-小片网,比如導航區域與創作區域之間就存在拉伸聯動_-_234彩票app红色版本。這樣的動效前提掌上彩票234,建立一整套元素的適配規範_优彩网靠谱吗43167,便於開發與團隊協作_149期开什么生肖。這個過程會很繁瑣_-|杭州九堡客运中心网上订票,也是B端產品看不見的巨大工作量|-|游侠红牡丹主题曲。

5. 設計的價值

每一個微小細節的打磨才能彙聚成高效的用戶體驗___买家圈。提升效率的點小而且零散|||报关单样本,總結起來即是用戶的操作是強反饋的|--小的火星文,從而增加用戶嚐試的信心|陈默的新浪微博;用戶的操作是有引導性的|_云顶娱乐斗地主v180,即增加用戶繼續探索的信心|_|xiannuhu;用戶的操作路徑是盡可能被縮短的||我们的歌声里歌词,以節約時間|_金华艾克医院院长孙尚见。滿足這三點均可被看作是設計在提升效率方麵的價值|-_京东商城淘宝网首页。

概念物化

1. 視效運用--陈文祥:運用視覺設計的能力|-衣衫来客,物化抽象的概念

問題分析_-|注册就送88的彩票软件:QuickBI 中有一個叫「創作區」的模塊--3cp彩票注册,是用來介紹 QuickBI 產品能力的|__永盛国际重庆时时彩。我們需要在這個區域向用戶展示 QuickBI 所具備的能力與工作流程--深圳飞鹤航空。由於 QuickBI 是麵向行業分析師的 BI工具_-济南一中升学率,其所要傳達的概念對於新用戶來說比較生澀複雜|_火把节是怎么一回事,這就需要我們在產品流程展示設計上盡可能簡單易懂--|青岛大哥骂雅阁女。

下圖是1.0版本中的效果--_快乐大本营胡歌2005,其對流程的設計僅停留在圖形的堆砌_2019手机看快开奖结果,對業務的表述不夠清晰-_根据以下图标猜成语,也就很難向用戶傳遞我們的產品價值-好看的科幻电影推荐。

那我們來看看視覺設計是如何物化抽象的概念的||湖北汉川新闻网。

首先我梳理出 QuickBI 工作的四個步驟|_-莱利斯:獲取數據|-阿提查 春那侬、創建數據集|_|艾斯奥特曼怪兽图鉴、數據分析_-新天龙八部39、數據展示--众彩娱乐可以举报吗。

接下來我們思考一下||-诺基亚500万像素,當我們需要對某人講述一個很複雜的概念的時候|_-帕米尔高原在哪里,我們通常會打個比方||魏征进谏图。那麼我接下來要做的__赢彩彩票因为有你,就是為這套抽象的概念「打個比方」|_-盈彩靠谱吗,因此我要為它們構建一個有故事性的場景-|重生洪荒之有始有终,那麼這四個步驟應該是某種靜止且持續運轉的工廠||-优酷加速器下载,它們之間需要某些動態的介質將其串聯起來-__朴载庆。

於是我進一步挖掘視覺樣式_-内地综艺节目男主持人排行榜,構建出了場景原型圖|_腾龙山。

進一步完善視覺效果_||kc2005,得到了最終的成品|_-众发娱乐合法吗:零散的代碼被收集車間收集-自然景观作文400字,產出數據表進入加工工廠_|hs小游戏,工廠將其加工成數據集|-|诺基亚5802xm,運輸進分析台|__盈彩国际输钱还能要回,分析台通過「儀表板|||南通汇通人才、電子表格||经典色文、數據全屏」三種方式對數據進行可視化分析-__234彩票v100,最後將分析結果通過數據門戶和郵件訂閱的方式對外分享|_芳龄十三。

2. 設計的價值

通過動效設計|_唯爱侦察,將抽象的概念具象化_-_106官网彩票,將複雜的流程簡單化-|薇丝露,大大降低了新用戶的學習成本||铂晶豪庭,使之可以快速上手_|众乐彩票登陆。

最後_富诚电商平台,我將我的動效設計方法沉澱成一套以方盒為載體的方法論——方盒理論|--什么叫波推:「置身於三維空間下|-易悠彩票是真能赚钱吗?,信息的體量是無窮的||臻于完美,我們需要為其尋找合適的載體-|_众赢彩票手机官网,在無限的信息體量和有限的用戶瀏覽範圍之間求得平衡_-111彩票登录。即讓用戶看到全部創作中他最想看到的那一麵-配角顾海滨。」這即是我所構建的以六麵方盒為基礎的信息載體-234彩票软件苹果,並為我的一切動效解決方案提供了理論支點_|陈楚河张檬。

B端產品並非大家印象中那樣的索然無味_-宝安教育在线基础教育,其中有很多體驗是值得深挖的_|北京58同城二手车。動效僅僅是其中的一個層麵|--好千度。隨著近幾年B端領域功能點逐步完善-_再见美丽女孩,用戶對體驗提出了更高的要求-_美元升值受益股,B端產品的體驗設計需求也會漸漸升溫|_错爱徐帆,也希望有更多這個領域的優秀設計師能和我做朋友|杨凌设市。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|__张玉其,為期望卓越的國內外企業提供卓越的UI界麵設計|_|众彩网是不是真的、BS界麵設計 ||永城彩票软件苹果下载、 cs界麵設計 --塞班5800论坛、 ipad界麵設計 __上海中潭癫痫病医院、 包裝設計 -|特种兵之火凤凰快播、 圖標定製 |盈彩在线首页、 用戶體驗 __圆点包包网、交互設計||_临县秧歌2013贺升亮、 網站建設 ||11选5手机助手有哪些、平麵設計服務_--金莎巧克力保质期。

« 如何讓動效完美還原_|_睿智车?送你兩個超厲害的免費插件__|阿坝州人事网! | 從UX 到產品設計--_pk 3调试,聊聊用戶體驗行業的巨大泡沫»


訂閱Rss