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

          首頁

          淺談圖表編輯系統的構建

          ui設計分享達人

          undefined


          一、項目背景


          RayData作為一個系列的可視化工具,內容資產作為基礎的構成發揮著重要的作用,在日益更新迭代的過程中,會發現每條產品線對圖表組件的需求都很繁重,無法避免地重復開發。通過開發通用型組件可以一定程度的解決問題,但是存在靈活性差,組件庫維護困難等問題,而且內部產品圖表庫各自獨立,缺乏統一的設計語言。



          通過對類似競品的調研,發現圖表做為承載數據信息的組件,本身只是工具,它的使用體驗優劣還往往取決于業務需求、數據類型、圖表本身的視覺效果接受度等因素。而且圖表類型的豐富和靈活程度,使用的框架及響應時間,商業或免費和開源狀態也都是評判標準之一。

          無論是小而美的個人項目還是大數據可視交互管理系統,項目生命周期的前四分之三階段,進行的緩慢糾結,充斥著大量需求變更,新想法的臨時加入。當多個項目同時展開,圖表組件效果是否靈活多變、復用性的高低對制作人員生產力、客戶方耐力、項目最終達成時雙方的消耗力有極大考驗。



          通過對類似競品的調研,發現常見的可視化圖表庫都存在自身的局限性,體量大,功能冗余,更新緩慢。最終促成了我們從兩個維度入手,提煉關鍵詞,簡化并轉化成圖表庫系統的功能點。




          二、設計方案


          圖表存在很多分類方式,基于形狀命名、作者命名、抽象概念命名和數據結構命名等。

          為了更好的幫助使用者快速定位,我們簡化了圖表大分類,依據人對形狀輪廓最初的感知,調動直觀的感受來進行分類和命名。


          整個圖表庫的設計層包含顯性和隱性的兩種,顯性的規范面向用戶,隱性的規范面向開發。
          通過調研常見的工具類產品,結合對產品易用性的理解,我們把產品的顏色方案提出來單獨定義一個全局的顏色方案,以便一套配色貫穿整個項目使用,然后對通用的設置和個性化設置分開設計。



          可視化的組合來源有四種:視覺暗示、坐標系、標尺以及背景信息。
          其中視覺暗示是比較重要的組成,以直角坐標系結構為例,對大分類下的參數進行深入挖掘。




          1. 通用設置


           - 對圖表表現形式的考慮


          從設計的角度出發,我們希望賦予圖表樣式更多的可能性,開放高度自定義的調節參數。


           - 數據強調的表達


          通常用戶在初次瀏覽圖表時會把注意力放在圖形的差異化上,比如突出的顏色、突出的圖形,但并沒有及時將所有的數值聯系起來,之后才會進行比較,然后再看整體、分布和多變量關系。在顏色和屬性系統中單獨設置最大值、最小值的顏色和樣式,可以使得圖表展示信息的信息維度更高一層。



          2. 顏色配置方案

          數據可視化是基于物理世界反饋的信息,通過用各種視覺變量(例如圖形、顏色、維度)把數據進行編碼、再現的過程。
          色彩是數據可視化中濫用和忽視最嚴重的變量之一,也是所有視覺變量中最富于變化的一種。


           - 顏色方案的細粒度覆蓋


          信息圖表除圖形外感官最明顯的就是顏色,為了能夠達到圖表設計的高度自定義,色彩的搭配、自定義的程度,每個圖元都有對應的顏色設置。


           - 對圖表質感的考慮


          從設計的角度出發,嘗試在顏色系統中加入陰影、發光、全局陰影等結構,進一步還原設計的圖形處理習慣,豐富圖表的表達。


           - 預置顏色方案


          可視化項目的配色一般來源于實際需求和3D場景效果的搭配,通常是不能預判配色的。
          在這種情況下如果需要幫助項目的快速搭建,預置方案就要做到覆蓋面廣,適應性強,控制取色范圍,由此提出以下原則。




          3. 參數方案


           - 布局方式


          制定規范時候我們確定了默認的布局方式,綜合實際使用,以柱狀圖為例,寬度滑塊的最大對應100%寬度,圖形撐滿,更貼近使用者的直覺,另外考慮到多端融合,涉及到一些放大預覽的功能,默認選用百分比布局更合理。

           - 數據文本位置


          在實際配置圖表時候,圖形和文字的位置關系千變萬化,為了應對這種情況我們引入了文字基線位置和相對位置作為位置參照。使用中配合偏移量調節基本能覆蓋所有的情況。


           - 圖表代碼


          為了應對項目靈活配置的需求,我們把圖表編輯和Config參數結合,可視化控制生成的圖表Config參數,直接導出到項目使用。



          4. 交互適配優化


           - 不同終端hover交互效果


           - 不同終端預覽交互效果




          5. 動效規范


          除了勻速動畫,為了達成更自然的動態效果,引入緩入緩出速度曲線,同時為了達成更豐富的表達,增加了一條簡潔的回彈曲線

          undefined


          動效是圖表數據表達的一個重要構成,針對圖表的動效,通過總結圖元的運動方式,結合Material Design的一些處理方式,整理了一套圖表元素動效規范集合。

          undefined


          三、設計執行


          1. 編輯效果演示


          針對缺乏靜態數據等真實數據源,檢驗生成圖表的視覺效果的問題,我們為用戶提供了指定范圍隨機數生成功能,可以快速生成與應用項目數據相類似的效果。
          顏色配置方案能在同一項目中起到控制整個顏色風格的作用,可以快速應用到圖表上。

          2. 圖表自定義調節項



          圖表庫在項目中的應用

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

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



          文章來源:站酷   作者:RayData實驗室

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

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



          熱門的手機用戶輸入設計模式

          ui設計分享達人

          對于任何手機應用程序,如果沒有來自用戶的一些初始和正在進行的輸入,就不會發生任何事情。因此,手機產品設計師、開發人員和產品經理必須了解允許用戶這樣做的最佳方式。

          雖然手機應用程序以及使用它們的用戶通常是獨一無二的,但是有許多常見的模式(新模式和舊模式)被用來解決這個特定的問題。


          用戶輸入設計的6個目標


          在我們深入研究模式之前,了解用戶輸入設計的六個主要目標是很重要的:

          1. 選擇合適的輸入和資料登錄方法

          2. 減少輸入量

          3. 設計有吸引力的數據輸入屏幕

          4. 使用驗證檢查來減少輸入錯誤

          5. 設計所需的輸入文檔

          6. 制定有效的輸入控制


          模式的概述


          在記住以上設計目標的前提下,下面是我們在將本文中詳細介紹的設計模式的概述,在我們的電子書《2014年手機用戶界面設計模式》中有更詳細的介紹:

          1.智能鍵盤
          2.默認值&自動完成
          3.立即沉浸(或“惰性注冊”)
          4.操作欄
          5.社交賬號登錄
          6.巨大按鈕
          7.滑動操作
          8.通知
          9.顯性控件
          10.可擴展輸入
          11.撤銷


          1.智能鍵盤


          Facebook記事本,Android聯系人


          問題
          用戶希望快速輸入信息。


          解決方案
          當用戶點擊應用程序中允許輸入信息的部分時,給他們與輸入數據相關的鍵盤。這使他們不必在字母數字屏幕之間尋找正確的按鈕,或者多走一步來訪問鍵盤。這不僅方便了用戶,而且還指示了需要從用戶那里得到什么類型的輸入。手機平臺允許相應地標記文本字段,這允許在哪些按鈕顯示在更顯著位置方面有一定的靈活性。


          例如,在地址簿或撥號器中輸入電話號碼時,用戶不需要完整的鍵盤。當他們點擊這些字段時,數字小鍵盤就會彈出,而不是整個鍵盤,這樣就減少了不必要的按鈕,簡化了操作過程。類似地,點擊瀏覽器中的URL欄會彈出一個稍微修改過的鍵盤,其中“/”和“。com”按鈕顯示在空格鍵旁邊,而不是符號鍵后面。通過連接到系統提供的這些智能鍵盤類型,你的UI可以根據用戶當前嘗試的操作進行調整。


          2.默認值&自動完成

          Skype, Flightboard


          問題
          用戶希望快速完成操作。


          解決方案
          通過為用戶提供預先填充的默認值或基于先前輸入的數據的提示,預測頻繁選擇的項并使用戶更容易地進行數據輸入。這可以與自動完成功能相匹配,比如在谷歌Play Store搜索中,通過加速來顯著改善用戶體驗。這種模式在標準化用戶輸入和在問題發生之前預測問題方面特別有用。例如,Skype會自動為輸入的電話號碼匹配國家代碼。從用戶的角度來看,這是有意義的,因為他們不習慣定期輸入這些信息,但在這種情況下,這種匹配很重要,因為Skype是一個國際電話應用程序。


          另一種實現方法是保存用戶輸入的最后一項,并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如,Flightboard在搜索框下面列出了以前使用過的位置,以避免用戶再次輸入。大多數地圖或導航應用程序也采用這種模式,在搜索方向時自動輸入用戶當前位置,為用戶節省幾次點擊,因為這是最常見的情況。


          3.立即沉浸(或“惰性注冊”)

          Wunderlist


          問題
          用戶希望在注冊之前先嘗試一下。


          解決方案
          越來越多的應用程序允許用戶在任何事情發生之前——甚至是注冊或登錄之前——立即沉浸在應用程序中。


          記住,他們一次只能做一件事,而且測試每個新產品的時間有限。隨著應用程序的日益專業化,在扶持它們之前找到高質量的用戶或客戶越來越重要——他們可能會討厭你的產品或很快意識到它不是他們想要的。向用戶詢問注冊賬戶所需的信息可能是一件很困難的事情,而且會降低甚至是適合的訪問者的注冊率。在積極的方面,通過讓他們立即體驗你的產品,他們更有可能被吸引,因為他們能夠在第一次體驗時深入探索應用程序。這比我們接下來討論的onboarding walkthrough UI模式更好,因為它向用戶展示而非告訴他們應用程序如何工作。


          對于Carousel或Duolingo等依賴用戶數據來運行的應用程序來說,允許延遲注冊是沒有意義的,但Wunderlist或Houzz等應用程序可以允許用戶在要求他們確認身份之前進入并使用該應用程序。通常情況下,注冊會帶來一些額外的好處,比如在Wunderlist中進行跨設備同步,或者在Houzz中創建一本想法書,這會讓注冊變得更有吸引力。延遲注冊并不總是一個好主意,但是選擇“注冊前試用”可以很好地提高你的應用程序的參與度。


          4.操作欄

          Facebook Paper, Behance


          問題
          用戶希望快速訪問常用的操作。


          解決方案
          從應用程序的操作欄(或iOS術語中的“工具欄”)提供對重要操作的快速訪問。雖然導航條主導了web和早期的手機應用程序設計, 但其他模式的使用,如折疊、滑出式工具欄和側邊欄、指向所有內容的鏈接、按鈕轉換、垂直的和基于內容的導航,產生了更簡單的應用程序視圖,用戶可以專注于一級和二級操作,而不是二級導航。常見的操作有:在應用程序中搜索、共享和創建新內容。這個存留的菜單可以幫助用戶熟悉UI,還可以通過專注于與用戶相關的重要操作清除一些混亂。


          5.社交賬號登錄

          undefined

          Beats Music, Flipboard


          問題
          用戶需要一種更簡單的注冊和登錄方式。


          解決方案
          整合社交賬號登錄方法,允許用戶通過現有賬戶登錄。這意味著他們少了一個需要擔心的用戶名/密碼組合,同時,你也不必擔心密碼的安全性。Facebook、Twitter和谷歌是主要的OAuth登錄提供商,根據平臺和目標受眾的不同,你可以在你的應用程序中提供所有這些或其中之一,而不是讓用戶建立一個他們可能會也可能不會在未來使用的單獨的帳戶。使用這個注冊和登錄模式也可以為你提供一些基本的關于用戶的數據(當他們使用應用程序時,會自動填充數據), 同時,通過不強迫用戶在剛下載的陌生應用程序中輸入他們的詳細信息,讓他們更加舒適。這個簡單的特性可以在很大程度上改進你的UX,因此這種模式正在成為一種期望。


          6.巨大按鈕

          Tinder, Shazam


          問題
          用戶希望立即知道他們可以采取哪些操作。


          解決方案
          理想的觸屏點擊目標大小可能是72 px,但是一些應用程序,像Tinder,也會給你巨大的按鈕讓你確切地知道該做什么, 無論你在什么位置,無論你在做什么,你都能很快完成操作——很難錯過這些巨大的按鈕,即使你沒在仔細看。這在更簡單的應用程序中尤其有價值,因為在這些應用程序中,用戶需要執行的操作非常有限,因此更有理由讓他們在各種情境中更容易地執行這些操作。例如,Shazam是用來看電視或聽音樂的,它實際上只做一件事。對于試圖在這種分心狀態下進行多任務處理的用戶來說,巨大的按鈕是一個巨大的改進。


          7.滑動操作

          Carousel


          問題
          用戶希望關注特定的內容。


          解決方案
          允許內容被滑動或移動。這為用戶提供了一種非常直觀的方式來處理屏幕上的信息。例如,谷歌中的“卡片”現在可以在你不需要的時候被滑走,以清理雜物;類似地,Tinder中的配置文件可以向左或向右滑動,以表示積極或消極的響應。這個模式與我們在導航模式中討論的滑動視圖不同。在這里,滑動手勢被用于一項操作,而不僅僅是瀏覽。有些應用程序結合了兩種滑動模式,比如Carousel,它可以讓你通過將照片滑動到一邊來瀏覽多張照片,也可以通過向上或向下滑動來分享或隱藏照片。郵箱推廣了電子郵件客戶端的左右滑動操作,允許你分別通過向右或向左滑動將郵件標記為已讀或安排為待處理。Secret用讓你發現新菜單的方式來讓你發現新動作。向左滑動一個secret代表你喜歡它。


          8.通知

          LinkedIn, Facebook


          問題
          用戶希望了解他們應該瀏覽的新活動或操作。


          解決方案
          通過標記新內容來突出最近的活動。這個模式有幾種實現方式。例如,在標簽上放置一個計數徽章是由iOS推廣開來的,但現在這也可以在許多其他應用程序中看到,如LinkedIn、Facebook或Quora。Twitter在通知按鈕上也這樣做,但它在時間軸圖標的頂部還有一個小點,以更微妙的方式指示新的活動。另一種顯示通知的方式是在應用程序中使用一個向下拉的橫幅來顯示新活動。Facebook應用程序也能做到這一點,當新聞推送中出現新條目時,它會彈出一個小窗口。


          9.顯性控件

          Secret


          問題
          用戶希望快速訪問那些二級的或僅與應用程序中的特定部分或內容相關的控件。


          解決方案
          清理雜物,讓用戶只在需要時才發現特定的操作。這些看不見的控件可以通過任何手勢來訪問——滑動、輕擊、雙擊、長按等等(我們在手勢模式中討論過)。這使你能夠將這些操作保留在屏幕之外,從而節省一些寶貴的空間。例如,Secret使用手勢而不是可視控件。向右滑動,就會出現一個動作菜單,這是我們前面介紹過的折疊模式的簡化版。在創建內容時,用戶可以在背景上水平滑動或垂直滑動手指來改變背景的顏色和圖案,或者在使用圖片時,可以改變圖片的亮度、飽和度或模糊度。沒有其他控件允許你這樣做——也不應該有其他控件。這種UI設計模式非常直觀、清晰,你一定會看到更多這種類型的交互。Pinterest是另一個使用手勢隱藏動作按鈕的應用程序。長時間按下一個圖像,就會出現一個按鈕,用戶可以通過將彈出控件拖動到該按鈕上來對其進行固定或評論。


          Uber是這種設計模式的另一種實現方式。Uber還可以讓你在預訂和查看車費估算之間進行切換,只要你選擇了你想要的乘車類型,就可以通過點擊滑塊按鈕來查看車費估算。這是一個簡單而又重要的UI設計模式,每當我在做五件事的同時還想搭個便車,同時還要確保Uber不會用峰時價格來騙我的時候,它都會讓我微笑。Snapchat和Facebook Messenger允許你在需要的時候通過滑走所有朋友的賬戶來訪問這些功能。


          10.可擴展輸入

          YouTube


          問題
          用戶希望關注內容,而不是犧牲屏幕空間給控件。


          解決方案
          設計當用戶點擊時會展開的控件。這使得大多數控件在用戶需要它們之前都不會出現。例如,YouTube和Facebook通過將搜索欄隱藏在一個圖標后面來節省屏幕空間,當用戶點擊這個圖標時,它就會展開成一個搜索欄。


          11.撤銷

          Gmail, Chrome


          問題
          用戶希望在沒有中斷(例如:確認)的情況下快速地執行操作,但是可以選擇恢復意外操作。


          解決方案
          為用戶提供一個簡單的方法來撤銷他們的操作,而不只是要求他們事先確認。在某些情況下,某個操作可能會導致不方便或數據丟失,例如刪除電子郵件或編輯一些文本。用戶可能因為不知道會發生什么而完成了一個動作;一個寬容的用戶界面可以讓他們體驗到更多的參與感和友好。對于高級用戶來說,撤銷功能也很強大,他們會喜歡在整個過程中不用UI反復詢問他們是否確定要繼續操作,就能更好地控制局面。在解釋將要發生的事情時,確認彈出窗口可能很有用,但是用戶可能直到看到操作的結果才會理解其含義。在這種情況下,最好是讓開,同時提供一個安全網絡,以防出現錯誤。


          獲取用戶的輸入
          時刻記錄你應該從用戶那里獲得輸入的位置,他們是否曾經查看過這些輸入區域,他們使用這些輸入控件的頻率,他們從哪里來,又從哪里進入應用程序(即用戶流),等等。不斷地重新安排、重新排序、調整大小和調整這些控件,直到你獲得更多所需的操作。當然,當用戶能夠提供輸入時,要深入考慮他們實際上是如何使用你的移動應用程序的——確保你在設計應用程序時沒有遺漏什么明顯的東西。

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

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

          Web產品的適配設計選型

          ui設計分享達人

          開篇


          • 寬度單位我是用百分比還是px?還是rem?區別是什么?

          • 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設備像素、css像素?瀏覽器窗口大小和設備大小和分辨率大小區是什么區別?

          • 什么是響應式網站,自適應又是什么?兩者有何區別和聯系?

          • 百分比寬度布局和流式布局和前者的關系是什么?

          • 既然響應式這么流行,為何淘寶、京東等沒有去做,而是單獨開發了一個移動端版?這里面有那些坑需要避開?



          歷史長廊


          在早期,硬件設備落后,網頁使用的是絕對靜態布局為主,絕對固定寬度的布局被稱為是靜態布局(StaticLayout),也有叫固定布局(Fixed Layout)。


          后隨時代變遷,技術發展。因瀏覽器的增多,開發者們忙于兼容各種瀏覽器。在這個期間,實際已經有了針對各設備適配的解決方案,只是未成為主流,這種新布局方式叫自適應布局(Adaptive Web Design,簡稱AWD)。

          在當時,大多指的就是寬度自適應布局。在這種新思想下,又出現了兩派的具體解決方案:百分比寬度布局和流體式布局(Fluid Layout)。


          在當時,大家都還沒有響應式布局的概念,但此時出現了一個新的詞--漸進增強。漸進增強出現后,另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子:gmail和qqmail。這兩個都是百分比寬度布局,都屬于自適應布局,但有區別。


          qqmail就是css hack的完美體現,你用任何一個瀏覽器,幾乎可以看到同一個樣子的郵箱,為的是用戶體驗統一。gmail則使用了漸進增強,你的瀏覽器越新越強,你看到的效果就越好,為的是用戶體驗增強。再后來,Google發布了Android,移動互聯網爆發,html5標準發布。


          互聯網大戰從PC打到了手機。手機雖然屏幕變小了,但是卻提供了更豐富的功能,用戶要求不斷提高,網站更加看重的是用戶體驗了,所以,谷歌式的漸進增強被廣泛認可,結合自適應的思想,出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。


          描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以適應不同設備。



          現如今,為何需要考慮多設備的兼顧呢,依然是因為時代發展與生活方式的變遷:

          • 即便是PC或Mac用戶,有查顯示只有一半的人會將瀏覽器全屏顯示,而剩下的一般人使用多大的瀏覽器,很難預知;

          • 臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加,“主流設備”的概念正在消失;

          • 屏幕分辨率正飛速發展,同一張圖片在不同設備上看起來,大小可能天差地別。

            結合自身產品用戶訪問瀏覽器分辨率

          • 鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。

          因此我們需要在了解基本布局方式的特征下,選擇適合自身產品的布局實現方式。


          布局方式對比


          靜態式、自適應、流體式、響應式布局,A+R混合布局的特點對比如下


          靜態式布局:

          窗口縮小后內容被遮擋時,拖動滾動條顯示布局。不管在哪種設備,哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。



          自適應布局:

          用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。


          分別為不同的屏幕分辨率設備設計不同的樣式布局,相當于多個靜態布局組成的一個系列合集,每個靜態布局對應一個屏幕分辨率范圍,頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小,當可視窗口改變時,不會出現橫向滾動條,UI,圖片,文字會自動縮放,元素內容、布局、交互方式基本不變。



          彈性布局:

          以百分比作為頁面的基本單位,可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度,并能完美利用有效空間展現最佳效果。



          流體式布局:

          屬于自適應的一個子集,也是通過百分比自動適配設備屏幕分辨率和可視窗口大小,不同于百分比自適應的是隨著窗口大小的改變,頁面的布局會發生小的變化,可以進行適配調整,這個正好與自適應相補。



          響應式布局:

          如果從廣義上講,響應式布局實際上就是更好、更機智、更靈活的去實現自適應,他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性(如寬高)的變化。


          頁面的設計和開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和刪格、布局、圖片、css media query的使用等。


          狹義上講,響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。



          A+R混合模型布局

          R和A上的區別

          當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。


          他們之間主要的區別是DOM結構,當采用響應式思維開發時,HTML代碼在各種情況下都會一樣(除非你用JS移除某些DOM節點),而在自適應開發中我們可能會有不一樣的代碼結構和體驗。


          R采用流體+斷點,在斷點之間,頁面依然會隨窗口大小自動縮放(通過fluid grid),直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始(通常采用mobile first策略),所以舊的網站要做RWD很可能要完全重建。


          A只在針對幾種分辨率(如320,480,760,960,1200,1600px)進行優化,在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站(desktop version)而對于更小的分辨率做針對性的優化(適應),減小重構的成本。



          兩種設計思維都是有效的,需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計,例如通過自適應開發來構建定制化體驗。


          兩種方法各有利弊,但是如果同時使用它們到底會得到什么呢?A+R模型結合了基于單個主要臨界點的自適應和響應式方法。


          混合式布局就是為不同終端設備的屏幕分辨率定義布局(適配各種尺寸的PC、手機、穿戴設備等等),在每個布局中,頁面元素隨著窗口調整而自動適配,混合了百分比、像素為基本單位的組合方式??梢园鸦旌鲜讲季挚醋魇菑椥圆季帧⒆赃m應布局的融合。



          自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低,但拓展性比較差;而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。


          很多時候,單一方式的布局響應無法滿足理想效果,需要結合多種組合方式,但原則上盡可能是保持簡單輕巧,而且同一斷點內(發生布局改變的臨界點稱之為斷點,后面內容會講到)保持統一邏輯。


          否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式,非等分的多欄結構布局則需要采用混合布局的實現方式。


          選型

          如何考慮實踐過程中的判斷呢。一是看應用場景,二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類?,F在的CSS框架基本都具備響應性。


          但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上,識別UA,渲染不同版本的模板,組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。

          當各個版本間的差異很大時,維護成本很可能會大到無法接受。即便分開做,架構上也要調整,后端服務化,應用層app化。


          根據不同公司的技術特點,調整的成本也難講是否可行。對于大型站,分開做更清晰,同時用響應式組件解決復用、功能同步的問題??傊?,根據場景響應式可以從各種層面,各種粒度上做。這是現代web開發的特點。


          建議開發一套響應式電腦網站(過渡到平板端,不過渡到手機端)和開發一套響應式手機端網站(過渡到平板端以下的尺寸,不過渡到平板端)響應式布局有可能造成冗余的代碼較多,對研發的要求也更高,比如如何更好地讓圖片,適配,UI動畫自適應各種布局。


          大站還是要考慮數據計算和承載的問題,會對桌面和移動端輸出不同數據,減輕壓力。



          實踐與技巧

          首先,我們需要了解幾種分辨率的差別。


          ps:原生應用可查詢橫縱兩個方向的像素密度,通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率


          以一個SaaS類后臺產品為例,對于基本流量來自Web端網頁的產品而言,需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況,數據來源百度統計,如圖所示:



          如上所述,選擇適配方式時,設計目標為:區分web與pad端可共享的設計布局大于手機端,且產品規劃上web端為主流量來源,pad端屬于短期兼顧。考慮技術維護成本與開發成本的平衡,于是判斷需要選擇A+R模式來完成產品的跨端設計。


          自適應(A)方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點,根據全局統計信息定義,我們會得到一些相似處:

          • 左側的可視區代表整個屏幕小于960px時的具體布局和內容

          • 右側的可視區代表整個屏幕大于等于960px時的另一種布局



          在使用響應式(R)技術時,我們可以利用主要臨界點創建兩個互不相同的體驗情景,每種體驗里,我們都可以在可用空間內定義二級臨界點去調整布局。



          通過結合自適應和響應的方法,我們得到A+R模型。利用自適應技術,我們將致力于體驗和功能,作出兩種不同的情景設計。使用響應式組件,我們可以處理上下文內的UI組件和布局。



          這種設計方法要求設計師真正了解他們想要提供的體驗,以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的,你的產品將具有很強的靈活性,但同時也很復雜。


          因為你要處理不同的代碼庫和環境(非強制性),Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站,則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。


          其他輔助手段


          刪格

          柵格系統可以幫助我們設計,但卻不能保證我們的設計。它有多種可能的用途,并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言,這是一項十分有效的輔助手段。


          1. 列和槽(Columns and Gutters)列(Column)用于對齊內容。其中的槽(Gutter)是指相鄰列之間的空間,把控頁面留白,有助于分隔內容。



          2. 頁面邊距(Side Margins)頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值,這些值決定了每個屏幕尺寸的最小呼吸空間。



          3,用于組成柵格的列數稱為列結構。8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分,將內容排列在4-4-4或3-3-3-3大小的文本框中,也有部分設計系統采用來24列的形式,如Ant-D

          4,斷點是指屏幕尺寸的特定范圍,列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內,布局會根據可用的屏幕尺寸重新調整,以獲得最佳的布局視圖。


          如果較小的屏幕有足夠的可用空間容納內容,則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示,該列將垂直放置圖文內容。

          5,網格規則,列跟槽的寬度是以網格作為基本單位來做增減,所以應該先定義好柵格的原子單位,“網紅款”8點網格指的是設計頁面時,也應該遵循8點規律。值得注意的是,列跟槽的值盡量取8的倍數,但不是非得是8的倍數。


          產品中各類元素應該遵循這個倍數原則(圖標、組件大小等),不同的設計系統根據自身需求,設定這個規則。例如在Material Design中使用的是2X網格。

          6.流體柵格與混合刪格

          流體柵格有不同寬度的列,固定的槽和固定的邊距。流體柵格有靈活的內容寬度,根據屏幕大小變化在流體柵格中,列可以增長或收縮以適應可用空間。


          混合柵格既有不同的寬度,也有固定寬度。在現代布局中,一些元素超出了網格邊緣,與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。


          如果內容寬度大于可用的屏幕尺寸,那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格,以充分適應內容。

          結語


          設計需在技術方案前介入,根據你的產品特點,進行設計方案評估,可借助的手段有刪格,網格規則等,設計斷點規則時,需關注設備的常見系統分辨率。


          移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量,這些差別是可以通過響應式設計來解決的。事實上,你可以認為如果一種設計不能兼顧兩種平臺的主要差別,就不能算是合格的響應式設計。


          但是,如果確實想要處理好平臺間的所有差異,我們就回到了原點:進行兩種不同的設計或者使用A+R的模型,在尋求合適的過程中,關注技術的革新。


          A與B不是硬幣的正反面,它們為了解決同一個問題而生,是同一種思想的延伸。

          文章來源:站酷 作者:酷家樂

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



          空狀態-用戶體驗最被忽視的方面

          ui設計分享達人

          管對用戶體驗很重要,但空狀態經常被忽略。知道它們是什么以及如何使用它們,應用于UX最佳實踐,可以產生很多好處。

           

          什么是空狀態?

          UX設計師有很多機會來創造愉悅而有意義的體驗。一種經常被忽略的機會是“空狀態”或空白屏幕??諣顟B是用戶體驗產品時無法顯示的時刻。

          以下是一些常見的空狀態情況的示例:

          A. 一個新的Dropbox屏幕,其中未創建任何文件或文件夾。

          B. 在待辦事項列表管理器中完成所有任務后的結果屏幕。

          C. 不支持命令時,在Slack中顯示錯誤屏幕。

          D. 啟動一個新的社交帳戶,并且沒有任何連接。

          E. 在Gmail中搜索內容,但沒有結果。

          這些介于中間的時刻提供了改善用戶體驗并因此擴大商機的機會。對于UX設計人員而言,抓住一切機會來改善用戶體驗并為業務增加更多價值是一件好事。

          一個有用的空狀態將使用戶知道發生了什么,為什么發生以及如何處理。這是良好的空狀態UX設計的兩個示例:

          在首次啟動產品時,Dropbox Paper為用戶提供了良好的空狀態界面。號召性用語按鈕可幫助您繼續使用,而不必擔心下一步該怎么做。


          搜索查詢不返回任何結果時,空狀態界面設計的一個很好的例子。該界面提供有用的參考,并讓用戶知道發生了什么。

           

          以下是一些機會錯誤的空狀態設計示例:

          這是一個空狀態的界面,可以提供一些反饋,但是卻錯過了向用戶提供任何其他指導或要采取措施的機會。

           

          在這種空狀態的界面中,我們只是看到一個幾乎空白的網頁。圖像本身很棒,但是它不會引導用戶沿任何特定路徑點擊,也不會通知或指示用戶。

           

          空狀態的類型

          這是四種常見的空狀態:

          A. 首次使用–在沒有其他內容可以顯示時,例如新的Evernote或Dropbox帳戶,發生在新產品或服務上。

          B. 用戶已清除–在用戶完成諸如清除其收件箱或任務列表之類的操作且結果為空白屏幕時發生。

          C. 錯誤–發生錯誤時或由于網絡問題而導致手機脫機等問題時,會發生這些錯誤。

          D. 無結果/無數據–在無內容顯示時發生。如果有人執行搜索并且查詢為空或沒有可用數據顯示(例如,在篩選沒有數據的日期范圍時),就會發生這種情況。

          隨著空狀態設計受到越來越多的關注,UX設計人員發現,從業務和用戶體驗的角度來看,利用它們都有有益的結果。

           

          使用設計良好的空狀態的好處

          設計周到且有用的空白狀態屏幕可以幫助提高產品參與度,使用戶滿意并減少用戶流失。

          Scott McKain在他的《客戶真正想要什么》一書中提出了出色的客戶體驗的六個指導原則。

          a. 引人入勝的體驗

          b. 個人重點

          c. 相互忠誠

          d. 差異化

          e. 協調

          f. 革新

          當將這些原則應用于空狀態設計時,它們可能對企業非常有益-例如,提高產品滿意度和降低放棄率。

          以下三個方面也可以從良好的空狀態設計中受益:

          A. 用戶入門–除了增強的用戶體驗之外,還提供了建立信任和繼續使用產品的機會。

          B. 品牌建設–產生知名度并提升公司形象,以建立更多的品牌資產。

          C. 個性化–在各種使用狀態下都有趣或充滿活力;營造一種個人風格的感覺。

          設計良好的空狀態的好處不可低估。它們不僅為引人注目的客戶體驗做出了貢獻,而且隨著客戶滿意和參與的機會窗口越來越短,它們可以說是非常好的體驗。

           

          如何用目的填充空白屏幕

          以下是一些UX最佳實踐,可確保將空白屏幕設計為有用的信息。

          共情。UX設計師即使在產品的最黑暗角落也能創造出更好的體驗,這一切都增加了驚喜。對于空屏幕,同理心的消息傳遞增加了多樣性,并創建了一種更具吸引力的個性化體驗。

          Gusto是用個性化和一些有趣的個性填充空白狀態屏幕的一個很好的例子。

           

          意象。有一種設計原則稱為親生物效應。從自然角度看,這是一種減少壓力和提高注意力的狀態。添加一些風景圖像(例如,空狀態錯誤屏幕的背景)可以帶來更愉悅的用戶體驗。

          圍繞親生物效應設計的空狀態屏幕可通過減輕壓力和幫助參與而對用戶體驗產生積極影響。

           

          正確的指導。根據產品類型的不同,可以使用空狀態來指導用戶。一個很好的例子是項目管理應用程序。使用新帳戶后,尚無任何項目在進行中,這為幫助用戶快速入門提供了潛在的絕佳機會,從而減少了放棄的機會。這是一個例子:

          Evernote在引導用戶使用其空狀態頁面設計方面做得很好。

           

          入門內容。有很多屏幕空白的時間足夠使用戶感到沮喪和離開。對于某些產品,提供良好的入門內容有助于他們直觀地了解正在發生的事情以及下一步可以做什么。

          這是帶有啟動程序內容的空白狀態屏幕的示例:

          它為用戶提供了基礎,并減少了產品混淆和遺棄的機會。

           

          提供一個行動步驟。對于某些產品,我們不需要提供指導或在屏幕上填滿任何內容,因為這沒有任何意義。在這種情況下,設計人員可以簡單地提供一個動作步驟。

          但是,最好將動作減到最少。希克定律指出:“做出決定所需的時間隨著選擇的數量和復雜性而增加。” 因此,當號召性用語最多保持一兩個時,用戶可能會更快地采取行動。這是一個很好的例子:

          它告訴用戶采取措施,但仍將其保持在最低水平。

           

          另一個很好的例子是Instagram。當人們不熟悉該平臺時,他們還沒有關注任何人(也沒有人關注他們)。專注于Instagram的所有出色功能很容易,但是,一個良好的空白狀態屏幕可以為他們提供“添加要關注的人”的選項。

          當首次使用該平臺時,Instagram用戶會以一種快速便捷的方式來尋找人。

           

          結論

          在UX設計中很容易忽略空白狀態(或空白屏幕),因為它們很少發生并且并不總是很容易理解。但是,將它們包含進來的好處被低估了,因為它們可以增強用戶體驗并幫助創建更具凝聚力的產品。

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

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

          30個啟發性的3D圖形Web設計概念

          ui設計分享達人

          在平面插圖趨勢大放異彩之后,3D圖形又回到了主流,并在Web和移動用戶界面,插圖,動畫視頻和廣告圖形中表現出明亮而多樣化的性能。最近幾年,在不同的團隊和媒體資源對UI設計趨勢的所有眾多評論中都提到了3D藝術和動畫。因此,越來越多的設計師將它們集成到網站和登錄頁面中。

          以上為Web端設計中的3D的圖形運用,希望可以給大家啟發,共勉。

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

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

          聲音設計的魅力是你想象不到的

          ui設計分享達人

          聲音記憶是一種非常普遍存在的現象。聲音是基于人類本能的記憶方式,雖然并不代表它是最強的一種記憶形態,但它是最直接、原始的,因為它包含了結構化的圖像、符碼等特征,所以聲音發出時本身就隱藏著巨大的想象力,既有直觀又有想象,而且往往是被動接收的。尤其是當我們聽到一段熟悉的音樂或是文字、音效,自然而然地就會想到某些事情。我一直認為音樂是記憶的載體,當然聲音本身更是如此。


          Ototo是一個可以讓你使用任何導電物體來演奏音樂的電子套件。主控板上有對應一個八度內的所有黑白鍵的孔位,通過鱷魚夾把任何的導電物件(水、水果、植物、金屬餐具等等)與這些孔位相連,就能把這些導電物體變成按鍵。它的核心在于PCB合成器,實際上它是一塊袖珍電路板,12個黑點和數個白點組成“琴鍵”,再加上一個外置的揚聲器,只要與可導電的物體相連,摩擦就能發出聲音。即便你是不懂樂理知識的人,即便沒有專業的設備,也能拿起手邊的日常小物創作一段美妙音樂。它還可以外接四種傳感器的連接方式來改變聲音模式。

          Bareconductive的板子我之前在另外一篇文章中介紹過了《聊一聊音樂套件Bare Conductive Touch Board》,它比OTOTO的優勢在于它有兩種基礎連接方式,鱷魚夾和導電墨水。相對于鱷魚夾,導電墨水體積更小,更方便。

          下面再給大家介紹幾個音樂裝置項目:

          • + Looks Like Music +

          Looks Like Music是Yuri Suzuki在2013年為盧森堡的Mudam藝術博物館的暑期公共項目創作的互動式音樂裝置。Yuri Suzuki設計了一系列幾何造型的小型機器,它們可以沿著用馬克筆畫出的黑色線路前進,參與者可以在黑色線路邊上涂色,這些小型機器會在經過這些顏色時把它們“翻譯”成為聲音。通過試驗不同的涂色以及顏色之間的間距,參與者就可以創作出基本的曲調。

          下面這個裝置是個公共音樂裝置,6個高度連小朋友也能夠到的聲音裝置站立在博物館外的廣場上,它們能吞咽、扭曲聲音和回聲,組成一個音速游樂場。在任意一個喇叭面前,你都可以發出聲音,說一句話,唱一句詞,聲音會通過彎彎曲曲的管道流淌,至于這條聲音將從哪一端的喇叭里流出,就要靠你自己去探索了。

          • Synth Play

          推動不同充氣體的不同位置,隨機產生的音樂就會響起。幾個朋友共同配合,在推一推的解壓氛圍中便能創作出一支專屬于你們的曲子。這樣的創作方式將誕生出無數種組合,每一點微小的變化,都會帶來微妙的聽覺享受。有點呆萌的白色方塊用來設定節拍,兩個白色的充氣體是創作音樂的主力,黑色充氣體則用來控制和調節音效。

          • Face the Music

          在名為 ‘ 面對音樂 ‘(Face the Music)的互動性平臺上,你可以通過面部識別系統演奏電子音樂:抬抬眉毛敲敲鼓,張大嘴巴調音調,晃晃腦袋調整音長。還有歌劇、科幻小說、藍調和電子舞曲等四種風格供你自由選擇。

          聲音設計是很大的一個領域,現在還很少有學生專門做一個音樂裝置放在作品集中,同學們如果感興趣,想嘗試的話,可以構思構思,為自己的作品集多增加一些色彩。


          文章作者:程雅秋
          英國皇家藝術學院產品設計碩士
          擅長產品服務系統設計、用戶體驗設計和硬件Arduino交互

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

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


          聊天機器人的用戶體驗

          ui設計分享達人

          今天的聊天機器人遠非“智能”,它們引導用戶通過簡單的線性流程,我們的用戶研究表明,每當用戶偏離這些流程時,它們都會遇到困難。

          聊天機器人是智能助手的可憐“親戚”。


          定義:聊天機器人是一種特定于基于文本的對話界面,支持用戶完成有限的任務。


          在其他地方,我們討論了智能助手的6個特性:語音輸入、自然語言處理、語音輸出、智能解釋、代理和前面所有特性的集成。聊天機器人只需要具備這兩種屬性:自然語言處理和智能解釋。換句話說,聊天機器人應該能夠以自然語言接收查詢,并正確地理解和解釋它們(然后執行它們)。


          在當今世界,至少有三個不同的因素推動著聊天機器人的發展和普及。首先,人們希望通過用機器人取代人工代理人來降低客戶服務成本。其次,像微信這樣的基于對話的系統的成功,提出了聊天機器人作為企業和服務的交互渠道的想法,旨在補充現有的渠道,如移動網絡和移動應用程序。最后,Alexa和Google Home等語音智能助手的流行,促使許多企業在較小規模上效仿它們。


          這些因素映射到今天可用的兩種不同類型的聊天機器人:

          在企業與客戶之間的聊天交互中,客服機器人會接管部分人工負載。這類機器人的例子包括UPS的Ask UPS和阿拉斯加航空的Ask Jenn。


          交互機器人的目的是提供與業務交互的額外通道,而不是用于客戶服務。例如,Domino的批薩機器人允許用戶訂購批薩;來自Progressive公司的Flo可以提供一份汽車保險報價。這種交互機器人可以在各種平臺上使用,其中最著名的是Facebook Messenger。(其他平臺包括Twitter和Slack。)然而,它們也可以存在于應用程序(美國銀行的Erica)中,或者通過短信(Capital One的Eno)提供服務。

          UPS.com網站使用聊天機器人來回答客服問題。

          Kiehl ‘s Messenger聊天機器人:用戶可以通過在“發送消息”文本框中輸入文本或選擇屏幕上顯示的選項之一(發送位置或郵政編碼;文本輸入框下面的主菜單選項)。


          雖然客服機器人通常是純文本的,但交互機器人將文本與可視化UI元素結合起來作為交互方法。


          研究


          為了了解聊天機器人的可用性,我們招募了8名美國參與者,讓他們在移動設備(5名參與者)和桌面設備(3名參與者)上執行一組與聊天相關的任務。其中一些任務涉及為客戶服務而與人或機器人聊天,另一些任務則針對Facebook Messenger或基于短信的聊天機器人。


          對機器人的態度


          一般來說,人們對機器人的態度從中立到略微積極。互動機器人是一個相當模糊的渠道:在我們的美國研究中,大多數參與者之前從未與此類機器人互動,他們也不知道它的存在。相比之下,微信公眾號頁面通常是這些機器人的復雜版本,我們的中國參與者對它們很熟悉。我們的一些參與者驚喜地發現了這個互動渠道,其他人則認為與其他傳統渠道如網絡或移動應用相比,它并沒有帶來足夠的價值。


          人們普遍認為客服機器人不如人類代表有幫助,但我們的參與者也認為它們有一些優勢。最重要的優勢是速度:與人類聊天通常需要很長的等待時間(要么在隊列中,要么在對話開始之前,要么在人類為客戶的問題尋找解決方案時),而機器人可以是即時的。另一方面,人們覺得與真人接觸表明公司關心客戶:“真人真的很好。他們賣給你一件昂貴的物品,所以他們必須在代理人身上花更多的錢。”另一個人說:“如果你有一個人(負責客戶服務),那意味著你足夠關心;如果你有一個機器人,那么·你應該有一個真正好的機器人?!?


          交互機器人通常很容易被識別為機器人,但客戶服務機器人很難識別。有些企業并不總是提前向客戶透露他們正在與機器人進行交互。我們認為這是一個錯誤。我們的研究參與者很高興看到企業使用機器人是透明的,因為他們可以調整自己的期望和語言。例如,當用戶意識到他們是在和機器人說話時,他們往往會更直接,使用基于關鍵字的語言,并避免禮貌標記。這種類型的語言通常比通常在正常對話中使用的復雜、間接的語言更成功。


          用于交互聊天機器人UI


          交互樣式
          文本和鏈接/按鈕都可以用于向交互聊天機器人輸入信息。它們的目的略有不同:

          • 預先確定的鏈接和按鈕避免了用戶輸入。這些通常顯示在一個輪播列表中,可以包括圖像。人們喜歡有這些選項,甚至希望它們成為常用輸入。

          • 文本允許用戶在選擇他們想問的問題類型方面有一定的靈活性,并允許他們偏離聊天機器人(通常過于嚴格)的腳本。


          這兩種輸入機制都很重要,應該同時存在。


          當機器人不允許用戶選擇選項,而是要求用戶輸入時,用戶會抱怨。例如,一個參與者被Booking.com的機器人惹惱了,因為它不允許他選擇日期,他必須輸入日期。在輸入“感恩節”之后,他說:“應該有一些明顯的東西來預先填充它。選項應該預先填充——手動輸入很乏味。我應該可以點擊按鈕才對?!?

          人們更喜歡選擇一個選項(左邊是Domino的聊天機器人),而不是輸入冗長的文本(右邊是Booking.com)。考慮為最常見的輸入創建按鈕。


          一些機器人完全取消了輸入文本的選項,迫使用戶選擇屏幕上顯示的選項之一。這種類型的設計使機器人類似于一個網站,并限制了用戶可以在系統內探索的路徑。

          Car Dealer聊天機器人不允許用戶在選擇庫存選項后輸入自由文本。


          當鏈接和按鈕被清晰地標記時,它們的效果最好,人們希望能夠點擊交互機器人顯示的幾乎所有非文本元素。例如,當eero Messenger機器人展示一組圖片來說明eero的行為時,我們的大多數研究參與者都會點擊這些圖片,希望獲得更多信息。

          Eero for Messenger(左):為了告訴我更多信息,該機器人顯示了一個輪播,上面有幾張圖片和一組可能的延續(文本在圓形框中)。用戶希望能夠點擊輪播項,但這些并不是鏈接。Kielh’s for Messenger (右):輪播上的大圖片是不可點擊的,但是下面的鏈接是可點擊的。


          除了常規的按鈕和鏈接,一些交互聊天機器人還有一個菜單元素,當被選中時,它會顯示一組可能的任務。菜單有時顯示在輸入文本框下面,有時顯示為旁邊的一個小漢堡包圖標。

          金州勇士隊在輸入框下面有一個主菜單鏈接。選擇此鏈接將顯示一組可用的任務。當用戶開始在輸入框中輸入時,菜單圖標就顯示在它旁邊。主菜單鏈接和漢堡包圖標做了同樣的事情。


          其他鏈接有時顯示在消息框下面。這些鏈接是相當容易發現的:我們的幾個用戶與它們交互;然而,靠近輸入框的圖標不太可能被使用。

          CNN bot:信息區下面的鏈接顯示了聊天機器人的一些主要任務(頭條新聞、主題、設置)。


          線性流


          交互聊天機器人似乎最像Alexa的技能:它們被設計用來指導用戶完成少量任務。機器人支持的任務最好被概念化為具有有限數量分支的線性流,這些分支依賴于可接受的用戶答案。機器人提出一個問題,其答案將推動機器人前進到流的右邊分支。

          一個線性流程的例子,機器人可能通過它來完成一個任務


          當用戶遵循流程并提供符合系統期望的“合法”答案,而沒有跳躍步驟或使用未知的單詞時,用戶會感到成功和順利。例如,一些參與者能夠成功地與Domino ‘s Pizza、Wingstop、Progressive等公司的聊天機器人進行交互。然而,一旦用戶偏離了規定的腳本,問題就出現了。


          例如,當Domino ‘s Pizza機器人詢問她的位置是公寓還是房子時,一名參與者輸入townhome,機器人回答“我很抱歉。我好像聽不懂?!绷硪晃粚ふ野蛯毨蜓鼛У挠脩粼谙⒖蛑休斎肓恕把鼛А?,但是收到了訂單取消的信息。當她把它轉換成“女式腰帶”時,她被告知要從一個鏈接列表中選擇,沒有一個鏈接與她要找的匹配。

          巴寶莉的聊天機器人很難理解用戶想要完成的任務,并在機器人的指令表中列出了若干任務。


          機器人也很難從問題或意外輸入中恢復,有時會迫使用戶從樹的頂部重新開始,并做更多不必要的工作來獲得答案。例如,我們的一個用戶想知道起亞是否有四輪驅動的電動車型。為了找到匹配的任務,她不得不遍歷整個決策樹,回答諸如汽車需要容納的人數和MPG等問題。當她對車輛類型偏好回答“不”而不是選擇一個顯示選項時,機器人就會停止并強迫她重新開始。


          然而,有些機器人更加靈活,能夠理解偏離腳本的請求。例如,一個參與者知道Domino ‘s Pizza正在進行促銷活動,他可以讓機器人將其加到自己的購物車中。在訂餐流程的晚期,他還能夠改變其中一個比薩餅的外殼。

          Domino ‘s Pizza聊天機器人能夠對不屬于預訂披薩的主要線性流的請求做出滿意的響應。左圖:用戶可以在訂購前將訂單加到他的購物車中。右圖:用戶更改了正在訂購的兩個比薩餅中的一個的外殼。


          一些機器人很難做出假設并建立查詢的上下文。例如,我們的一名參與者試圖與Capital one的基于文本消息的機器人Eno進行交互。他碰巧有兩張來自Capital One的信用卡,每次他問一個問題,機器人就會強迫他澄清查詢涉及的是哪個賬戶,而不會將上下文從一個交互傳遞到下一個交互。


          當啟動新任務時,機器人通常也不能利用之前輸入的信息。例如,我們的一名參與者首先決定叫披薩外賣;她輸入了自己的地址,但她被告知Domino ‘s不送貨上門。她又開始一遍,這次的目標是去商店取貨而不是送貨。機器人第二次問她的地址,顯然完全忘記了她已經輸入了地址。

          Capital One的機器人Eno要求用戶在回答完每個問題后澄清他詢問的是哪個賬戶。左:Eno只識別用戶查詢中的關鍵字“transaction”(盡管拼錯了),無法回答用戶的特定問題;相反,它給出了其指令庫中一個匹配任務的答案。右:Eno重復了之前問的問題。


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

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



          五步法幫你深度分析一個APP產品

          ui設計分享達人

          不知道你是經常會遇到這樣的情況:

          拿到一個APP產品不知道如何去分析他的好壞,又或者總是分析的很片面,要么僅僅是交互,要么僅僅是視覺

          那么有什么好方法能夠幫助我們更全面更系統的分析一個APP產品的好壞呢?


          首先

          我們需要明白的一點是,我們在分析產品時,應該從山頂逐漸往下看,才能夠看到山的全貌,站在山腳下只能看到自己視野幾百米的范圍。

          接下來

          我們去分析一個APP產品的時候,就可以通過一個萬能的公式更全面更系統的去層層剖析:

          1、戰略存在層(它為什么存在)

          產品的核心驅動力是什么?

          這個產品帶給用戶的價值是什么?

          這個產品帶給企業的價值是什么?


          2、能力范圍層(我們自身能力)

          能做什么,不能做什么?

          現在的能力儲備是否能夠支持?

          做到這個需要什么樣的能力儲備?


          3、資源結構層(內外部資源有哪些)

          產品的利益相關者有哪些?

          內外部有哪些資源?

          競爭對手是哪些,相對于他們優勢和劣勢在哪里?


          4、角色框架層(產品各個角色)

          體:產品構建的矩陣如何,這個產品處于什么位置?

          面:各個板塊的使用場景、目的是什么?

          線: 頁面的布局如何?

          點: 這個功能的目的是什么?用戶如何交互?使用流程是否合理?...


          5、感知層(如何感知產品的不同)

          感知層很多時候設計師都會糾結在細節里面,總會分析色彩、圖標、間距等。而感知層最重要的是要分析這個產品的調性如何?和其他同類的差異在哪里?界面設計是否能夠吸引用戶?


          最后

          我們通過這個五個步驟去分析下今日頭條APP

          1、戰略存在層

          核心驅動力:算法推薦+優質內容

          用戶價值:今日頭條帶給用戶的價值是通過了解用戶的喜好,精準推薦給用戶最感興趣的內容,提升用戶的閱讀效率

          產品價值:以今日頭條作為基礎的流量池為其他產品相互導流

           

          2、能力范圍層

          2019以前今日頭條的slogan是“你關心的,才是頭條”定義今日頭條的核心是推薦算法

          而2019年之后今日頭條的slogan是“信息創造價值”定義今日頭條的核心是打造優質的內容,讓信息創造價值

          今日頭條從技術到內容的轉變,靠的是今日頭條的長久以來的能力儲備,所以我們會看到今日頭條推出的一系列對內容創作者的扶持計劃。

          3、資源結構層

          今日頭條的利益相關者:消費信息的用戶、產生內容的創作者、廣告商

          競爭對手: 騰訊新聞(騰訊)、網易新聞(網易)、搜狐新聞(搜狐)、微博...

          優勢:今日頭條通過推薦算法構建了早期產品的核心競爭力,吸引了大批大V和信息消費者,具有先發優勢,之后又通過內容產品矩陣構建自己的護城河

          劣勢: 競爭壓力大,都在競相進入內容領域

           

          4、角色框架層

          體: 今日頭條經過幾年的發展,逐漸構建起一個內容聚合平臺(圖文、短視頻、長視頻...),作為基礎的流量池,為其他的產品相互導流

          面: 

          首頁模塊你可能感興趣的,和你感興趣的內容

          西瓜視頻,你可能感興趣的短視頻

          放映廳,你可能感興趣的長視頻

          所以,我們從導航欄就能夠可以看到今日頭條產品所構建起來的面:

          核心是千人千面定制化推薦,核心之外是圖文、短視頻、長視頻

          接下去,就是線和面的分析,這就到了布局和功能層級了,這是交互方面的內容,我就不再一一細說了

          線: 頁面的布局如何?

          點: 加這個功能的目的是什么?用戶如何交互?使用流程是否合理?


          5、感知層

          人去感知一個物體通常常是通過5種感覺:視覺、聽覺、味覺、嗅覺、觸覺?;ヂ摼W的產品不像線下體驗店5感都能夠體現,而我們感知互聯網產品主要通過視覺和聽覺這2種感覺。

          • 我們聽到的是今日頭條的報道、今日頭條的視頻廣告

          • 看到的是是今日頭條的產品、廣告圖。而的核心是今日頭條的"信息創造價值",圍繞這個最基本的核心,給用戶的感知才是一致的,才是和其他產品塑造差異化的核心要點。



           

          基于這些我們再去分析里面的細節就游刃有余了

          比如,同為新聞自媒體平臺,今日頭條把內容創作者放置在列表頁明顯的位置,而網易新聞、騰訊新聞在內容列表創作者的名字卻被弱化了,原因就在于今日頭條定位的是自媒體新聞平臺,重點在于內容創作者,而網易新聞、騰訊新聞定位的是新聞媒體平臺,重點在于內容。

          文章來源:站酷  作者:饅頭UX

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

          有效的競品分析方法

          ui設計分享達人

          互聯網因為技術的快速發展,用戶的普遍性決定了互聯網所必備的特點就是:創新、用戶體驗、快速迭代。而競品分析應該貫徹應用的不同階段。

           

          我們在做競品分析時,首先確定競品分析的顆粒度,競品分析可以做得更細,但是必須根據分析的動機、需求出發,清晰自己的目標,來判定做怎樣詳細的一個競品分析文檔(根據項目大小、時間限制等,選擇適當的競品分析程度)



          01 競品分析四大流程

          1.確定競品分析的目的:明確分析目的,和控制分析產出一樣重要,分析是為了有價值的情報收集,而不是無意義的跟蹤復盤。

          2.篩選出目標產品:從行業出發去選擇對標的競爭對手和潛在的競爭對象。

          3.收集競品資料:從分析的緯度來確定,不同職能區分,側重點會不同(但各緯度是有機聯系的,不可以孤立對待)。

          戰略定位、盈利模式、用戶群體、產品功能、產品界面(交互方式、視覺表現)


          4.分析、輸出競品分析報告:可采用【總-分-總】的結構


          [ 總 ]

          首先說明分析目的,然后拿出各模塊的結論,這是第一個;

          分 ]

          圍繞這些結論,展開你的分析過程,所有的過程分模塊展示、最好要有數據支撐;如果沒有,就要有邏輯表達,這是中間的部分;

          總 ]

          最后得出你在這次分析之后的感受,認為產品應該遵循什么、借鑒什么、避免什么,這是最后一個。

          注:分析要追求的是客觀性,不要為了分析而分析,不要為了結論而拼湊論據,分析結論的可用性并不應影響分析的初衷。



          02 具體分析從哪些點入手

          1.市場分析:市場規模、市場趨勢、月活躍人數等

          2.用戶分析:用戶地域分析、用戶使用時段分析、用戶年齡段、用戶性別比例等

          3.目標用戶需求:A、B、C

          4.產品信息:產品基本信息(最新情況、產品口號、產品定位、特點、市場規模)

          5.產品迭代信息:版本更新頻率、優化程度

          6.核心競爭力分析

          7.功能結構及其分析

          8.基本功能對比

          9.功能差異化分析

          10.界面分析:主要界面、操作流程

          11.盈利模式分析

          12.其他方面:根據產品特性和類別區別對待



          03 競品分析的相關方法

          1.用戶體驗五要素法:從抽象概念 —— 具體表象


          戰略層:

          這個層面分析, 大多數情況下得出不了什么實質性的結果(也會有厲害的PM能分析出戰略上的建議點,不過這都是屬于專門去分析戰略層的競品分析)一般戰略層面公司的領導或者創始人起初就會想的很明確。如果這個層面都沒思考清楚,項目做的意義也不存在了。

          產品目標、用戶需求


          范圍層: 

          一般是對明確的幾個競品進行功能清單收集,分析一些差異化的功能,然后分析功能背后的原因。別人這么做,有什么意義?能帶來什么樣的結果?能衍生出什么?

          定義需求(內容清單、功能規格說明)、需求優先級排序


          結構層:

          針對競品在這個層面需要下功夫,需要去分析梳理競品的產品流程。比如:注冊流程、支付流程等等。去分析現在競品大多采用什么樣的結構設計,比如:什么Tab結構、抽屜式結構等等。

          交互設計、信息架構


          框架層:

          這個層面需要去收集的是競品的信息是怎么設計的?收集一些競品的相關細節設計。

          界面設計(頁面布局和界面各類控件)、導航設計(全部、局部、輔助導航等)


          表現層:

          一般不用做過多的分析,可留給設計師發揮,留給設計師專門做這個表現層的競品分析。

          感官設計(實現了以上四個維度需要滿足用戶的感官感受)


          2.YES/NO法

          主要適用于功能層面,簡單來說就是將功能點全盤羅列出,具有該功能點的產品A便標記為“Yes”,沒有該功能點的B產品標記為“No”,通過比對可以清晰地了解功能點上產品間的異同。



          3.評分法

          這個方法在用戶研究工作中常會用到,通常適用于定量研究的問卷調研中,即給出1~5分的區間,根據產品中的某一方面或某點進行打分。


          4.分析描述法

          指將不同產品特性以比較的形式描述出來。



          5.SWOT法

          針對所要分析的競品,從“優勢、劣勢、機會、威脅”四個維度進行比較和梳理。



          并且可以進行兩兩組合分析:

          1)SO戰略就是依靠內部優勢去抓住外部機會戰略;

          2)WO戰略是利用外部機會來克服內部劣勢的戰略;

          3)ST戰略就是利用企業優勢去避免或減輕外部威脅的戰略;

          4)WT戰略就是直接減少內部劣勢和避免外部威脅的戰略。



          6.Base+Solution分析法

          Base:目標用戶是什么?目標用戶的核心需求是什么?通過什么解決方案能夠滿足?同其他產品相比,解決方案有什么差異化和賣點?如何推廣營銷?市場效果如何?

          Solution:解決方案如何實現?還有多少空間?陌生用戶進來如何使用?信息組織、交互如何?為什么要這么做?是否符合用戶預期?配色、UI是否符合用戶審美?用戶會在哪里困惑?用戶打開產品的頻率如何?用戶是否會向他人推薦產品?


          7.Kano模型(卡諾模型)

          是對用戶需求分類和優先排序的有用工具,以分析用戶需求對用戶滿意的影響為基礎,體現了產品性能和用戶滿意之間的非線性關系。

          在卡諾模型中,將產品和服務的質量特性分為四種類型:

          1)必備屬性;2)期望屬性;3)魅力屬性;4)無差異屬性。5)反向屬性不是用戶需求,提供反而影響產品體驗。


          具體請查看專題文章:產品分析方法之:KANO模型


          注:在描述分析的過程,盡量的可視化你的分析過程,這樣別人在看的時候清晰易懂!



          04 競品分析的輔助內容

          1.數據的引用

          分析報告中針對用戶體驗方面的要素很容易夾雜過多的主觀因素,譬如我們容易下這種結論:這種設計不合理!”這類主觀的評斷。在一份競品分析報告中,如果為了說明某一條,那量化的數據必然是重要參考依據之一。所以,數據變得比較富有說服力。

          數據從何而來?月活排名可以來自Appannie、Usage Intelligence,網站排名來自Alexa。其他數據包括百度指數、淘寶指數、易觀智庫、CNNIC、艾瑞咨詢、新浪微博、微信、上市公司財報等都是比較主流的平臺和渠道可以作為數據來源。


          2.對比時有截圖作參照

          這方便讀者了解,也在一定程度上有利于保證整份報告保證清晰可讀、重點凸顯、結論突出。


          3.必要時可加任務或案例

          任務和案例起到的作用一是佐證,二是便于讀者清晰地能夠在相應的場景下理解。比如當比較A產品的某項功能或業務邏輯上的問題時,如果引入一個貼切的典型案例或一個模擬的任務會讓讀者更加有代入感,更便于說明。

          另外,在這里也可以適當的引入真實的用戶評論。



          05 得出結論/建議

          1.首先我們也是按照從大到小去寫,從框架—功能—流程這個維度去書寫總結!

           2.對于結構:我們應該采用……

          3.對于功能:我們應該把功能A、功能B加入到版本V1.0內,把功能C滯后、不做功能D…….

          4.對于流程:我們可以借鑒競品A的某某流程、競品B的某某流程……

          5.對于色彩:我們可以以某某顏色為主、某某顏色為輔……

          文章來源:站酷  作者:體驗為王UX

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



          做好國際化體驗設計,你應該知道的事

          ui設計分享達人





          章節一:為什么要堅持國際化設計?



          堅持走國際化設計的背景

          出海早已成為中國互聯網公司的不二選擇。相比在國內廝殺,國外有更多的人口/政策/資源紅利。并且因為互聯網的可復制模式,使得成熟的經驗可以快速運用到國外,從而搶占先機。而做好國際化的本質就是【做好每個地區的本地化設計】,想用一套國際化的標準去用在全世界的各個地區取得成功是非常困難的

          那有什么好的方法和理論能夠讓設計提前著落,為業務帶來一線用戶信息和設計價值呢?接下來我將給大家介紹一些實際的方法和案例幫助大家做國際化的設計,讓自己的設計價值有理可依


          *以下內容與公司無關,更多的是基于筆者國際化工作經驗的復盤,如有錯誤,歡迎指正(Salute~)



          寫在前面

          首先我們要知道,一套通用的設計標準很難在多個國家吃的開,從而拿到用戶信任

          我們先來看個案例,這個是日本UBER司機端和日本滴滴司機端對比

          最明顯的區別在于,滴滴國際化在日本業務和Global業務這塊,司機端采用的是移動端(global)+平板端(日本),而UBER則是一套方案解決全球問題,可能有些人會問,一套設計不是成本更低,效率更高么,為什么非要制作兩套。這就要從決策成本的角度去考慮問題,而日本市場相對于滴滴其他地區市場有著完全不同的因素,涉及到了資本,使用場景,市場地位,用戶畫像等多方因素決定,這時的【成本與效率】已經無法排在做與不做的第一位了,接下來我們通過兩張照片來看下日本司機的接駕場景

          通過照片我們是否發現日本司機的畫像其實和全世界其他的出租車司機都不太一樣?是不是明顯發現他們的年紀相對的更大一些?會穿制服佩戴白手套? 那年紀更大是不是意味著司機的視力會相對于中年人有所下降,白手套是否會影響他操作屏幕交互,那針對這么不同用戶群體是否需要單獨設計呢?最終的目標是占領市場的話是否要根據本地情況去服務好當地司機呢?


          那我再來舉兩個例子來看看,我們來看看針對日本本地化做的特殊設計細節在哪些方面?



          案例一:針對司機群體老齡化設計———大屏幕設計:

          日本屬于老齡化國家,司機平均年齡更是在50歲以上,高齡人群的視力相比于青年處于退化階段,因此對于高齡人群來說在駕駛的過程中去讀和操作小屏幕來說是一件非常痛苦的事情,UBER采用的是一套國際化的設計語言并沒有針對日本的市場進行單獨的設計,DiDi在日本則是針對司機群體采用了單獨平板端設計,更大的屏幕降低了司機誤操作可能性的同時,也能將字體放大,盡可能讓司機方便識別



          案例二:針對日本司機人文的設計———語音接單

          “日本服務業發達,體現在服務的細節。出租車司機出于對客戶的尊重,都會戴上白手套。但是在帶著手套的時候,司機很難去點擊屏幕進行操作,而且在行車過程中,觸碰屏幕本來就是不合規的行為。無論是從法律層面還是價值觀層面我們都不鼓勵司機做出這種行為,于是開發了語音接單的功能??紤]到司機群體的年紀特征,我們選用了在日本相對普及又好識別的“了解しました(りょかいしました)”進行快速語音接單,在新版本上線后,司機可以通過屏中屏的方式去學習語音接單功能,只有他完全掌握這個功能才會為他完全展現,如果司機因為自身原因無法很好地說出那句話,我們依舊會為他保留按鈕輸入的方式”------國際化業務中的本地化設計


          (圖片來自于SUXA文章《國際化業務中的本地化設計》-呂誠)




          國際化設計的思維框架

          通過兩個日本的案例我們能明確一個點【國際化實質就是做好每個地區的本地化設計】

          怎么樣讓國際化的設計有法可依,我們先來看懂一個關系框架。做好一個產品實質是服務好每一個場景,那一個場景由哪幾個方面組成,簡單來說是由【業務】+【用戶】組成,這并不難理解,我們作為產品設計師,首先是背靠業務,解決公司的商業訴求,給業務帶來利益的同時給用戶帶來更多的使用價值然后獲得用戶的認可。在這個過程中,我們會將商業訴求和用戶價值進行一個有效的結合,從而滿足雙方,但是還不夠,因為一個場景還依賴客觀的條件,比如時間和空間維度,最終也會影響整體的質量,我們將所有的因素通過包含關系展示出來

          接下來我們往細的方向進行拆解,【業務】根據公司行業,階段的不同以及基礎能力的不同,呈現的點也不盡相同。最核心的點在于當前所屬階段,是1.0階段力求生存下來,還是說2.0和競品之間產生差異化,還是活3.0去打敗競品階段。在不同階段設計師要了解的事情也不同,對于1.0階段來說,更精準的展示出用戶畫像和了解當地的文化與習慣是重中之重。但是到了2.0則應該更加關注產品目標與競品的差異化競爭,通過差異化(殺手級)的功能形態獲取更多的搖擺用戶

          不同的賽道,業務不同,打法也不同。我今天主要想講的就是左右場景的另外一個因子【用戶】。那如何定義一個用戶呢?我們先來列舉些具象的特征:

          【外貌/文化風俗/地域特征/語言等】是一個用戶的畫像的基礎組成,但是光有畫像基礎并不精確,因為每個國家的【法律/政策]同樣會影響用戶的行為。而在當今的互聯網模式下,用戶體驗的提高必須得考慮各地區【硬件的水平以及當地的網絡狀況】,最后就是如何與【本地化的設計團隊進行友好的合作】讓體驗和設計策略能夠更加精準的傳達到真實用戶手里,獲得用戶認可,特別是在20年后,疫情的爆發導致設計師無法到前線進行真實有效的實地探測,那么加強合作以及對齊目標,為業務拿結果將是重中之重,接下來,我將對于每個影響【用戶】的因子進行舉例講解








          章節二:如何快速了解你服務的用戶



          做任何的設計都離不開用戶畫像,而做國際化設計一定也繞不開-霍夫斯泰德文化維度理論

          可能你知道,在給拉美客戶做單的時候他們會要求你的界面顏色亮麗,看起來更加奔放,而在給亞洲客戶做單的時候則會相反,整體看起來更加約束。但是你能清楚的知道背后的原因么?如果不清楚那你的這塊分辨更多是依賴于經驗和他人的總結。那有沒有一套理論能夠很好的去輔助你去分析你的客戶用戶畫像,去支撐你的設計。答案是有的,他就是【霍夫斯泰德文化維度理論】


          霍夫斯泰德文化維度理論(Hofstede's cultural dimensions theory)是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個框架。他認為文化是在一個環境下人們共同擁有的心理程序,能將一群人與其他人區分開來。通過研究,他將不同文化間的差異歸納為5個基本的文化價值觀維度


          百科連接:霍夫斯泰德理論詳情 (<-點擊快速查看)

          完全不懂的可以看看上面的鏈接,我們這里跳過部分解釋….通過文化將維度理論我們將文化價值觀劃分成6個維度

          了解完霍夫斯泰德理論以后我們該如何去使用呢?我們先從拉美用戶和日本用戶的差異對比開始

          通過霍夫斯泰德官網查詢我們可得知差距最大的兩個分別是【男性化與女性化(Masculinity versus Femininity)】與【長期取向與短期取向(Long-term versus Short-term)】,差值比例達到了46和44.

          接下來我們來對【差值較大】以及【分值較高】的因素進行解釋和舉例,去理解背后的原因



          男性化與女性化(Masculinity versus Femininity)

          日本是個生性好斗競爭意識強烈的民族。在日本企業中工作狂是他們男性氣質的一種表現;而日本男主外女主內,62%的女性在第一個孩子之后選擇辭職,也是男性氣質的另一表現.

          在日本想要成為一個出租車司機,就要在5年之內不能有任何違規,某些地方還會有特殊的考試,這里面的合格率并不高。并且在通過考試之后再在通過一系列的評分后,才能被評為A級或者AA級別的出租車,雖然這僅僅只是一張小貼紙,但是他也代表著一個出租車司機的榮譽。在這一方面,也體現日本社會的男性氣質的確定性。

          相比較日本,巴西人更會以家庭為中心、以教育為重心、博愛、具有個人風格意識。家庭是關鍵。家庭是巴西人生活的中心,也是其社會的核心價值觀。對于一個家庭而言,家人共同用餐的時間是非常重要的,還有星期天的燒烤活動,能讓更多的遠房親戚和朋友聚會。所以在巴西你很難看到休息日去工作的同事,甚至無法聯系上他們:)



          長期取向與短期取向(Long-term versus Short-term)

          日本人將生命視為一個非常短暫的時刻,所以調查發現日本人普遍相信宿命論,他們鼓勵節儉和現代教育的努力,作為為未來做準備的一種方式。

          巴西相較于日本經濟落后,人民的收入水平普遍不高,很多司機收入僅僅能夠維持一家的支出,很難有結余,在巴西工資會按照周維度支付,以保證一家人的生活開支能夠承擔。

          針對巴西的情況我們做了適合當地政策和環境的本地化服務。錢包1.0的時候我們先是和當地的銀行合作推出了巴西99卡,允許司機隨時提現且提現速度遠遠大于了當地的其他銀行(48小時),那這種優勢在收入較低的司機群體當中就會發揮很大的優勢。在3.0的改版中,我們將錢包打造長了本地生活平臺,我們允許司機通過平臺去完成轉賬/水電費/電話費/還款等行為,原本需要走到線下便利店的服務被我們搬到了線上,更是大大的方便了使用99卡的群體。未來呢,我們將加大加多權益,達到使用場景獨占的目的。通過這些服務為我們給用戶帶來了使用價值,同時我們也給業務帶來了價值,更多的綁卡滲透率為我們后續的推廣和矩陣式的打法提供了導流的入口

          (99與當地銀行合作的線上本地生活功能-99Pay)



          不確定性的規避(Uncertainty Avoidance)

          日本地處自然災害頻發地帶,沒有豐富的自然資源,生存條件不太好,所以日本人有很強的危機意識,學會了為任何不確定的情況做好預防措施,對待事情也希望有明確性

          而巴西雖然處于平原,沒有自然災害,但是因為社會安全因素,整個社會對于社恐事件還是有較強烈的危機意識,所以司機會更加關注接送流程中是否會前往不安全地區,以及乘客的質量

          (日本司機的真實駕駛場景)


          費用收取的正確與否也是服務體驗優秀的表現,日本司機會用計步器進行計價,如果涉及到了其他的費用則會使用單獨的計算器進行精確計算,這么做的原因是為了避免計算錯誤給乘客帶來困擾和爭執,那從這個環節來看,司機為了規避【計算錯誤的可能】而預備了計算器,減少了差體驗的可能


          在巴西,滴滴如果對司機派單如果過遠會或者是危險地區會進行提示,允許司機取消派單。并且根據調研司機群體特別是夜班司機會有隨身攜帶防護性的武器用來自我保護,那么也能很好的說明整個社會對于社恐事件還是有較強烈的危機意識。那么做為設計師,是不是意味著可以把危險地區的派單做的更加醒目,讓司機能夠更快識別,更快決策,而不是為了平臺和用戶利益進行隱藏。是不是可以把安全鏈路透傳做的更強,讓司乘都能更加快捷第一時間選擇自助服務









          章節三:繞不開的硬邊界



          法律法規的約束

          每個國家的發展階段不同,對于隱私重視程度不同,因此針對不同地區的海外市場,作為業務的合作伙伴設計師們需要針對不同的市場配套不同的安全合規方案,這一點格外需要注意,不然會被罰的很慘,通常獲取地理位置/賬號信息保留是每個公司都非要需要的,因此在空投其他國家之前需要了解是否立法關于隱私相關的法律,如果有則需要通過配置化將其他國家上線的隱私條款和設置方式復制過來使用

          LGPD和GPDR風控合規

          簡單來說就是要做到信息安全,保護個體隱私。大家都知道在中國我們的信息被侵犯的體無完膚。其實在國外也是一樣,各種權限,各種信息默認保留和上傳。但是隨著各國的重視,個人隱私也逐漸走向明確的法律保護層面。在拉美有LGPD,在歐洲有GPDR


          GDPR 是(The European General Data Protection Regulation )的縮寫,即通用數據保護條例。是歐盟議會和歐盟理事會在?2016?年?4?月通過,在?2018?年?5?月開始強制實施的規定。

          GDPR 意義在于推動強制執行隱私條例,規定了企業在對用戶的數據收集、存儲、保護和使用時新的標準;另一方面,對于自身的數據,也給予了用戶更大處理權。也就是說在18年生效之后,如果再有歐洲任何公司App不對用戶的數據進行合規處理,擅自收集信息就將會受到嚴懲



          智能硬件的普及度以及新舊

          硬件的普及率以及新舊差異也同樣影響著本地化設計,通過調研和外界公布的數據我們得知,在拉美高端手機的占比遠遠低于發達國家。因此在給發達地區做設計的時候可以考慮更多體驗上的拓展,但是在給發展中國家做設計的時候則需要進行小屏幕最小尺寸的適配,這樣做是為了最好的進行向下兼容,從而保證所有用戶都能夠使用。同樣,如果你在給發展中國家做設計,那么復雜的動效和高清晰解析的大圖最好是不要去做的

          (網上后臺數據展示截圖)



          當地的網絡環境和下載速度及物流環境

          拉美國家,基建水平滯后,網絡下載的速率波動較大,且存在不穩定的情況,以及流量費用的價格差異。因此某些設計手法在較發達國家能帶來體驗但是在發展中國家可能會是災難


          舉個例子,司機端的歷史列表如果存在400條記錄,如果司機有訴求想刷新查看更多的訂單,是一次性下拉刷新展示全部好呢?還是一次性展示50條好呢?還是一次性展示20條呢?


          答案是一次性展示20條是最穩妥的選擇,因為網絡的不穩定性,一次性加載太多數據會導致過長時間,而網絡不穩定極有可能導致下載失敗,并且一次性下載太多數據可能并不符合司機查詢的最初訴求,反而浪費司機的寶貴流量,最終會引擎流量消耗過快引發進線,這里的決策是損失一些用戶的體驗去保障司機的收入,但是在拉美因為手機的性能/網速的穩定且快速/套餐足夠便宜,因此我們可以嘗試使用一次性加載全部的數據,這樣能讓體驗感受更好

          (99信用卡的申請權益展示/激活流程頁面)


          再舉個例子,拉美物流相對沒那么發達,且因為政治/經濟局勢的不穩定性,導致物流包裹存在無法送達的情況,如果收件人不知曉當前的狀態而超出了等待的預期,那么他就會進線詢問。那在這個場景我們有什么更好的辦法?是否可以透傳更多的包裹進度方便收件人查看,再者再將用戶導流到客服自助而非進線?這樣的好處一來體驗的鏈路完善了,讓司機可以找到自助的出口,二是方便我們可以更好的了解哪些地區收到郵寄的折損率最大?從而探索新的業務,發現新的機會點








          章節四:生活習慣和歷史文化遺留帶來的本地化策略



          收入/支出方式占比反映了一個群體的現狀

          聊這個話題前我們先將選擇的范圍進行收縮,聚焦在一個國家的一個群體內去看會比較容易解釋。在巴西司機的收入的往往只能支撐下一周的家庭支出,難有結余。這也導致司機會選擇雙開(同時使用UBER接單或者其他競品)或者進行其他賺錢的方法,如果整個群體都是這樣的情況下,那么司機的忠誠度(這里指的忠誠度不是貶義詞,而是每周的出車時長)必然下降。那樣對于大盤的運力來說便是損失。那有沒有什么辦法幫助司機更好的應對這些問題


          我們該如何思考這個問題,通過馬斯洛的需求理論我們能夠將人的訴求歸為三類,基礎的生存訴求/歸屬感和成就感。那這三種可以再細化成兩類,物質層面的訴求和精神層面的訴求。司機愿意在滴滴平臺跑單是基于了物質層面。那么,我們是不是可以豐富收入以外的獎勵形式,提供活動獎勵或者權益的折扣,又或者嘗試下小額貸款,那這些是不是可以給用戶帶來價值點呢?


          精神層面我們是不是也有發揮的空間,對于補貼,往往是有限的。那如何做到持續長期刺激司機群體?如果一個乘客對于司機進行了表揚和小費的激勵,是不是可以給司機帶來更大的信心去服務好乘客,那我們是不是要加強這方面的透傳。是不是可以給司機提供虛擬獎勵,讓司機存在足夠的擁有感和成就感,讓司機群體也能感受到平臺對他們的看重。如果勛章可以,那等級是不是也是成就之一呢?



          現金與線上支付普及與思考

          不同的國家線上和現金的支付比例大不相同,這里受經濟環境和政治環境影響較大??偟膩碚f習慣了線上支付的習慣后就很難回到現金支付的環境,因為確實更加方便便利。一個國家大量使用現金支付的情況下,往往是互聯網公司能做的發力點和藍海。核心做法是通過核心業務導流到錢包模塊,在與當地的銀行和機構進行合作,增加卡和賬戶的滲透率。然后通過做權益和服務,滿足用戶的生活訴求,從而達到場景獨占。最終將會讓公司的業務矩陣從單核的核心業務到核心業務+本地生活




          文字的適配/i18n翻譯的本地化(不同地區/國家語言精準翻譯,拒絕里語/文字長度折行問題)

          這里我們需要提到一個概念,i18n(其來源是英文單詞 internationalization的首末字符i和n,18為中間的字符數)是“國際化”的簡稱。在資訊領域,國際化(i18n)指讓產品(出版物,軟件,硬件等)無需做大的改變就能夠適應不同的語言和地區的需要。對程序來說,在不修改內部代碼的情況下,能根據不同語言及地區顯示相應的界面。 在全球化的時代,國際化尤為重要,因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n(“本地化”的簡稱)


          了解完i18n的相關背景以后我們大概可以把他定義成做國際化翻譯的一個中臺,所有的本地化設計在經過研發代碼實現后,都會進過他們去對文案進行翻譯校對,最終變成當地人可以理解的話術落地到界面上,從而進行本地化的空投,但是這里面往往存在一個適配優化的問題。大家知道英文的單詞平均長度要長于漢字,而西語和葡語是英文的1.25倍到1.5倍之間,而俄語的長度更是能達到葡語的1.25倍。那么面對多國空投的適配不僅僅需要i18n進行精準翻譯,還需要把控字符長度,避免折行和省略問題


          我們來看下下面這個例子


          (不嚴謹的快速翻譯,只是為了更方便的展示不同文化下的文字長度)


          不同國家的語言不同,文字也不同,則會存在單詞,句子長度/行高的差異。如果一個產品在初期沒有做好適配的話,到后期替換當地語言的時候極有可能出現文字溢出的問題,這也是為什么在做海外設計的時候最好拿當地的語言進行設計,能初篩出一些細小的問題 ,避免在和翻譯中臺對接的時候因為文案太長提供的空間不足而修改頁面間距和留白的適配問題



          中東國家客戶的產品需要注意適配

          如果你服務中東客戶,務必需要呈現出當地的閱讀排版方式(尊重本地化設計)具體的適配細節這里就不過多說了,網上搜索【RTL適配方法】即可

          (Material Design中的RTL適配)



          縮寫是否合適(日期/業內專屬名詞)- 時間格式/貨幣符號/聯系方式/地址等

          格式也是做國際化中一個非常常見且體現專業度的地方,不同國家的時間展示方式不同,會影響用戶的閱讀,舉個例子“03/08/2019”,如果在A國理解是2019年3月8號,在其他國家復用是會存在理解成2019年8月3號的,更別說我們加上的星期之后的展示方式。這就要求我們在進行開新的國家的時候務必于前線進行更好的溝通,保障閱讀的習慣和當地一致,那貨幣符號/地址等也應該遵守當地的習慣去展示,通常的解法是設計團隊去收集信息并且與前線當地人員進行交流確認,將格式記錄下來,最后與研發根據上線的國家展示不同的格式









          總結

          因為時間倉促,無法面面俱到的將每個點都進行舉例論證,盡可能把我認為重要的點都提了出來。理解了這篇文章并不代表看懂看明白就能做好國際化,它更像是一個方法論,幫助沒做過國際化業務的同學能夠快速理解當地的用戶和業務的打法


          希望我的文章能夠拋磚引玉,給大家一些靈感,也希望更多朋友能夠將國際化的經驗分享給設計的朋友們。讓我們一起把中國互聯網國際化的業務做到越來越好


          最后引用我一老哥的話進行收尾“更好的國際化就是以更好的本地化思維去看待,去理解它們。而不是僅僅以一個理性的角度去看待。要站在用戶的角度去看,永遠不要輕易地相信自己的理解

          文章來源:站酷  作者:大寶蛋

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


          日歷

          鏈接

          個人資料

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

          存檔

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