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

          首頁

          如何搭建 B 端設計規范

          資深UI設計者

          在B端產品設計中,有效的設計規范有利于降低團隊溝通成本,提高開發效率,并在一定程度上保證產品應用的一致性,最終推動產品設計的優化。本篇文章里,作者總結了從0開始搭建B端設計規范的注意事項與策略方法,一起來看一下。


          前言

          哈哈哈哈,最近事情太多了,已經快三個月沒更新了,現在也忙的差不多了,咱們更新繼續~~

          今天給大家分享的是關于如何從零開始搭建 B 端設計規范。

          時間轉眼即逝,掐指一算,我接觸 B 端已有 4 年之久了,當年剛接觸的時候,B 端的從業人員比例還是很少的。近兩年 B 端越來越火熱,無論從設計風格還是產品數量上,都有了很大的提升。

          隨著 B 端的產品越來越完善,要求設計師的專業性也要越來越強。設計規范作為基礎中的基礎,是大家都要熟練掌握的技能,我們不僅要會運用各種規范,還要會撰寫適合產品的規范。

          分享開始,敲黑板~~

          一、設計規范的目標

          在搭建設計系統之前,我們要想清楚設計規范的目標是什么?使用者是誰?

          • 目標:保持產品風格統一性、提高設計輸出效率、減少無效溝通。
          • 使用人群:UI交互、前端測試。

          如何搭建 B 端設計規范

          二、設計原則

          設計規范要符合基本的設計原則,否則你的規范會雜亂無章。這里我總結了 6 條原則供大家參考。

          如何搭建 B 端設計規范

          1. Unity(統一性):頁面風格、色彩、布局等要保持全局統一,不可為了某一功能的美觀而去破壞整體性。
          2. Accessibility(易用性):易用是首要考慮的因素,能一步解決的事情絕不兩步。
          3. Proximity(親密性):如果信息的關聯性強,則他們的距離就要相應的縮短,讓他們看起來是一個視覺單元;反之,則距離要加大。要讓用戶對信息的區域劃分一目了然。
          4. Alignment(對齊原則):在界面中,將元素進行對齊,即符合用戶的認知,也可以引導視覺流向,讓用戶更加流暢地閱讀信息。
          5. Contrast(對比原則):對比是增加視覺效果最有效方法之一,同時也能在不同元素之間建立一種有組織的層次結構,讓用戶快速識別關鍵信息。
          6. Repetition(重復原則):相同的元素在整個界面中不斷重復,不僅可以有效降低用戶的學習成本,也可以幫助用戶識別出這些元素之間的關聯性。

          三、框架布局

          這里一般采用柵格布局。說到柵格,有好多小伙伴又要再回顧一下知識點了。我今天再把柵格知識幫大家復習一遍,如果之前不是很了解柵格的,拿個小本本記下來,要考~~

          柵格布局能夠適應各種屏幕尺寸及分辨率,確保整體布局的一致性。

          柵格建議使用 1、2、3、4、6 切分布局,可以進行多種布局組合,并在整個設計中保持布局的結構的一致性。

          如何搭建 B 端設計規范

          頁面中一般采用 24 列自適應網格,你可以使用它為各種屏幕尺寸創建靈活的布局。

          如何搭建 B 端設計規范

          邊距 Margins、列 Columns、間隔 Gutters 分別是什么?

          如何搭建 B 端設計規范

          邊距 Margins:邊距是內容與左右邊緣之間的空間。

          控制臺內容區的邊距選用 8 的倍數為設定值,一般采用 16/24px 的居多。

          如何搭建 B 端設計規范

          需要注意的是:

          • 減去 margin 后,列在頁面區域均分,保證每列的寬度是一致的;
          • 在區域有 margin 的情況下,劃分列的區域不能包含 margin。

          如何搭建 B 端設計規范

          列 Columns:在電腦端列的數量是個常量(24列),每一列寬度的尺寸隨屏幕大小進行自適應調整。

          如何搭建 B 端設計規范

          間隔 Gutters:間隔是列與列之間的空隙,控制臺產品 gutter 使用固定值也要是 8 的倍數,一般采用 16/24px。

          如何搭建 B 端設計規范

          需要注意的是:

          • 布局的左右兩邊的分界線 gutter 可以為 0;
          • 必須保證 column 的寬度是一致的。

          如何搭建 B 端設計規范

          邊距 Padding:padding 指一個元素的內容和其邊界之間的空間,padding 最小值是 4px,然后其余均為 8px 的倍數,建議值為 8/16/24px。

          如何搭建 B 端設計規范

          內容區定寬:此場景常用于用戶歡迎頁、結果頁等需要將內容區寬度設置為固定值的頁面。此時 column 和 gutter 保持不變,根據頁面寬度改變 margin 的值。

          如何搭建 B 端設計規范

          四、設計風格

          1. Color(顏色)

          色彩內容主要包含基礎色(如品牌色、黑色、白色)和功能色(如鏈接色、提醒色等)。圖表配色為單獨的配色體系。

          在前期制定顏色規范的時候,精益求精的設定顏色,切忌顏色過多。

          顏色的狀態色盡量用原色進行轉換,設置一個合理的變色公式,讓所有顏色的狀態色都根據這個公式進行轉換。例:

          • Hover:H不變 S加10 B減5;
          • Click:H不變 S加20 B減10;
          • Disable:HSB均不變,不透明度 30%。

          在設計規范中,盡量把顏色的色值和 rgba 值都寫出來(這里是強迫癥患者要標的,因為有時候色值完全一樣,但 rgba 數值略有不同,雖然效果一樣,但是對于強迫癥的你來說,舒服嗎)。

          狀態色有 4 狀態色:Normal、Hover、Click、Disable。

          在設定圖表顏色的時候,要考慮不同的使用樣式(柱狀圖、環形圖、餅圖等……),同時也要考慮它的延展性,比如你設定 12 個 chart 色值,在使用的時候按著順序來使用,當超過 12 個后可以為同一個顏色。

          2. Font(文字)

          設定統一的字體規范,使用非襯線字體在各個操作系統下都有最佳展示效果。

          首先,要設置一個字體家族,保證產品界面的最優展示。

          例如(僅作為展示,不是建議):font-family: “Chinese Quote”, -apple-system,BlinkMacSystemFont,“Segoe UI”,“PingFang SC”,“Hiragino Sans GB”,“Microsoft YaHei”,“Helvetica Neue”,Helvetica,Arial,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”,“Segoe UI Symbol”。

          1)字號

          現在主流的產品中,主體字為 12px / 14px 的居多,可根據自身的產品定位以及用戶的習慣進行設定。字號不要出現奇數,否則在一些顯示器上會有對不齊像素的狀況發生。

          2)行高

          行高常規的有兩種規范:

          • 字號+8px;
          • 1.5倍 / 2倍 * 字號。

          如何搭建 B 端設計規范

          我喜歡用第一種,就是字號大小 + 8px 作為行高的規范。行高是不可被忽略的重要細節之一,因為在算間距的時候,行高是要被算進去的。

          3)字重

          字重有很多,但是在真正的產品使用中,字重盡量不要太多種,2~3 種即可。

          4)字體顏色

          字體顏色數量建議在 3~4 個,不宜過多,但是每個層級之間區分要大一些。

          文本應該保持至少 4.5:1 (基于亮度值計算)的對比度以保持文本清晰;最佳對比度為 7:1。

          測試對比度的網站:https://contrast-ratio.com

          WCAG 2.0 中將顏色對比等級分為 3 種,A級、AA級、AAA級,等級越高意味著顏色的對比度越高,呈現出來的視覺壓力越大。

          • A級:對比度 3:1,是普通觀察者可接受的最低對比;
          • AA級:對比度 4.5:1,是普通視力損失的人可接受的最低對比度;
          • AAA級:對比度 7:1,是嚴重視力損失的人可接受的最低對比度。

          3. icon(圖標)

          設定統一的圖標使用規范,讓視覺效果更和諧。

          1)icon 大小

          icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相鄰的兩個尺寸至少相差 4px,否則你會在后期用的時候會有選擇困難癥。

          同時功能 icon 盡量貼邊或盡量貼邊繪制,保證展現的視覺統一性(操作 icon 除外)。

          單獨 icon 使用的時候,盡量不要太小,最小值建議為 12px。

          2)icon 熱區

          icon 的熱區經常被設計師和開發所忽略,本身 icon 的尺寸一般就很小,再加上如果沒有設置熱區的話,操作體驗極差。

          所以一定一定要設置 icon 的熱區,設置的值我建議為 icon 大小的 2倍。例:icon 大小為 14 * 14px,則熱區大小為 28 * 28px。

          如何搭建 B 端設計規范

          4. size(尺寸)

          頁面內布局間、模塊間、模塊內的各部件距離。

          尺寸大部分規范中都用的是 8 的倍數,不用糾結,直接用就行。我這里有個公式:Sn = 8px * n,n為正整數。

          特殊:最小支持4px。

          如何搭建 B 端設計規范

          五、交互

          交互我分為兩個方面:交互方式交互狀態

          1. 交互方式

          交互方式指的是對某一個操作所進行的具體行為,比如刷新方式有下拉、上滑、按壓點擊等方式,這就是所謂的交互方式。交互方式有很多種,沒有最優,只有最適合。

          交互方式要保持產品的統一性,同類別的交互不可有不同的操作感受。同時交互方式要符合大眾的認知習慣,可創新但不可違背潛意識。

          隨著時代的發展,交互方式也在不斷的更新。比如最開始的手機是按鍵式的,隨著大眾對屏幕大小的需求不斷提升,到了現在的全面屏手機,如果這個時候你再去做當年火爆的按鍵手機,那你就只能跟市場說拜拜。

          總結交互方式的幾個關鍵點:創新、統一、緊跟趨勢

          2. 交互狀態

          一個完整的產品生態是不會遺漏每一個交互狀態的。

          同樣是做售票的軟件,為什么高鐵管家就比 12306 做的好呢?是因為高鐵管家把很多交互狀態友好地做了展現反饋,而不是冰冷的數據吞吐。

          同類產品中,每個都有自己獨特的交互狀態,可能你一直用某個軟件的原因只是有個功能的交互狀態打動了你,從此你就深深愛上了它。

          現在工作中,我們都在講人效,拼命地去更新迭代,去研發新功能,開拓新產品,往往會忽略交互狀態這個點,因為很多時候付出收獲比是很低的,但是真正好的產品,這部分是不可或缺的。

          交互真的太大了,單獨寫一篇文章都寫不完,這篇我只能拋磚引玉,勾起你的思維,如果有任何要探討的,歡迎來叨擾。

          六、引導

          引導分為 5 種:Newbie guide(新手引導)Steps guide(步驟引導)、Help / Operation guide(幫助/操作引導)、New function guide(新功能引導)、Blank guide(空白頁引導)。

          1. Newbie guide(新手引導)

          新手引導是針對新用戶的,首次進入產品的時候,我們要著重地把自己產品的亮點以及操作快速的介紹給新用戶,讓他用最短的時候上手我們的產品。

          新手引導要言簡意賅,并且如果非必要的話,盡量給用戶一個可以直接關閉的按鈕,讓用戶有選擇權。我就非常討厭有一些產品的新手引導,必須走完全部流程后才能關閉,惡心得不行。

          如何搭建 B 端設計規范

          2. Steps guide(步驟引導)

          步驟引導一般用在有固定操作步驟的場景下,指引用戶一步一步地完成想要的結果。常規的步驟引導建議在 3~5 步之間為合理。

          如何搭建 B 端設計規范

          3. Help/Operation guide(幫助/操作引導)

          幫助/操作引導的展現方式是比較豐富多彩的,可以是提示語、輔助性文本、tooltips 等等,它的作用就是輔助用戶去了解并且知道如何操作這個功能。

          這個也是在產品中使用頻率最高的,運用好它,可以讓你的產品事半功倍。

          4. New function guide(新功能引導)

          它就是常用在新功能上線后,用戶第一次登陸相關頁面后做的一些引導,目的是為了告訴用戶我們做了新東西,你快來試試吧。

          如何搭建 B 端設計規范

          5. Blank guide(空白頁引導)

          空白頁引導一般用在在缺省頁,對用戶進行一些操作指引,讓無信息的頁面變得更有價值。

          比如百度在一些缺省頁上就放了一些關于失蹤兒童的信息,就因為做了這個引導,幫助了千萬個家庭找到了失散的孩子。

          如何搭建 B 端設計規范

          七、組件

          組件是設計系統里面最為龐大的東西。組件可以分為了 5 類:

          1. Navigation(導航);
          2. Data Entry(數據錄入);
          3. Data Display(數據顯示);
          4. Feedback(反饋);
          5. Other(其它)。

          基本上這幾類已經覆蓋了多數的組件,下面我把我自己整理的這幾類分別都包含哪些組件、以及組件的簡單介紹給列出來,快來保存吧。

          1. Navigation(導航)

          • Affix(固釘):將頁面元素釘在可視范圍。
          • Breadcrumb(面包屑):顯示當前頁面在系統層級結構中的位置,并能向上返回。
          • Menu(導航菜單):為頁面和功能提供導航的菜單列表。
          • Pagination(分頁):采用分頁的形式分隔長列表,每次只加載一個頁面。
          • Steps(步驟條):引導用戶按照流程完成任務的導航條。

          2. Data Entry(數據錄入)

          • Checkbox(多選框):可選擇多個。
          • Radio(單選框):只可選擇一個。
          • Switch(開關):開關選擇器。
          • Form(表單):具有數據收集、校驗和提交功能的表單,包含復選框、單選框、輸入框、下拉選擇框等元素。
          • Input(輸入框):通過鼠標或鍵盤輸入內容,是最基礎的表單域的包裝。
          • Select(選擇器):下拉選擇器。
          • Skeleton(加載占位圖):在需要等待加載內容的位置提供一個占位圖。
          • Time selectors and sliders(日期時間選擇過濾器):當用戶需要輸入一個時間或日期,可以點擊標準輸入框,彈出時間面板進行選擇。
          • Transfer(穿梭框):雙欄穿梭選擇框。
          • Upload(上傳):文件選擇上傳和拖拽上傳控件。

          3. Data Display(數據顯示)

          • Badge(微標):圖標右上角的圓形徽標數字。
          • Card(卡片):通用卡片容器。
          • Collapse(折疊面板):可以折疊/展開的內容區域。
          • Popover(氣泡卡片):點擊/鼠標移入元素,彈出氣泡式的卡片浮層(可操作)。
          • Tabs(標簽頁):選項卡切換組件。
          • Table(表格):展示行列數據。
          • Tag(標簽):進行標記和分類的小標簽。
          • Timeline(時間軸):垂直展示的時間流信息。
          • Tooltip(文字提示):簡單的文字提示氣泡框。
          • Tree(樹形控件):文件夾、組織架構、生物分類、國家地區等等,世間萬物的大多數結構都是樹形結構。使用樹控件可以完整展現其中的層級關系,并具有展開收起選擇等交互功能。

          4. Feedback(反饋)

          • Alert(警告提示):警告提示,展現需要關注的信息。
          • Notification(通知提示框):全局展示通知提醒信息。
          • Drawer(抽屜):抽屜從父窗體邊緣滑入,覆蓋住部分父窗體內容。用戶在抽屜內操作時不必離開當前任務,操作完成后,可以平滑地回到到原任務。
          • Modal(對話框):模態對話框和非模態對話框。
          • Progress(進度):展示操作的當前進度。
          • Spin(加載):用于頁面和區塊的加載中狀態。

          5. Other(其它)

          • Button(按鈕):按鈕用于開始一個即時操作。
          • chart(圖表):圖標數據顯示。
          • Copyright(版權):版權信息。
          • Divider(分割線):區隔內容的分割線。
          • logo(標志):logo 的使用。
          • LocaleProvider(國際化):為組件內建文案提供統一的國際化支持。
          • Text link(文字鏈):點擊有鏈接跳轉的文字。
          • Scrollbar(滾動條):在特定界面區域內進行內容的更多展示。

          以上組件可根據自己的產品進行增刪,把組件規范設計完成后,整個設計規范就完成了 90% 以上,可以算一個比較完整的設計規范了。

          八、總結

          每一個設計規范都是有靈魂的,規范是為了更好地做設計,而不是限制設計師雙手的枷鎖。

          設計規范也不是一成不變的,它在落地使用的時候多少都會有問題,需要慢慢地去反復檢驗規范的合理性,發現不合理的及時更正。


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

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


          文章來源:人人都是產品經理   作者:友設青年

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

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



          想打好品牌年輕化的戰,就要讓年輕群體先看到你

          資深UI設計者

          在當下市場,年輕人是消費的主力人群。抓住年輕人就等于抓住了市場,不少品牌們也紛紛開始“年輕化”。要想打好品牌年輕化的戰,我們應該怎么做呢?


          現在我們很多“老”品牌企業為了能夠抓住年輕人的胃口,都在爭先恐后的討好著年輕消費者。在移動互聯網的沖擊下,通信路徑、通信方式和文化環境都發生了重大變化。

          市場不再歡迎我們習以為常的老辦法。面對新時期的消費者和新市場的消費環境,品牌也面臨著年輕化的問題。重復的市場,讓品牌必須處理的手段,就是所謂的八仙過海,各顯神通。

          校果在與大部分中小企業品牌的前期溝通過程中可以發現,很多品牌都想通過自己不斷地年輕化迭代,保持一個品牌活力,不被“新”時代的消費者拋棄。

          傳統品牌洗心革面,不遺余力地爭奪年輕人的市場,但總是做不到自己想做的事情。品牌年輕化固然重要,但許多品牌往往誤解了這件事的實質和核心,因為選用品牌年輕化存在一些誤區。

          01 讓年輕用戶看到,所以品牌需要年輕化

          品牌通常是年輕人看到、俘獲年輕消費者的年輕化推廣,聽起來合情合理,但其實并不是所有品牌、所有行業都需要品牌年輕化。

          品牌年輕化并不是最終的目的,品牌的年輕化需要甄選行業。對于品牌而言,品牌年輕化的首要條件就是,確認品牌到底有沒有年輕化的必要,年輕化所需要的解決的是什么商業課題,TO B企業就不一定會適合做年輕化,因為對于TO B企業來說給客戶帶來的關鍵詞是安全感、信任感、專業度,所以這類品牌做年輕化的意義并不大。

          而對于一些快消品來說,品牌的年輕化就格外的重要了,因為年輕化能夠幫TOC端的品牌獲得用戶感知、流量獲取、產品銷售等一系列的問題。

          所以說,品牌的年輕化其實是一個偽命題。品牌年輕化只是一個品牌的表面策略而已,核心技術仍然是企業品牌在新的內部控制外部市場環境下的商業述求。

          在年輕消費者購買力越來越強,資訊信息接收更廣的背景下,品牌不論是社交平臺的親民互動,營銷活動的事件熱點,潮流風向的跟進,情感與態度的表達等等這一整套的傳播動作背后所要解決的商業課題是:如何讓品牌的產品提升新增且值得的溢價。

          02 品牌年輕化就是傳播現代化

          對于普通用戶而言,能感知到的品牌年輕化動作通常在傳播層面上,但對于整個品牌而言,傳播的年輕化可能是最表面的一個維度。衛詩媒體認為,消費者對品牌復興的感知有三個維度:

          1. 第一個維度便是傳播維度,我們今天所認識的“雙微一抖”的內容輸出

          社交網絡平臺上品牌人格化的定位等等,都是一個基于信息傳播層面上的東西。

          傳播層面也是品牌首先調整的層面,在互聯網信息大爆炸的時代,年輕消費者每天接觸的信息往往一掃而過,這就要求著品牌在傳播和營銷策略上有著高質量+高頻+有態度的輸出,這樣用戶才會去主動的關注你傳播的內容。

          2. 第二個維度是視覺維度,也就是產品的吸引力

          這個維度可以讓消費者感覺更直觀,比如產品包裝,各種視覺表達效果等。在營銷中,內容的情感表達是到位的,他們看到產品的那一瞬間是不能被打亂的,所以前面所有的辛苦營銷都是白做的。

          年輕的包裝可以給消費者帶來不同的感官體驗,如果你的品牌包裝或十多年的美學包裝,年輕的消費者可以直接感受到品牌的變化…當然,如果能像椰汁一樣可以堅持發展自我,獨樹一幟形成具有強烈的品牌設計風格那更好。

          所以,傳統文化品牌在視覺上的煥然一新并不是一個追求一種視覺上的顛覆,品牌企業一方面我們需要進行更新自己產品的視覺體驗,同時教師也要保留品牌曾有的獨特性,更需要的是在品牌價值屬性上做視覺審美的升級,而不是全盤否定過去社會形態。

          3. 第三個維度是產品維度,也就是真正決定年輕消費者買不買賬的關鍵

          品牌的年輕化發展不僅可以僅是企業營銷、包裝的文章,而是讓你的產品進行更加的符合學生新用戶群體的需求。比如食品行業,年輕人將需要更多的綠色、環保、健康的食品,品牌年輕化是為人們提供當前生活方式和價格的關鍵。

          其實,品牌年輕化也會涉及到企業的管理、過程,因為對于品牌的年輕化而言,問題不僅僅是指傳播或者審美變革。

          甚至會考慮,品牌產品進行年輕化發展改革,品牌管理公司員工年輕化的變革等等的細枝末節,真正的年輕化往往會選擇需要傷筋動骨。但只要狠得下心,往往會涅槃重生。

          正因為如此,當我們幫助品牌走向年輕化的時候,通常從三個方面幫助消費者:

          1. 從品牌戰略和營銷戰略進行調整和改革;
          2. 有助于品牌年輕化的設計,同時保留品牌的獨特性;
          3. 從傳播層面進行傳播策劃,搭建與年輕人交流的平臺。這樣才能找到自己的公司進行全方位的轉型升級。

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

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


          文章來源:人人都是產品經理   作者:校果研究院

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

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



          產品反饋:構建以客戶為中心的產品的指南

          ui設計分享達人

          與客戶的對話和反饋是產品成功的關鍵要素。然而,研究表明,42% 的公司不調查其客戶或收集反饋。

          偉大的產品不是憑空打造的——您需要一個持續的過程來從用戶那里獲取反饋,以指導您的產品路線圖、調整消息傳遞并保持滿意度水平的脈搏。

          什么是產品反饋?

          產品反饋是您的用戶分享的有關他們對產品的體驗和滿意度的任何信息。您可以通過各種研究方法收集產品反饋,例如用戶訪談、客戶調查、評估客戶支持票等。

          產品反饋的 3個主要好處

          雖然積極收集和分析產品反饋有很多好處,但可以總結為三個主要好處:

          A. 改善客戶體驗和滿意度

          B. 優先考慮產品路線圖并驗證新想法

          C. 打造成功的產品

          讓我們更詳細地看看它們。

          1. 提升客戶體驗和滿意度

          為用戶提供出色的客戶體驗不再是一種獨特的優勢——這是意料之中的。產品發布后,收集產品反饋可幫助您識別任何問題,收集有關要添加或改進的新功能的信息,并找到幫助用戶充分利用其體驗的方法。

          支持票通常擅長揭示需要盡快解決的重復問題。如果一個問題多次出現,那么您就會知道它困擾著您的大部分客戶群。此外,凈推薦值 (NPS)或客戶滿意度得分 (CSAT) 等調查是產品反饋的重要來源,可以幫助您了解如何改善客戶體驗。

          2. 優先考慮產品路線圖并驗證想法

          收集用戶的反饋有助于產品經理確定產品路線圖的優先級,并根據實際用戶需求做出明智的決策。

          您可以收集關于功能想法的反饋并量化數據以了解哪些是最需要的。

          3. 打造成功的產品

          如今,最好的產品是基于與日復一日使用您產品的人(您的客戶)的持續互動和用戶體驗而構建的。客戶期望的上升意味著企業必須不斷收集和識別客戶需求,以構建能夠解決實際存在的問題的產品。

          產品反饋是一種很好的機制,通過它可以從用戶那里獲取見解,并將其納入您的決策過程。無論是通過征求還是主動提供的反饋,傾聽用戶的意見將確保您能夠始終如一地交付價值。

          產品反饋:類型和方法

          您可以使用多種產品反饋方法來設置產品反饋循環并讓您的客戶與您取得聯系。

          通常,產品反饋可以是征求的,也可以是主動提出的:

          A. 征求反饋是指您要求用戶提供反饋。這可能是向您的客戶群發送調查或與用戶進行訪談。

          B. 不請自來的反饋是用戶在沒有被要求的情況下分享的任何類型的反饋。例如,他們可能會在網上發表評論或在社交媒體上分享評論。

          當用戶在您的產品中遇到問題、要求新功能或需要幫助完成某事時,通常會出現不請自來的反饋。

          另一方面,通過征求反饋,您需要為用戶提供背景信息并提出正確的研究問題。根據您的團隊需要反饋的內容,以下是您可以用來收集征求的產品反饋的方法的概要:

          1) 調查

          2) 客戶訪談

          3) 產品分析

          4) 專門小組

          5) 客戶支持對話

          6) 銷售和客戶溝通電話

          讓我們更詳細地看一下前三個。

          1. 調查

          調查是一種有效的研究工具,可為您提供針對各種用例的特定產品反饋:分析新發布的性能、在開始構建過程之前驗證想法和新概念、測試產品消息傳遞等。

          大多數反饋調查使用開放式和封閉式問題的組合。在創建和發送調查時要記住幾個最佳實踐,即:

          A. 避免引導性問題,例如“您有多喜歡使用該產品?” 相反,請讓您的用戶提供有關他們體驗的詳細信息,而不要引導他們做出肯定或否定的回答。

          B. 保持簡短:注意受訪者提供反饋的時間和意愿。在調查中包含的問題不超過五到七個,以使其相對簡短,并且仍然可以獲得可操作的反饋。

          C. 使用開放式和封閉式問題的組合。太多的開放式問題將導致調查時間過長,因為參與者必須為每個問題輸入答案。另一方面,僅由封閉式問題(如是/否問題)組成的調查只會為您提供定量數據,而不會揭示參與者給出這些答案的原因。將這兩種類型的問題結合起來可以創建有效的調查。

          2. 客戶訪談

          客戶訪談是一種通用的研究方法,可以在整個產品開發過程中獲得有見地的反饋。從進行最初的設計研究到獲得發布后的反饋——與用戶交談總能產生新的見解。

          對于產品營銷人員來說,訪談是一種有用的方式來獲取有關新產品或功能的消息傳遞的信息。

          3. 產品分析

          產品分析是了解產品性能和改進方式的絕佳來源。產品分析對產品經理和營銷人員都很有用,可以幫助您了解用戶在做什么與他們所說的相比,這可能并不總是相同的。

          如果您在發布之前進行了定性測試,產品分析可以幫助您驗證您的初始假設。

          此外,產品分析是識別產品中嚴重問題的良好來源。例如,衡量留存率之類的分析可以讓您隨著時間的推移跟蹤它或將比率與行業標準進行比較。當任何異常發生時,數據是進行更多研究以了解問題所在的起點。

          創建產品反饋循環的重要性

          您可以使用多種方法來收集產品反饋,從我們上面看到的三種方法到社交媒體監控、客戶支持票、銷售電話、客戶溝通電話等其他方法。更重要的是創建一個流程,通過該流程,反饋始終如一地到達您的組織并被采取行動,從而征求更多用戶反饋。這也稱為產品反饋循環。

          反饋循環是一個迭代過程,其中從客戶反饋中收集的見解被實施到產品開發過程中,并用于在一致的基礎上為產品決策提供信息。隨著新的反饋影響新的產品策略,這個過程會無限重復,而變化會促使客戶提供額外的反饋。

          這種持續不斷的客戶反饋將幫助您把握客戶滿意度的脈搏,并在您和您的客戶之間建立一個開放的渠道。

          如何收集好的反饋

          并非所有反饋都是平等的,或者就此而言——有用。就像進行任何其他研究方法一樣,收集很好的反饋需要理解并遵循關鍵的最佳實踐。這是你應該知道的。

          建立明確的目標

          在您開始收集反饋之前,第一步是定義您的目標并建立明確的衡量方法。

          一個好的起點是查看您負責的 KPI。對于產品團隊來說,這可能意味著激活或用戶保留。對于產品營銷人員,這也可能是合格的注冊和使用指標。

          此外,您建立的目標還將幫助您選擇正確的方法來收集反饋。例如,客戶訪談非常適合在進行初步發現研究時獲得定性反饋。另一方面,原型測試最適合在開發前與用戶一起驗證設計。確立目標是獲得做出明智決策所需的反饋的第一步。

          提出正確的問題

          其次,提出正確的研究問題是獲得有效、可靠反饋的關鍵步驟。確定目標后,下一步是制定您需要發送給用戶的調查或為客戶訪談準備研究計劃。

          在制定研究問題時,需要牢記一些重要的指導方針。其中一些是:

          A. 避免引導參與者尋找答案

          B. 避免封閉式問題,尤其是在客戶訪談中

          C. 參考特定時刻,例如使用功能或新產品

          總結

          產品反饋是洞察客戶行為和痛點的重要來源,可幫助您在整個產品開發過程中做出明智的決策。

          今天在產品和營銷領域工作的每個人都將從與客戶交談和傾聽他們的意見中受益。隨著產品的成熟和客戶需求的變化,這些對話不應該是一次性的,而是構建偉大產品的關鍵部分。

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

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



          文章來源:站酷   作者:對啊分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          頁面設計中的信息組織策略探索-言之有序

          ui設計分享達人

          人們是如何組織信息的?

          在 Ant Design 的界面設計中,會包含大量的信息組織和編排工作,我們常常會遇到這樣的問題:

          • 一個詳情頁面里應該包含哪些信息?

          • 什么樣的信息應該放在卡片里,什么樣的信息應該平鋪顯示?

          • 一個頁面內的信息該怎么讓用戶快速找到重點?

          • ···


          信息組織是我們在日常生活中經常會遇到的問題,商場里的樓層導航、機場車站的標志指引、餐桌上的菜單、手機里的通訊錄等等,各式各樣的信息是如何被組織編排到一起,又是以何種方式把信息呈現給用戶呢?


          在解答這些關于頁面設計的問題之前,我想先給大家講一個生活中的小案例:


          動線設計

          逛過宜家的人,應該會注意到宜家類似迷宮的動線設計,這種動線設計能夠讓消費者不知不覺逛完商場的各個角落。踏入宜家門口時,就會被一條隱形“向導”默默地引導著向前走:一條曲折宛轉的主線依次引導至客廳家具、客廳儲物室、臥室、書房等各個主區域,直到一個不落地走完才抵達出口。但在這個主線之外,為了確保一些消費者在購物中,能夠快速離開或快速去往感興趣的區域,每個主區域間都有一些較隱蔽的捷徑作為輔動線。


          這種動線設計一方面能夠把所有商品按照路徑有效的串聯起來,另一方面又能讓消費者不知不覺的沿著這個路徑去了解商品。


          商品布局

          動線布局是宜家的隱形骨架,而真正讓宜家賣場豐富起來的,還是琳瑯滿目的商品。宜家的賣場和大部分零售賣場不一樣,它不會把同類型產品進行大集合,而是根據人們的正常生活場景來分類,不同類型的產品在同一區域組合陳設,構成生活中的一個小場景,一方面能達到對各個商品功能的完美詮釋,另一方面,一個產品盡量不會重復出現,盡可能減少商品展示的復雜性。


          在整體商品布局上,有兩個很有意思的地方:第一,在居家體驗中心,樣板間的陳列順序完全是按照消費者回家后的場景而布置:客廳、餐廳、廚房、書房、臥室、衛生間......,第二,在家居用品中心,則會根據消費者在家的日常起居行為進行擺放:做飯、休息、讀書、收納......


          現實生活中的這些例子,對我們的界面信息組織有什么啟發呢?


          關于動線和布局的思考

          在宜家的案例中,關于動線,映射到人的行為上,有一個比較專業的概念叫做“流”(flow)。 Mihaly Csikszentmihalyi 的著作《心流:最優體驗心理學》中對“流”的定義:當人們全身心投入到某個活動中時,會對周邊干擾視而不見,這種狀態被稱為“流”。宜家的動線設計很好的營造了這種狀態,讓消費者完全沉浸于商品瀏覽,并且盡量不去打斷這種行為流。


          經過研究發現,構成“流”的行為動作,其前后必然存在某種連續性或者關聯性,例如回家的行為動線,日常起居的行為關聯等。這個概念在界面設計中依然適用,很多界面設計都在有意無意的去創造“流”的狀態,帶給你用戶沉浸式體驗,例如各類短視頻應用會根據用戶瀏覽習慣推薦相關聯的視頻內容,讓用戶沉浸其中無法自拔。


          關于商品布局,映射到信息組織上,《韋氏大詞典》 中提到一個詞“編配”(orchestration),對應的解釋為“和諧的組織”。這個詞能比較好的表達信息組織的含義,宜家的商品和諧的組織構成一個場景,它向消費者傳遞的不僅僅是商品本身的功用性,更是在傳遞一種搭配建議或者一種生活方式。這種商品組織方式能非常有效的降低消費者對信息篩選的復雜程度。而在界面設計上,表單頁的和諧組織能夠幫助用戶快速完成信息錄入,詳情頁的和諧組織能夠幫助用戶快速理解一個描述對象......


          各種各樣的信息總能以某種關系組織到一起,而如何根據這種流為用戶去組織和呈現信息呢?


          “流”的本質其實是一系列具有關聯性的行為動作串聯,而“編配”的目的則是為了降低串聯信息呈現的復雜程度。有了這兩個基礎的概念之后,我們可以做一個初步假定:所有的信息是否都可以通過關聯性和復雜度來進行組織編排?針對著這兩個維度,我們又進行了更深層次的研究和驗證,并得到基本定義:

          • 信息復雜度:信息量的大小,包括種類、數量等。

          • 信息關聯性:信息之間的潛在關聯或者相互影響。


          我們設想,這兩個維度能否運用到界面設計上的信息組織呢?


          頁面信息的組織方式

          信息關聯性

          界面信息之間的潛在關聯或者相互影響,通常體現在「邏輯關聯」和「視覺關聯」兩個層面。


          邏輯關聯

          顧名思義是指一個事件中的所有信息之間的關系,在界面設計中,無論什么樣的信息,總能以某種方式進行分類和編排在一起,例如手機通訊錄中的人名,可以按照字母順序從 a 到 z 進行排列,電商網站的商品導航會根據類別進行分組,待辦事項可以根據時間進行排序等。


          如何找出信息之間的邏輯關聯性呢?

          被稱之為信息架構之父的 Richard saul wurman 在《信息焦慮》一書中將信息組織方式用“五頂帽架”來概括:

          • 地點(Location)

          • 字母(Alphabet)

          • 時間(Time)

          • 類別(Category)

          • 層級(Hierarchy)

          簡稱LATCH。這五種方式基本可以涵蓋所有的信息組織策略,信息是無限的,但是信息組織方式卻是有限的。



          視覺關聯

          任何一個界面呈現給用戶的時候,用戶都會下意識的去判斷界面上什么信息是最重要的,接著會去關注這些信息都有什么關聯,因此,除了按照邏輯去組織信息之外,還應該合理的去呈現信息的視覺層級關系。


          視覺層級關系有幾種常見的區分方式:

          • 強調:使用基本視覺元素(顏色、形狀、大小等)區分層級

          • 親密性:位置接近的元素通常是有關系的,而且位置越近,關系越強

          • 圖勝于言:視覺符號和對象關聯,例如:齒輪或扳手=設置,垃圾桶=刪除

          • 瀏覽順序:根據瀏覽順序,從左到右(部分地區)或從上到下信息重要程度依次減弱

          • ···


          如何驗證界面元素的視覺關聯性是否合理呢?


          瞇眼測試

          《About Face 4: 交互設計精髓》 中提到了一個很有意思的測試,為了確保界面視覺信息有效的拉開層次關系,圖形設計師經常會用到一個方法“瞇眼測試”(squint test)。閉上一只眼睛,瞇著另外一只眼睛看屏幕,看看哪些元素突出,哪些元素模糊,哪些元素看上去成組,哪些元素看上去零散。從多個角度去觀察,總能夠發現之前沒有注意到的布局和構成問題。


          信息復雜度

          通常以信息量的大小或樣式多少來衡量,這兩個維度實際決定了信息的瀏覽時長。例如一個詳情頁面內都是純文本信息,但是信息量較大(超過三屏),則認為這個頁面的復雜度較高,或者一個詳情頁面內同時包括文本、表格、代碼展示、圖表等元素,也會認為這個頁面的復雜度較高。

          信息的復雜度和關聯性并不是兩個完全獨立的維度,根據關聯性去組織信息,本身就是為了降低信息呈現出的復雜程度。而對復雜度的研究,可以幫助我們如何選擇合適的方式把信息呈現給用戶。


          頁面信息組織實踐 - 詳情頁設計

          具體到界面設計層面,信息體量大、復雜度高常常是中后臺界面設計的難題之一。以詳情頁為例,詳情頁內的信息該如何合理的組織信息并有效的傳達給用戶呢?


          根據關聯性和復雜度的概念,我們抽象出一個簡單的「復雜度模型」,用來判斷信息復雜程度和關聯性對頁面結構的影響。


          橫坐標表示頁面信息之間的關聯性,縱坐標表示信息的復雜程度,兩者交叉組成的色塊代表不同的信息等級??拷c最淺的色塊,代表復雜程度低且關聯性強的內容,例如一段純文本的產品描述信息;遠離原點顏色最深的色塊,代表復雜程度高且相互獨立的信息,例如一個發布流程中的集成測、預發環境測試、灰度測試、上線等各個階段信息展示。


          與之對應的,我們對信息展示方式也進行了維度劃分,用來解決在復雜的企業級產品界面設計中,何時使用卡片區分,何時拆分為 tab 等布局問題。


          根據承載信息復雜程度的不同,我們對容器組件也進行復雜度劃分,用來解決在不同頁面布局中,不同類型的信息用何種方式呈現的問題。


          這個模型可以幫助設計者在決策布局組件時,有章可循。最終讓用戶感知,當用戶來到一個頁面時,即可對頁面的信息量、信息的搜尋方式有統一的預期。我們嘗試將復雜度和關聯性模型在界面布局中落地:


          關于以上的模型在實際設計中該如何操作,這里提供一個推薦步驟可以參考:

          • 「復雜度判斷」明確設計對象信息量的大小

          • 「關聯性判斷」判斷各個信息之間的關聯性,并合理分組

          • 「組件選擇」選擇合適的容器組件來呈現信息

          • 「模板選擇」選擇合適的頁面模板,組織編排信息

          • 「瞇眼測試」檢查整體布局是否合理(僅參考)



          結語

          大到一個系統,小到一個按鈕,背后的每一條規則既要從人的角度去思考設計的易用性,同時也要從信息本身去推敲組織的合理性。作為設計規范的制定者,不能憑感覺簡單了事,而是需要找到一套通用的模式,幫助用戶快速找到并理解信息幫助用戶提效,同時提升用戶的瀏覽體驗,是我們一直在探索的課題。

          虛擬界面的信息組織和現實世界一樣,既需要符合人們對事物的認知,也需要遵循人們的行為習慣,這些認知和行為習慣,構成了自然交互的基礎,這也是我們一直在探索方向。當然,信息組織除了以上這種思路,還有更多的思路和方向等待挖掘,期待大家的反饋和建議,幫助我們一起完善。


          優秀網站設計賞析

          前端達人

          很多網站仍然在使用老舊的頁面設計,比如國內一些企業官網,萬年不變的相類似的模板,外國的則是hero頁面,帶CTA按鈕,三欄式的布局。這些設計不能說是不好的設計,很實用,用戶能夠預測展示的內容,也容易找到需要的內容。但是正因為可預測,用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規,也依然有良好用戶體驗的網頁設計。

          接下來是精彩的UI設計賞析

          WechatIMG2092.jpegWechatIMG2093.jpegWechatIMG2094.jpegWechatIMG2095.jpegWechatIMG2096.jpegWechatIMG2097.jpegWechatIMG2100.jpegWechatIMG2099.jpegWechatIMG2098.jpeg


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

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

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



            更多精彩文章:

                 ui界面設計之網站設計案例欣賞(一)

                 超贊的創意頁面排版設計,打造“視”不可擋的網頁設計

                超贊的網頁設計+精美流程圖賞析

                 超贊的網站設計賞析



          table td的寬度詳解

          前端達人

          前言:一直總覺得td的寬度好難駕馭,但萬事萬物總是有規律的。就像亮劍說的:不用因為怕八路就敬而遠之,應該靠上去,熟悉他們,了解他們。

          正文:

          • Table只有Table的寬度是可以設置的,并且各個瀏覽器理解一致

          • 1.原則上應該講table的寬度設置成一個固定的值,而不應該設置成一個根據屏幕變化的值
            Table的寬度為600px,Table的td所有寬度總和不到600px,瀏覽器會自動按照td的寬度的比例算出寬度

            <table style="width: 600px;border-collapse: collapse;" > <tr> <td style="width: 200px;">我是200px</td> <td style="width: 200px;">我也是200px</td> </tr> </table>  
                    
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6

            運行結果:兩個td都是300px;

          • 2.Table的寬度為600px,前兩個td的寬度已經為600px,那么第三個td的寬度沒有指定,這樣的話第三個td的寬度是根據內容出現寬度的,然后前兩個再按照比列計算、
            前兩個td小于table寬度,那么最后一個td就起到補全的作用

             <table style="width: 600px;border-collapse: collapse;" > <tr> <td style="width: 300px;">我是200px</td> <td style="width: 300px;">我也是200px</td> <td >我是根據內容的</td> </tr> </table>  
                    
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7
          • 3.Table中的td內,如果放置塊狀元素超過td的寬度,并且table的table-layout: fixed;(fixed表示td的寬度是定長的,不隨td內容變化而變化)。
            這樣盡量不要再td里寫overflow: auto; 因為這樣在IE6,7不會出現滾動條的,最好的辦法是套一個div,寬度設置成100%

            <table style="width: 600px;border-collapse: collapse;table-layout: fixed;" > <tr> <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td> <td >我是自由寬度</td> </tr> </table>
                    

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

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


            轉自:csdn 

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

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

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

          小數據里的大秘密

          資深UI設計者

          本次活動中,嘉賓通過眾多豐富、有趣的案例介紹了數據可視化的概念、作用和設計方法,信息量滿滿。

          分享框架:

          嘉賓首先分享了2個數據可視化案例:

          1. 設計師把閱讀困難癥患者普遍能看到的東西進行實體化、視覺化,讓別人能進入他們的世界。
          2. Aaron Koblin的作品《Flight Patterns》,讓人眼突破視域的界限,以“鳥瞰視角”來看北美居民的遷徙過程。

           

          活動筆記:

          1. 什么是數據視覺化?

          其實它就是把不可見的數據轉化為可間接被觀察數據的過程。它不提供回答,只是提供一種觀察的新方式。

          舉例一個來自小數據觀察的自我探索項目:太極。

          將太極拳的動作進行數據采集完成了第一張數字國畫,有人質疑說好看但無用,嘉賓解釋由于好看吸引了人群,從人群的行為進行觀察可能會有意想不到的發現。

          數據視覺化的初衷并不是為了解決問題,而是為了探索。

          前田約翰(John Maeda)曾經說過:“好藝術的使命是喚起思考,好設計則是讓事物變得清晰,并能解決實際的問題!”

           

          2. 數據視覺化有什么用?

          介紹兩張數據視覺化歷史上教科書級別的神圖:

          1. 《拿破侖東征》誕生于1861年,由法國工程師查理·米蘭德繪制,描述了1812年拿破侖東征俄羅斯的失敗戰役。圖中透過2個維度呈現了6類資料:拿破侖軍的人數、距離、溫度、經緯度、移動方向,讓人在一個靜態的平面上同時觀察多種數據變成可能。
          2. 另一位南丁格爾女士,是一名護士。作為軍醫,她清楚地知道大部分士兵都不是戰死沙場,而是死在醫療環境極差的軍營里,她自己懂,可是怎樣才能影響國會呢?她發明了玫瑰圖,用以表達軍醫院季節性的死亡率,對象是那些不太能理解傳統統計報表的公務人員。她的方法打動了當時的軍官統領和維多利亞女王本人,于是醫事改良的提案才得到大力支持。為了紀念她的貢獻,后來她的頭像被印在了英鎊上。

          數據可視化研究的不僅僅是“數據如何能被看清”,還有“數據如何能被看懂”。

           

          2.1 數據如何被看清?

          可以通過顏色,大小,方向去提高數據的差異性。最簡單的例子就是報表中的標紅。

          1. 有效標紅的第一步:去顏色干擾,第二步:去分隔線干擾;
          2. 去掉沒有用的東西,例如框框、加粗;
          3. 對齊很重要:數據右對齊、信息左對齊,注意表頭對齊;
          4. 間隔和行距也很重要;
          5. 單位很重要,盡量減少數字本身的長度,不超過4位;
          6. 去重非常重要(盡可能減少畫面里的重復信息,可以讓重要的信息更突出);
          7. 字體修正(看個人喜好)。

           

          2.2 數據如何被看懂?

          嘉賓介紹了4個項目:

          項目1:國內外藝術院校的數據可視化展示。

          由于經常會有同學問各大美院或藝術類院校之間的區別。嘉賓抓取了17所國內國外院校的數據來做展示,藍色是代表“設計類”,白色代表“純藝術類”。從中也可以看到院校的結構是否扁平。

           

          項目2:嘉賓基于wikidata數據庫編寫的小工具。

          最初只是用來快速查找藝術家的基礎信息,后來加入視覺化功能,把所有查詢到的人排列到一根時間軸上,橫向觀察她所關注的藝術家的生活年代及壽命。

          通過可視化的展示,她發現自己關注的都是集中在某一個時期的藝術家,除了看到自己的喜好之余還很有效地發現自己的知識盲區(只有看到了自己知道什么,才能知道自己還不知道些什么)

          我們可以發現在人類歷史上,很多人物在時間即便在空間上沒有交集,卻在時間上相遇了。

          比如Jackson Pollock,藝術史上動態藝術里面用身體的律動去做油畫的一個非常重要的藝術家,他和計算機之父圖靈原來都是同一年出生的,酒鬼Jackson Pollock居然比圖靈還多活了兩年。

          我們還能八卦一些愛情故事,原來搖滾界的神話列儂跟小野洋子是姐弟戀,而且列儂只陪伴了洋子生命的一小段時間。

          我們可以清楚地看到“看得見”的魅力。

          很多信息的缺失并不是不存在,而是無法被看見,被觀察。

          因為看不見,很多信息甚至是完全錯誤的。在測試代碼的過程中作者更意外地發現愛迪生的生日被錯寫為2016。

           

          項目3:紐約大都會藝術博物館做的Unfinished項目。

          Unfinished是大都會藝術博物館別館在首次開幕時的處女展,Unfinished討論的是“藝術很重要”的話題:在藝術的世界里,什么是未完成,展期為半年。嘉賓認為這個線下展展期太短非??上?,希望可以通過技術的手段延長展期,更希望能降低門檻,讓更多世界各地無法前來觀展的人可以有機會參與討論。

          于是嘉賓將Unfinished展做成了Google的插件,安裝插件之后,當新打開空白頁的時候,空白頁會自動被Unfinished的作品填滿,把一個簡單的空白窗口變成藝術之窗,同時讓人不需要任何搜索便進入展覽。

          此外嘉賓賦予了這次改造更多的交互空間,讓人可以實現在傳統線下博物館沒有的體驗,讓他們自由地在“未完成”的作品上進行創作并分享,延長了作品的壽命,讓藝術品重回人們的生活中,賦予其新的價值和靈魂。

           

          項目4:通過整理全國美展的數據總結的一些獲獎規律

          得到的3個有趣的結論是:

          1. 高亮的紅色、黃色很受歡迎
          2. 1999年,30多、40多的藝術家容易獲獎
          3. 畫一張少數民族在沙發上抱著一頭牛的作品在數據上是很可能獲獎的

           

          3. 數據如何被視覺化?

          在實際工作里,大部分人會接觸到的數據視覺化實際上是信息圖表,關于信息圖表的一些規范和小技巧嘉賓也有提及到:

          在做圖表時,動機往往比較重要。

          下圖是為了說明布什總統下臺的話,居民稅收會增長多少,其實只有不足5%的區別,但對圖表做了去零線處理,使得看起來差異很大。

          作圖的時候要先說明結論。

          比如下面的表格是員工為了向老板說明自從少了兩位員工之后,單子處理不過來了,意思就是說老板你得給我加人。

          千萬不要出現彩虹柱狀圖,折線圖在多周數據對比的時候會非常實用。

           

          最后是一些推薦的網站和資源:

          最后釋疑:

          五步提升你的版面精致度

          資深UI設計者


          首先,我們怎么去理解在作品集版面中的“精致度”。我覺得可以將其轉化為“質感”,“細節”,“細膩”這樣的詞匯。其實“精致度”不足這個問題大部分同學也是能有所感知的,只是不知道哪里出了問題,也就無從下手。當然還有一小部分同學,可能并不覺得自己有什么問題,也無法體會修改前后的差別,這樣的同學,我建議你平時應該多看一些優秀的設計作品,多沉淀一下,這樣的方式對你幫助更大。


          很多同學經常把“精致度”理解為形式感不夠,或者是不夠酷炫,這么理解是不準確的。這就好像一個產品,它的精致和它的外觀設計并沒有什么直接聯系,而是更多的取決于這個產品的做工和材質。做工體現在接縫的處理,邊角的打磨等等,而材質決定了其質感的好壞。那么同理,版面的“精致度”實際上和你的設計感也是沒有直接聯系。那么從哪些方面體現版面中的“精致度”呢?我結合自己的經驗總結了以下幾個方面:

          1.舒適的間距。一個合適的,讓人舒適的間距特別重要。無論是文字與的,或者說認為不重要的事情。混亂的,不統一的,不舒適的間距會讓版面變的排布變的無章,這就好像一個產品各個部件的拼接接縫大小不一,會導致“精致度”下降。

          2.大小比例。版面中所有元素的互相之間,以及相對于整個版面的大小比例問題。這個也是非常重要的一個體現“精致度”的地方。所有內容都過于傻大粗,無疑會讓版面看起來非常粗糙。

          3.層次感。層次感實際上是一個非常好的提升質感從而體現出“精致感”的手段。缺乏層次感的版面會顯得非常的寡淡,以及在內容較多時可能會在視覺上造成較亂的感覺。那么如何提升層次感,主要是靠對比的強弱。比如:深與淺,粗與細,大與小,疏與密等等。

          4.字體。選擇一個精致好看的字體,對版面的精致度有一定的提升,不過還是要注意,字體的與版面之間的大小比例要注意。


          5.配圖。配圖的質量也一定程度上影響了版面的精致度。無論是你自己做的圖,比如分析圖,效果圖等,還是你網上找的圖,如參考圖等,都很大程度上決定了你這一頁的精致度。


          通過以上幾點的提升,我相信你的版面“精致度”一定會有較為顯著的提升,而版面效果也會看上去更為高級。不過這里還是要再次提醒,精致度和設計感是兩回事兒,如果只有精致度,而設計感較差,那也是不行的。希望本期的內容對你的版面有所幫助。


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

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


          文章來源:站酷   作者:馬克筆留學設計

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

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


          2021年設計師們最值得做的練習TOP3

          seo達人


          日常的設計需求需要設計師們準確、快速的解決問題,這也代表著我們很難在日常的工作中嘗試新鮮或更具挑戰的設計風格,所以設計練習就成為了設計師們提高自己技能水平的重要途徑!新的軟件、風格或者配色,總讓人躍躍欲,今天我們就一起看一下,2021年全世界最受設計師們歡迎的練習方式TOP3

           

          01.3D自畫像

          自古以來,自畫像始終深受各種藝術家的喜愛。從油畫、雕塑,到現在的數字插畫,設計師們也用五花八門的方式展示著自己獨特的性格和審美。這兩年最火爆的形式毫無疑問是3D風格,3D自畫像也成了越來越多設計師們表達自我、提升能力的重要途徑!如果你想做些3D練習,自畫像一定是很不錯的選擇。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          02.抽象幾何

          方、圓、三角…這些基本的形狀也是整個設計殿堂根基的重要組成部分。過去的一年中,越來越多的設計師用這些基本的幾何形狀,來挑戰排版設計。大道至簡,簡單的色彩和圖形更加考驗設計師們對元素的控制能力,看似隨意擺放的圖形,其實都由設計師們精心布局和修飾!

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          03.暗色設計

          黑色場景雖然較少,但是不可或缺。隨著暗色模式的普及,設計師們隨時會面對黑色場景的設計需求,在練習中熟悉其設計規范就變得尤為重要。如何進行色彩搭配,如何整理層級關系,如何兼顧亮暗雙模式,這些問題對設計師來說都是不小的挑戰,提前練習自己對暗色設計的熟練度吧,在黑暗中也能散發光芒!

          圖片

          圖片

          圖片

          圖片

           

          原文地址:設計師深海(公眾號)

          作者:設計師深海

          轉載請注明:學UI網》2021年設計師們最值得做的練習TOP3

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

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



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

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

          產品細節剖析,提升用戶體驗就差這一點!

          seo達人



          在體驗優秀的作品時,我們需要站在用戶的角度去發現好設計細節及交互解決方案,思考能給企業或用戶帶來價值并記錄下來,久而久之,就能提高自己的語言組織以及總結能力,再通過不斷的練習,以達到質變效果。

           

          151.「keep」設置身高/體重-模擬現實生活中的固有認知

          152.「網易蝸牛讀書」找人共讀-堅持讀書的動力

          153.「keep」隱私模式-一鍵隱藏跑步軌跡

          154.「京東」刪除搜索記錄-決策思考

          155.「嗶哩嗶哩」動效IP結合操作特性-提升品牌曝光度

          156.「高德地圖」返回-貼心的交互手勢反饋

          157.「騰訊視頻」只看TA-滿足“追星”用戶沉浸式體驗

          158.「京東讀書」你用過橫屏時分欄閱讀嗎?

          159.「ETC車寶」如何在較少的空間展示更多的內容?

          160.「盒馬」金剛區-引導用戶直達目標、快速轉化

          161.「美團」酒店住宿-評價功能的重要性

          162.「今日頭條」內容與評論區-高速直達

          163.「MONO」TAB欄圖標-植入品牌記憶

          164.「高德地圖」屏幕常亮-減少不必要的操作

          165.「嗶哩嗶哩」生日-通過閃屏給自己一個暖心的祝福

           

          151.「keep」設置身高/體重-模擬現實生活中的固有認知

          產品體驗:

          在keep設置身高/體重時,頁面效果采用了現實生活中的尺子/稱的刻度,通過左右滑動,跟隨刻度變化調整出準確的身高/體重數值。

           

          設計思考:

          早期的互聯網產品界面,很多都通過擬物化的設計來描繪現實世界中的產品,其便于用戶對功能進行感知,模擬物理世界中的交互,幫助輕松掌握界面的使用方式,最大程度的降低用戶學習成本。雖然后來逐漸過渡到扁平設計風格,但很多方面,依然保留了擬物的特征。擬物化風格會不會再次來臨也不得而知,但從設計趨勢的不但變化可以看出,如2020年火爆的新擬態設計(基本撲街)、C4D、2.5D設計等表現手法,都是在朝著貼近現實世界的認知方向延展。

          在keep設置身高/體重時,通過模擬現實世界用戶對生活中事物的認知,將頁面設計成尺子/稱的刻度樣式,左右滑動即可設置完成,很符合用戶的直覺。模擬現實的設計可以幫助用戶輕松掌握界面的使用方式,更快的跟產品之間建立連接,根據模仿學習的基礎,有利于初次接觸的用戶,降低學習成本、提高效率以及出錯概率。

           

          152.「網易蝸牛讀書」找人共讀-堅持讀書的動力

          產品體驗:

          進入網易蝸牛讀書的介紹頁面,通過“找人共讀”邀請喜歡讀書的伙伴加入,為堅持下去提供動力。

           

          設計思考:

          說起線上讀書,一開始必定給自己定下各種計劃,還會下定決心,從明天開始就……??捎媱澓茇S滿、現實很骨感,當你不想再看書時,可以找到上百個說法來掩蓋自己堅持不下去的理由,且聽上去合情合理。很多內/外因素的存在,當正在看書時收到朋友的吃燒烤邀請、網友的開黑4缺一、前男/女朋友的微信等都是放棄計劃的開始,即便可以抵擋這些誘惑,但面對看到的精彩無處表達喜悅、疑惑之處無地訴說等,無法交流的痛可能是壓倒你堅持的最后一根稻草。

          網易蝸牛讀書可以邀請喜歡看書的網友一起學習,通過交流互動、相互鼓勵提升學習氛圍,雖然在虛擬的網絡世界,但相比一個人讀書更有看書的儀式感,精彩之處相互分享、不懂之處相互交流,擺脫一個人的孤獨,為堅持讀書提供源源不斷的動力。另外,第一次共讀的用戶,還可以免費得書,且后面能獲得翻倍的蝸牛殼用于換書,正所謂免費東西不要白不要,以此增加用戶的使用粘性,提升用戶在此平臺讀書的頻率,為后面的轉化提供條件。

          (一個人在電影院就算看著喜劇也可能睡著,但一群人在場很可能讓你笑的岔氣;一個人靜悄悄的在手機追劇跟開著彈幕相比,也是兩種不同的心情)

           

          153.「keep」隱私模式-一鍵隱藏跑步軌跡

          產品體驗:

          在keep跑步完成后,進入跑步記錄頁面,開啟隱私模式,系統會屏蔽跑步軌跡地圖上的部分文字信息,避免用戶在分享后暴露自己的位置隱私。

           

          設計思考:

          跑步是受大家喜歡的運動之一,沒有健身房里的復雜訓練和費用成本,且時間靈活自由,經常跑步可以減肥、改善視力、改善失眠狀況、釋放壓力/舒緩情緒等諸多好處。堅持跑步需要極強的自制力,如果光靠自律來讓自己堅持,很少人能做到,其外在條件不可或缺,比如多人約定一起跑,相互鼓勵;給自己制造必須跑步的條件和理由;打卡朋友圈,獲得他人認可和鼓勵等。打卡朋友圈是很多人使用的一種方法,一方面礙于面子心理,通過營造努力的人設,在他人那里博得面子和形象,給自己帶來心理上的滿足感;另一方面,可以通過其他人的點贊、評論獲得對自己的肯定,增強自己對跑步的興趣,以提供堅持下去的動力。

          keep為了讓用戶更安心分享自己的跑步記錄,在跑步軌跡地圖設置了隱私模式,點擊“小眼睛”開啟后,軌跡地圖上去掉了位置及信息標記,只能看到大概的輪廓。隱私模式能有效避免用戶的位置信息泄露,以最安全的方式使用產品帶來的服務,給用戶更容易掌控的感覺,帶去安全保障的同事,還能提升用戶對產品的信任度。

           

          154.「京東」刪除搜索記錄-決策思考

          產品體驗:

          在京東搜索頁面刪除歷史記錄時,會自動展開所有搜索記錄,不打斷用戶瀏覽的情況下再次提醒是否全部刪除。

           

          設計思考:

          應用將用戶的搜索行為記錄下來,其主要目的是方便用戶下次使用時再次展現,可直接點擊快速找到自己所需的商品。雖然保存搜索記錄是在給用戶提供方便,但也可能將用戶較為私密的關鍵詞暴露給其他人,如果被自己的朋友或親人看到,就有些尷尬了,刪除歷史搜索記錄無疑是最有效的方法。在用戶刪除歷史記錄的過程中,其不同的交互方式給用戶不一樣的體驗,且還能提醒用戶思考、是否需要放棄這一操作行為。

          在京東APP刪除搜索記錄的過程中,系統將所有記錄展開供用戶瀏覽,且右上角出現“全部刪除”的弱提示。通過展示的歷史記錄給用戶足夠的時間,以延長用戶下一步操作決策的思考,降低刪除成功的可能。眾所周知,用戶在操作刪除時,其主行動目標就是刪除成功,雖然在中途不太可能改變用戶的想法,但每給用戶多一份思考(所有歷史記錄),用戶改變想法的可能性就會增加;每增加一定的難度(弱化刪除操作,降低視覺傳播速度),用戶放棄下一步操作的可能性也會增加,而且應用需要通過用戶多次重復的搜索記錄來計算,確定是否增加該關鍵詞對應產品的曝光頻率,以達到更多的轉化,用戶的歷史記錄一旦刪除成功,就會增大二次搜索關鍵變化的范圍及不穩定性,不利于系統更精確的定向推薦產品及服務內容。

          常見刪除歷史搜索記錄的交互方式無非三種,雖然不敢說哪一種最好,但可以根據應用的實際需求酌情利用:

          ①、無提示:操作刪除即刪除成功,路徑最短、效率最高,但極容易造成不可挽回的誤操作(如:美團);

          ②、弱提示:操作刪除,再次提示是否刪除,弱化主操作,不影響頁面瀏覽,給予足夠的思考空間,但容易混淆原本的想法并通過信息錯覺給用戶“洗腦”,促使用戶放棄下一步操作或引導其誤操作(如:京東);

          ③、強提示:操作刪除,通過彈窗提示用戶快速做出決策,效率較高,但用戶無法瀏覽頁面內容,沒有太大的思考空間,只停留在“是/否”的層面上(如:淘寶、餓了么)。

           

          155.「嗶哩嗶哩」動效IP結合操作特性-提升品牌曝光度

          產品體驗:

          在嗶哩嗶哩視頻下方點贊時,或出現IP豎起大拇指的動效,生動有趣,點贊成功的同時,還傳播了品牌形象。

           

          設計思考:

          大拇指點贊是出現過最多的一種圖形表現方式,其誕生于2000年后,逐漸在全球各種應用中出現并被人們接受且成為一種潛在的點贊認知,通過自己對產品/內容的態度和認知傾向,用支持、贊同、偏愛等表達主觀情緒感受。知名產品對點贊的視覺表現、交互效果都非常嚴格,因為它會影響所有用戶的使用體驗及品牌價值。

          嗶哩嗶哩的點贊除了常規的大拇指圖標交替出現外,還融入了動效品牌基因及激勵性質的文案。點贊成功時,圖標上方會出現一個豎起大拇指的動效IP形象,2秒后消失,利用點贊的特性結合IP強化品牌,為用戶在操作過程中增強記憶,提高品牌的曝光度,且動效IP樣式更具產品靈魂和趣味性。

           

          156.「高德地圖」返回-貼心的交互手勢反饋

          產品體驗:

          在高德地圖頁面返回時,使用右滑交互手勢,所接觸的位置會出現水滴狀的返回圖標,對用戶做出交互反饋。

           

          設計思考:

          針對移動端界面的返回,第一印象是左上角的返回圖標,但在全面屏手機普及后,大屏幕尺寸也又開始占據市場,屏幕大意味著內容可以更大限度地得到展示,但也會增加單手操作的難度,尤其是頂部,幾乎成為單手操作的盲區,于是,很多應用開始將重要的功能往下方移動以及增加了很多隱藏的交互手勢,如上/下/左/右滑動、雙擊、長按、多指并行等一系列便捷的操作。

          其實很多交互手勢,用戶已經見怪不怪,基本都有接觸,但是在地圖類型的應用中,80%以上的用戶操作各方向滑動時,思維還停留在移動地圖的認知上,很少有右滑返回的概念。高德地圖增加了右滑返的交互,且在人機交互的接觸位置出現水滴狀的返回圖標,給予用戶明確的反饋,便于用戶快速區分對應的下一步變化是返回還是滑動地圖,極大方便用戶使用,簡單的設計細節十分友好貼心,不知道的童鞋趕緊試試吧!

           

          157.「騰訊視頻」只看TA-滿足“追星”用戶沉浸式體驗

          產品體驗:

          在騰訊視頻橫屏觀看影片時,點擊“只看TA”,選擇只想看到的明星片段,后續在看片過程中,系統會自動屏蔽與該明星無關的片段。

           

          設計思考:

          所謂“蘿卜青菜、各有所愛”,針對喜歡追劇/看片的人群,其目的是各不相同,比如喜歡歷史的,所關注的是故事的情節、改編程度及連貫性;喜歡科幻的,關注的是動感和特效。但說起青春偶像劇,喜歡看的,大部分用戶都是片中某些明星鐵粉,因“鮮肉”云集,打開彈幕就不難看出,鋪天蓋地的都是“好帥啊”“老公”“摸了女孩的手、我好傷心……愛死了”等一系列的花癡語錄,什么演技、劇情都不重要,重要的是“TA”別消失,不然的話就算是通過快進、跳集也要找到(抱歉、曝光了那一類人看劇的“貓病”)。

          騰訊視頻APP的“只看TA”功能,解決了看片專為偶像而來用戶的需求,選中“只看xxx片段”,后續會自動屏蔽與該明星無關的內容。因為感性的成分較多,“只看TA”功能對于單純追星的用戶來說,再也不用通過快進、跳集的方式去尋找相關片段,可無需任何操作沉浸式看片,給用戶帶來較強愉悅感和滿足感。

           

          158.「京東讀書」你用過橫屏時分欄閱讀嗎?

          產品體驗:

          在京東讀書的高級設置中,打開“橫屏時雙頁”開關,在橫屏閱讀時會變成左右雙頁的樣式,給用戶多一個選擇。

           

          設計思考:

          在報紙、刊物、出版物中,我們經常看到將大量的文字進行了分欄展示,其目的主要是便于快速閱讀。人們在閱讀大量的文字時基本都是不斷地從左到右-返回-從左到右……如此循環下去,當一行文字較長時,頭部和視線需要跟隨文字大幅度的移動,看完一行后,再用相反的動作返回下一行的開頭,費時費力費精神。而較小的行寬能讓一行文字在大部分情況下始終保持在目光范圍內,保證閱讀的完整性,提升閱讀速度。

          使用京東閱讀APP,在高級設置中開啟橫屏時雙頁(分欄),其實在用戶看書時并沒有多大作用,但根據少數用戶的視覺瀏覽喜好多提供了一種選擇。針對習慣、感觸各異的互聯網用戶,在不影響功能、視覺體驗的情況下,讓他們去選擇最適合自己方式,是滿足用戶需求的最佳之舉。

           

          159.「ETC車寶」如何在較少的空間展示更多的內容?

          產品體驗:

          進入ETC車寶“我的”頁面,會員版塊會出現抖動的效果,下滑可展開會員權益,上滑即再次隱藏還原。

           

          設計思考:

          用戶開通會員/購買增值服務是企業盈利非常重要的一大版塊,其固定入口大部分在“我的”頁面,為了引導用戶轉化的需要,也會合適的穿插在其他頁面、狀態、功能之中。因“我的”頁面需要給用戶提供常用的跟個人相關的功能,固會員版塊展示區域,基本上不能超出自己的那“一畝三分地”,也間接導致了因展示內容較少、吸引力不夠、轉換率較低的情況。

          ETC車寶的會員版塊展示區域同樣較小,但卻合理利用不同的交互方式在不占用太多頁面資源的情況下,展示了更多會員權益。進入“我的”頁面,會員版塊會出現抖動的動畫效果,其最主要作用在于動態比靜態更加吸引眼球,增加視覺關注度,利用輕交互動效來吸引用戶視覺焦點,增加點擊欲望。

          一般來說,除非用戶在目標非常明確的情況下,才會主動進入會員頁面,因為這關系著用戶的經濟成本。ETC車寶“我的”的下滑可展開會員權益,上滑即隱藏,既做到了不占用頁面空間,又額外給用戶展示了比較有誘惑力的會員權益,吸引用戶參與,勾起開通會員的欲望,同時也能在減少用戶操作的情況下,了解更多會員內容,最終達到增加轉化率的目的。

           

          160.「盒馬」金剛區-引導用戶直達目標、快速轉化

          產品體驗:

          盒馬APP將金剛區的入口直接做成了產品一級分類,用戶進入首頁,即可根據對應的需求快速到達指定位置,少了各種常規功能的彎彎繞繞。

           

          設計思考:

          常見的電商應用,大部分都是直接在底部標簽欄設計一個分類入口,而金剛區是一個頁面中頭部的重要位置,也是核心功能區域,其聚合了各類子板塊的入口,為各個子版塊分發內容引導流量,所以其重要性不言而喻。

          盒馬APP直接將金剛區設計成產品類型入口,其最主要的目的是引導用戶在最短的時間內找到目標,快速解決用戶需求,少了常規的套路和彎彎繞繞,多了一份效率。相比tab上的分類入口,更能促進用戶快速決策,避免用戶被其他內容吸引而產生新的想法,影響轉化。

           

          161.「美團」酒店住宿-評價功能的重要性

          產品體驗:

          美團酒店住宿詳情頁主圖的右下角,會特別突出該酒店的綜合評分和其中一條好評,點擊后可進入評論頁面,依然突出酒店評分,以及大數據下的住客偏好。

           

          設計思考:

          評價的目的更多是為了表達個人對于某問題或現象的看法以及思考,也會作為后來者是否購買該產品的重要依據,直接關系著店鋪的綜合評分。不難看出,用戶在購買某個產品時,除了價格之外,買家秀就是決定用戶是否轉化的關鍵因素(不是唯一),商家也會使用各種方法來提高好評率,其中就包括收到快遞后好評返現券、商家電話提示等??v然如此,評論功能也都只是提供一個的簡單入口或介紹完產品后象征性的展示最近兩條最新評論,還沒有上升到超級重要的程度。

          美團APP酒店住宿版塊則把評論(綜合評分)的重要程度提升了一個等級,將綜合評分和其中一條好評顯示在詳情頁主圖的右下角,用戶進入即可被快速吸引。住客都是以自身位置為中心,因距離的因素限制了諸多選擇條件,相比其他電商產品,評價似乎成了除價格之外的唯一決策條件,提高評價功能的等級,也是為了將對應的信息快速傳達給用戶,減少其思考時間,提升決策效率。

           

          162.「今日頭條」內容與評論區-高速直達

          產品體驗:

          在今日頭條的新聞詳情頁,點擊小氣泡圖標,頁面會自動跳到底部評論區,以供隨時查看、參與評論,再次點擊圖標,可回到之前未看的位置。

           

          設計思考:

          在擁擠的公交/地鐵上、忙里偷閑的上班時間里,我們偶爾會打開新聞APP來了解一些社會熱點資訊,增加知識視野及“吹水”能力,偶爾還會跟隨大流調侃一番。當被新聞中某個有趣的點刺激著自己的腦細胞時,會不自覺的進入評論區表達自己的想法或看看別人見解,很簡單,點一下底部(大部分底部懸浮)的氣泡圖標就能直達。一番操作之后,要再次回到頁面剛才沒有看的位置就難搞了,因大部分新聞內容較長,靠下拉去查找基本不現實,且查找的時間越長,記憶力就會逐漸減弱,浪費更多的時間成本。

          今日頭條APP的新聞詳情頁面,在點擊圖標去到底部后,若想回到文中原來的位置,只需再次點擊圖標即可,避免通過調取大腦記憶滑動頁面查找而浪費大量的時間,還能防止用時過長而“斷片”,為用戶提供了便捷的路徑,減少不必要的誤操作,增加產品的易用性。

           

          163.「MONO」TAB欄圖標-植入品牌記憶

          產品體驗:

          MONO(貓弄)APP,底部tab欄圖標直接用名稱中的四個字母替代,以達到最大化品牌傳播的目的。

           

          設計思考:

          一個應用是否好用,其視覺(交互效果/任務流程/操作方式)占據很大的作用。tab欄作為整個應用結構的入口,也不例外,不管是精致的圖標、趣味的動效還是優秀的交互方式,其目的都是為了通過美觀的視覺,將產品想表達的內容清晰發反饋給用戶。

          MONO打破了以往其他應用tab欄的常規表現方式,將名稱拆解,即M、O、N、O以圖標的方式至于tab欄,用最直接的方式進行品牌傳播,讓用戶記住的并非APP里的某個功能,而是品牌記憶。雖然跟用戶所需要的美觀、親和力、趣味性等,似乎是反其道而行,但存在即為合理,通過品牌基因的融入,能讓產品帶有靈魂, 延伸品牌價值觀以及突出圖標特征來提高品牌曝光度,讓用戶看到產品的第一印象,就知道當前使用的是什么,當品牌元素在產品的各個層面合理復用時,也能增強用戶記憶,變相提升用戶粘性。

           

          164.「高德地圖」屏幕常亮-減少不必要的操作

          產品體驗:

          在高德的地圖設置中,開啟“開啟屏幕常亮”功能,即可在導航過程中保持設備屏幕常亮,避免猝不及防的息屏帶來安全不必要的麻煩和安全隱患。

           

          設計思考:

          平時我們在導航的過程中,如果長時間沒有觸碰手機會出現自動鎖屏的情況,因事發突然,若行駛在交通復雜且不熟悉的道路口,慌忙之中選擇解鎖手機查看、剎車減速靠邊或隨便駛入其中一個路口,不管何種選擇,都可能來不必要的麻煩及安全隱患。

          使用高德導航時,在設置中開啟屏幕常亮后,導航過程中能有效防止設備自動變暗或鎖屏,避免用戶在駕駛過程中手動調整設備或考慮突發事件造成大腦“開小差”,影響駕駛安全。屏幕常亮可以幫助用戶將更多的注意力放在安全駕駛方面,不會因出現息屏受到影響,從而提升安全系數。

           

          165.「嗶哩嗶哩」生日-通過閃屏給自己一個暖心的祝福

          產品體驗:

          在生日當天進入嗶哩嗶哩,啟動頁之后會出現一個暖心生日祝福+溫馨的閃屏,利用情感化的表現方式讓用戶在進入應用之前就能感受到友好的祝福,幾秒鐘后,自動進入首頁。

           

          設計思考:

          “生”是來到這個美好世界的一種方式,“日”是紀念降臨人間的日子。很多人都想在自己生日這天得到好友的祝福,只有在這一天才感覺到自己是真正的主角,聽到一聲“生日快樂”是對自己最好的期盼,被習慣性地祝福,即使這一天自己天犯了什么錯,也會被不同程度地原諒,因為我們知道,還有人記著、愛著自己。

          在智能設備普及的今天,我們身邊少了很多的朋友,但卻多了一個鐵友-智能手機,最初給我印象最深的就是在生日這一天,從早上開始,QQ的生日祝福消息就沒有斷過,雖然都是虛擬的禮物,但至少是自己的朋友(Q友)親手送出,還是無比的開心。而如今的微信、抖音、視頻等平臺成了手機必備,履行著我們可以沒有朋友,但不能沒有手機的原則。表面上看,我們似乎在和冷冰冰的機器交流,實則應用早已通過親和、情感、趣味化的方式成為了自己最忠實的朋友。

          在生日當天進入B站,系統會通過閃屏的方式給我們送上最真摯的祝福,溫馨的畫面+暖心的祝福語,再結合產品的特性融入情感化的設計,為用戶打造了一個有歸屬感且溫暖的“家”,為產品設計增添了人情味,并通過祝福的方式拉近用戶與產品間的距離感。如果自己的生日被所有人遺忘,多少會有些失落感,而B站用溫暖的方式傳遞愛與力量,也能撫慰每一個被情緒傷害過的靈魂,這也是鞏固用戶粘性與忠誠度十分巧妙的方式,一個小小的細節,就能感受到產品的溫度與團隊的用心,很大程度上提升了用戶對產品的好感度。

           

          結語:

          設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來,加強自己的記憶,不僅能提升自己的語言組織和總結能力,也為日后輸出優秀的作品當鋪墊,對自己的能力提升以及未來的職業發展帶來便利。

          本期產品設計細節分享結束,我們下期再見。

           

          原文地址:能量眼球

          作者:大漠飛鷹CYSJ

          轉載請注明:學UI網》產品細節剖析,提升用戶體驗就差這一點!

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

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



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

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

          日歷

          鏈接

          個人資料

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

          存檔

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