電商后臺產品,涉及眾多模塊,而以商品、訂單、庫存,為核心模塊,模塊之間存在大量交互。訂單較為重要,它記錄了所有的交易數據
對電商公司來講,最核心最難做的有三部分:商品、訂單、庫存。商品與店鋪、營銷、評價等相關;訂單與會員、營銷、支付、庫存、物流等相關;庫存與訂單、采購、WMS(倉儲管理系統)、營銷等相關。在這里我將結合自己在電商后臺產品設計中遇到的一些問題與解決方案總結出來,僅供參考~
訂單流程是指C端用戶的操作與后臺發生交互的運轉流程(含正向流程和逆向流程),如下圖:
當然,在實際業務中,訂單流程遠沒這么簡單。比如在用戶結算付款/取消訂單/退款/退貨流程中,可能還會涉及到滿減、優惠券、積分抵扣等情況。又或者說用戶下單后,電商平臺與WMS的數據交互,都是整個訂單流程中很關鍵的節點。
從訂單流程圖可知,正向流程可分為待付款、待發貨、待發貨和已收貨/已完成/交易成功、四個階段,再加上交易關閉(逆向流程產生)。下訂單流程涉及到的模塊主要有支付和庫存,對于用戶端來講訂單在各個階段所涉及到的主要操作如下圖,分為商品行與訂單行的操作(是因為訂單的逆向流程中申請退款等售后操作是商品維度的操作)對于商家后臺來講,訂單各個階段端主要操作有發貨、審核、退款、修改地址等(可參考:三.訂單列表)。
這里特別說明一下交易成功,是指在收貨后N天后,此時除去售后問題外,渠道側會涉及到平臺和支付渠道結算的問題,貨款需要從支付渠道流入平臺賬戶;商戶側會涉及到平臺需要生成待結算清單問題,明細該筆訂單商戶結算款是多少。
訂單列表頁由搜索區、列表區和操作區組成。
1.搜索區域主要包括:訂單編號、訂單狀態、下單時間、買家姓名、支付渠道、訂單等,為了提高工作效率,需要將常用的重要的條件作為篩選項,同時將可以收起次要篩選項,以便于快速查找,一屏展示更多訂單。
2.訂單列表區的信息來源與訂單詳情,信息種類以及要素較多(可參考:四.訂單詳情信息價格圖)所以后臺列表中不可能直接顯示訂單相關的所有字段,需商家更關注使用頻率更高的字段比如訂單編號、訂單狀態、退款狀態等信息。而剩余的其他信息,可以通過下級訂單詳情頁面展示。
訂單詳情的信息包括商品信息、訂單信息、用戶信息、支付信息、物流信息等,如下圖所示:
1.用戶信息包括用戶賬號、用戶身份等級(普通會員/VIP)、用戶的收貨地址、收貨人、收貨人電話等組成。用戶身份等級信息可以用來和促銷系統進行匹配,獲取商品折扣。
2.訂單信息這里要補充一個概念-拆單。拆單有兩次,一次是訂單層面的拆單-在用戶提交訂單之后、支付之前拆單,這個拆單主要是因為多商品合并支付時,各個商品屬于不同商家,此時訂單需要使用父子訂單進行區分。父訂單是記錄一次下單和合并支付的依據,子訂單是買家和商家跟蹤物流,售后、結算的依據(對于合并支付的訂單,京東是拆為兩個不同的訂單編號,淘寶也是按照店鋪拆為兩個訂單,但是訂單編號相同);二次是商品層面的拆單-在用戶下單之后,商家發貨之前,去拆分發貨單(SKU層面),這個拆單由于商品分屬不同的倉庫/商品品類需要單獨打包發物流。
3.物流信息分兩種業務場景來講。一,平臺自營商品通過WMS系統完成訂單出庫的是可以自動完成包裹物流信息的回傳;二,第三方店鋪通過自己的倉庫打單發貨的情況,是需要商家在后臺系統手動上傳包裹物流信息。補充一點:現在絕大多數物流公司都開放了物流接口,可以根據物流接口獲取物流狀態信息。當用戶收到貨后,可以根據物流公司反饋的簽收結果,設置提醒用戶確認收貨。
1.修改訂單,此操作發生在預下單過程中,用戶沒有提交訂單,可以對訂單一些信息進行修改,比如配送信息,優惠信息,及其他一些訂單可修改范圍的內容,此時只需對數據進行變更即可。值得一提的是,在預下單也就是確認訂單時,是不支持用戶修改選購商品的規格和數量的。這是為啥呢?
2.取消訂單,此操作用戶主動取消訂單和用戶超時未支付,兩種情況下訂單都會取消訂單,而超時情況是系統自動關閉訂單,所以在訂單支付的響應機制上面要做支付的限時處理,尤其是在前面說的下單減庫存的情形下面,可以保證快速的釋放庫存。
3.退款,待發貨訂單狀態下取消訂單時,分為商戶退款(庫存不足或者其他原因)和用戶申請退款。其中用戶退款分三種場景:商家還未發貨,系統應該支持用戶申請退款(無需審批);若商品還未出庫,則需要推送至WMS從而在倉庫內進行攔截,攔截成功則暫定出庫,釋放庫存,同步訂單系統同意取消訂單,同時進入退款流程;若商品已出庫,系統不支持退款申請,雙方達成一致后,由賣家點同意退款系統更新退款狀態,對訂單進行退款操作,金額原路返回用戶的賬戶,同時關閉原訂單數據。
4.退貨退款,需要與商戶進行協商,如果協商過程存在爭議平臺客服介入進行協調。如無爭議,商戶審核通過后告知用戶退貨流程及退回的收件信息,進入退貨流程后,商家收到用戶退貨商品后,庫存系統進行補回,退貨入庫,訂單系統確認后進行退款,同時關閉訂單。
以上是訂單管理層面的一個整體總結和說明,在完整的電商架構中其實還有調度中心(串聯WMS系統與訂單管理中心)后面爭取在梳理庫存的時候一起分析總結一下這個模塊。
文章來源:優設 作者:依拳超人
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
電商后臺產品,涉及眾多模塊,而以商品、訂單、庫存,為核心模塊,模塊之間存在大量交互。本文將總結最基礎、最核心的商品管理。
對電商公司來講,最核心最難做的有三部分:商品、訂單、庫存。商品與店鋪、營銷、評價等相關;訂單與會員、營銷、支付、庫存、物流等相關;庫存與訂單、采購、WMS(倉儲管理系統)、營銷等相關。在這里我將結合自己在電商后臺產品設計中遇到的一些問題與解決方案總結出來,僅供參考~
根據商品的公共數據庫,主要包含品牌庫、屬性庫、通用規格庫、稅率庫、生產信息庫(產地)等信息,先定義出SKU(庫存量單位,例如:大頭筆+黑色,能夠確定一個SKU),然后加上商品描述和規格價格,就成了商品。
維護完商品基礎屬性、特有屬性、銷售屬性并且保存之后,需要維護“商品詳情”(一般通過文本編輯器來實現)即可發布為一個待上架(銷售)的商品。
其中有幾個屬性需要說明一下:
商品管理中的商品分為在售商品(上架中的商品)和待售商品(下架中的商品),發布商品時也可以設置自動下架或者定時上架規則。
將商品分為在售商品和代售商品兩個模塊,只要便于平臺運營人員或者商家管理商品。在日上運營過程中,商品下架的原因有很多,對應的處理方式也不同,例如系統自動下架、商家自主下架等。
商品編輯是對已經發布的商品的信息進行修改,通常不允許編輯上架中的商品以防止銷售屬性被篡改從而影響之前生成的SKU數據。
商品刪除是對不在進行銷售的商品刪除,上架狀態的商品不可刪除。
在商品管理模塊中有設置運費的入口,直接進入到物流系統設置運費模板,設置好運費模板之后,在發布(新增)商品時直接使用。
在電商平臺上的個體商戶,由于自家SKU數量比較少,從錄入商品參數到商品拍照、上架一個人基本都能解決。
但是對于自營平臺過萬的SKU,這樣的方式顯然是不行的。需要不同部門/人員來負責:比如采購部會負責商品基礎屬性的批量導入錄入,運營部門負責維護商品主圖、商品輪播圖、商品詳情圖以及各種價格等工作的維護。商品管理是電商平臺的基礎數據,打好基礎,方能建好高樓。
文章來源:優設 作者:依拳超人
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
電商后臺產品,涉及眾多模塊,而以商品、訂單、庫存為核心模塊,模塊間存在大量交互。庫存決定商品是否可售賣,下單是否能成功。
電商中的庫存管理是為了保證前臺商品的正常售賣,庫存的管理和倉庫密不可分,而倉庫又和銷售、采購相關,以下是簡單的示意庫存變動的影響因素。
A. 銷售訂單-減庫存;B. 銷售訂單-鎖庫存;C.售后退貨-補庫存;D. 倉庫調撥-增加/扣減庫存;E.預售-鎖庫存 ;G. 采購-增加庫存;H.盤盈盤虧(盤庫存對賬,增加/扣減庫存)。這里說一下盤盈盤虧,盤點主要是用于管理倉庫實際值與系統值的差異的。理論上來說,若商品的各個環節數據都準確的話,實際值與系統值應該是一致的。但實際中可能會有一些系統檢測不到的因素影響了真實的庫存,這就需要倉庫進行周期性的盤點了。盤點之后,若實際值與系統值不一致,就需要把系統值修改正確,這時,可以通過人工或者自動生成出入庫單的形式去修改系統值,而且修改的這部分數據是需要做出標記的,以便于財務之后的對賬。(當然,實際設計中如何處理這部分差異,還要看業務性質和需求)
根據庫存不同應用階段,將庫存管理體系分層為銷售層、調度層、倉庫層,主要是各層的職能不同,驅動庫存發生變化的依據也不一樣。
銷售層
銷售層的庫存決定是否可售賣,下單是否能成功。在秒殺時,活動庫存決定了是否可以秒殺成功;預售時,預售庫存決定是否可下定金預定。
??可銷售庫存:網站前臺顯示的庫存,可以對外售賣的庫存。當“可銷售庫存>0”時,前臺網站則會顯示商品可銷售;而“可銷售庫存=0”時,前臺網站則會顯示商品缺貨。
??鎖定庫存:用戶下單鎖定庫存,支付后扣減庫存。鎖定庫存指的下單時占用庫存,保證客戶下單后支付的訂單都是有貨可發,而不會相互沖突。
??已銷售庫存:統計商品已售數量。當支付成功,商品就算作已銷售庫存。如果取消訂單或售后就需要走相應的庫存變動流程變動。
??活動庫存:主要是做促銷活動(例如秒殺)時,分配固定數量的商品給相應的活動,這時候就需要從可銷售庫存中占用相應數量給活動庫存。這部分庫存也是走相應的鎖定、扣減邏輯。
??預售庫存:這部分是虛擬庫存,主要是拉動式需求,例如B端訂貨、雙十一定金預售等。預售同樣走相應的鎖定、扣減邏輯。不同的是,預售的訂單需要備貨之后,再推送至調度層。
其中,可銷售庫存在商品維護界面僅有一個對庫存數維護的地方,也就是實際可售庫存。對于大平臺的入駐商戶來說,通常采用手動錄入方式(有開發能力的可以做系統對接),讓商戶自己維護SKU的銷售數量。具體填寫多少由商戶自己決定,這個填寫的數字就是實際可售庫存。而對于平臺自營來說,公司通常都有自己的倉儲系統,每個SKU都有明確的存儲記錄,并且部分SKU參與內部任務(如調撥、拍照、戰略儲存等)使得當前時間不可售。因此實際的SKU庫存可能并不等于全部可售,具體實際可售庫存需要通過倉儲系統經過統計同步到商戶模塊中,而不是由買手自己手動維護。
調度層
調度層相當于訂單的分配中心,將訂單轉化為發貨單,按照調度規則決定哪些sku由哪個倉庫發貨。
調度層的庫存分為單倉、區域、總庫存三個維度,區域庫存指的是這些倉庫只發某一區域的,例如京東華中地區的倉庫配送華中地區,北京就無法從華中地區的倉庫發貨??値齑婕此袀}庫的sku庫存總計。
??賬面庫存:倉庫中的實物庫存,只要是未出庫的都算在賬面庫存中。
??可用庫存:倉庫中可供發貨的庫存。這部分庫存是可供調度的庫存。
??在途庫存:下了采購單但是尚未入庫的庫存,在途庫存理論上部分是可供銷售的,例如T+1的在途庫存,就是1日之后就可以入庫的sku。
??已用庫存:在調度層已分配的庫存。
調度層在某些方面上和前端庫存有些重疊,前端庫存也會分區域和總庫存,但是不同的是,調度層對應的是實物,不會存在虛擬庫存,流到調度層的訂單經由調度后推動至倉庫發貨。
倉庫層(WMS庫存)
倉庫層的庫存對應的是實物庫存,出庫入庫盤點都會引起倉庫庫存的變動。倉庫層在整個庫存管理體系中尤為復雜,倉庫內的出庫流程可參考上圖-庫存關系流轉關系圖。(其中波次揀貨是指將幾個訂單合并揀貨,可以提高揀貨效率。)
??可用庫存:發貨單推至倉庫后,倉庫可以用于發貨的庫存,不包括鎖定的庫存。
??鎖定庫存:發貨單推送至倉庫后鎖定庫存,鎖定時同時去鎖定庫位庫存。
??已出庫庫存:已經確認出庫的實物庫存。
??不可用庫存:盤點時發現的不良品,需要報損,從可用庫存轉化為不可用庫存。
文章來源:優設 作者:依拳超人
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
現階段,人人大談用戶習慣,但是用戶習慣不能僅以設計師自身為標準,本文我會分析用戶習慣,希望對大家有幫助。
前些天對用戶習慣進行了總結,這兩天重新優化了一遍。我們在互聯網產品的設計過程中,有時會聽到一個詞:用戶習慣。設計師希望嘗試更多新穎的交互方式、視覺效果,卻常常容易被其他人挑刺指出不符合用戶習慣,建立在用戶習慣上的創新才是好的體驗。
盡管設計師經常將用戶習慣掛在嘴邊,但是卻很難有人說出用戶習慣究竟是什么?我們如何判斷所做的設計是否符合用戶習慣?用戶習慣是否始終不能打破?道理我都懂,就是不會做,實際上確實是這樣,因為很大程度上取決于設計師對用戶習慣的理解深度。
用戶習慣本身很難被量化,但是不代表就是一個模糊的概念,你仍然能從用戶反饋、操作行為數據對比等分析中一窺究竟,用戶習慣是可以隨著設計師的學習、經驗、眼界等的提升而提升的。
心理學上認為,習慣是人在一定情境下自動化地去進行某種動作的需要或傾向。或者說,習慣是人在一定情境中所形成的相對穩定的、自動化的一種行為方式。 習慣形成是學習的結果、是條件反射的建立、鞏固并臻至自動化的結果。
所以,習慣有兩大特點:
需要注意的是,“長期”本身是是沒有明確時間界限的,更強調多次的重復。這里的習慣,側重于描述“習得性”,即人們通過經歷、學習、刻意練習等方式形成的,所以這種習慣理論上是可以被改變的。
此外,習慣還有一種潛藏特性,區別于上面描述的“習得性”,是天生的、物種特有的行為模式。比如人空腹狀態下,聞到香的食物會產生強烈食欲。這種特性習慣是刻在基因里的,幾乎無法被改變。
試想,我們在使用 App 時,是否遇到過因為習慣的問題而感覺到不適應的場景?
舉個最常見的例子,Windows 與 Mac 系統的軟件關閉方式。使用 Windows 的電腦時,我們形成了關閉操作在右上角的自然習慣。后來開始使用 Mac 電腦,關閉方式都在左上角,在一段時間內,每次關閉時都感覺到格外不習慣。而 Mac 的關閉方式沒有比 Windows 產生顯而易見體驗升級,改變操作習慣成本高,部分用戶可能會認為 Mac 的關閉操作不好用。
當然,假如最開始接觸的是 Mac 電腦,再使用 Windows 電腦,也會自然認為 Windows 不好用,這是先入為主的觀念,一旦產生習慣,改變習慣將產生一定的學習成本。
設計師需要思考用戶行為的本質,而盡量減少主觀判斷。產品是給人使用的,所以了解人們的行為特征很重要,而只要涉及到對人本身的了解,就是極其復雜的,人類對自身的行為特征了解遠遠不足,但這不妨礙我們以現有知識去做一些分析和判斷。
用戶行為習慣的產生,與記憶的特點有很大關聯,我們可以把記憶劃分為外顯記憶和內隱記憶。
外顯記憶大家比較習慣和容易感知到,比如我們在學校學習時背誦的課文、公式法則等,可以用語言、文字等顯性方式描述出來的記憶。
內隱記憶也叫非陳述性記憶,我們無法用行為描述而又確實存在,比如騎單車,學會之后很難會遺忘。剛開始學習時,會需要意識的介入,經過多次練習,行為會逐漸“自動化”,比如學習開車時,我們會注意力很集中,而習慣開車后,可以一邊開車一邊聊天。
我們平時說的肌肉記憶、條件反射也和內隱記憶息息相關,而且一旦形成,不太容易改變。需要注意的是,肌肉記憶只是一種簡單描述,負責此記憶的是小腦,其實肌肉沒有記憶。
所以有時候,我們感覺體驗某個 App 時,會習慣性在某頁面尋找某功能,或者覺得體驗和其他 App 有區別,都可能是內隱記憶的用戶習慣引起的。舉個例子,某天你剛使用一個沒用過的 App ,這時你想要找設置功能,那你大概率會不自覺的點擊 App 的最后一個主 Tab (如“我的”),因為大部分 App 的設置功能都在這個場景,用戶自然也就形成了習慣。
這里我且采用由心理學家基思·斯坦諾維奇(Keith Stanovich)和理查德·韋斯特(Richard West)率先提出的術語,用以說明大腦中的兩套系統,即系統 1 和系統 2。
·系統1的運行是無意識且快速的,不怎么費腦力,沒有感覺,完全處于自主控制狀態,也叫快系統。
·系統2將注意力轉移到需要費腦力的大腦活動上來,例如復雜的運算。系統2的運行通常與行為、選擇和專注等主觀體驗相關聯,也叫慢系統。
而這兩個系統,是可以互相轉化的,慢系統通過刻意練習,把新的習慣注入快系統,而這時快系統就是習慣的表現,這樣快系統可以在日常生活中完成大部分工作,這就是我們常聽說的熟能生巧,習慣經常能幫我們節省思考的精力,這又讓慢系統進一步通過刻意練習,向快系統不斷注入更多好習慣。
舉個例子,你剛用一個 App 時,可能需要先體驗一下你要的功能在 App 的哪個位置,但你用久之后,就會不假思索地找到它。就像你用微信,最常用的功能可能是回復信息、看朋友圈,所以一定會形成習慣。但是假如有人讓你找一下微信里面“生活服務”的入口,你可能會先想一下可能出現在什么入口,這就是因為平時比較少用導致的。假如你常用這些入口,也會形成習慣,下次要使用這些功能的時候,就能夠快速找到。
既然說到用戶習慣的特點是“長期養成”且“不易改變”,那么挑戰用戶習慣一定會造成不適,甚至引起強烈反感。幾年前 Ins 的 logo 改版,將 logo 由擬物化改成了扁平化,顏色也發生了變化。暫且拋開視覺效果不說,從用戶視覺記憶上,已經習慣了下圖左側的效果,而右側新版效果很難與左側產生記憶上的關聯。
許多用戶反饋桌面上找不到這個應用、許多用戶吐槽很丑甚至不想再使用。所以我們比較容易理解,為什么有時候 App 改版容易反而引起用戶的反感,這很大程度上是用戶習慣的影響。
了解產品的用戶是誰、用戶的行為特點是什么。不同產品由于定位不同,所以用戶群體也不相同,用戶群體的不同自然代表用戶行為特點的不同。如果設計師知道用戶群體,但是不清楚具體行為習慣特征,可以嘗試讓你身邊的用戶幫你體驗。
舉個例子,B 站的整體用戶畫像相對而言更偏年輕化,所以產品設計上,無論是代表形象、UI 風格、交互體驗都更顯年輕化。而“小年糕”小程序的用戶群體主要為中老年人,所以設計上不會顯得很年輕,而是以操作明確、字號偏大、去除多余信息為主。
關注主流產品的用戶體驗很重要,這些競品的操作往往代表用戶的習慣操作(或被培養出來的習慣操作)。大多數情況下,你需要了解競品能做到什么程度,用戶容易將習慣從一個場景帶到另外一個相似場景。
比如點外賣,有的用戶可能會下載美團和餓了么,盡管平臺不同,但是在用戶習慣中,操作模式是相似的,所以如果你要讓用戶的體驗不突兀,那就往往遵循相似的操作邏輯。當然這些不是為了讓一個產品去抄另外一個產品,而是要追尋更好的使用體驗,你的產品比競品體驗更優,就更能吸引用戶的青睞。
每個人本身都會具有相對穩定的行為、操作、信息閱讀習慣,我們能見到的體驗好的產品,都是符合用戶的基本行為習慣、信息閱讀習慣的,要想了解這些習慣,需要了解深層次的交互行為特征。
從操作而言,需要了解用戶與界面交互的行為習慣,比如用戶的操作(手勢操作、信息布局如何才能便于操作),比如尼爾森可用性原則等。
從信息閱讀角度而言,需要考慮人們眼睛觀察事物的規律,比如格式塔原理:接近性原則、相似性原則、連續性原則、閉合性原則、主體/背景原則、簡單對稱性原則、共同命運原則。
就移動互聯網產品的領域而言,大家都是與手機互動,目前手機系統的兩大平臺:iOS 和 Android 也都各自有提供關于人機界面設計有清晰的指導,尤其是 Android 的 Material Design ,對于設計師快速了解設計規范、設計原則有很大作用。
iOS 與 Android 的人機界面規范鏈接:
iOS:https://developer.apple.com/
Android:https://material.io/
我們提到挑戰用戶習慣會有風險,但用戶習慣并非是永遠不可改變的,有時我們需要培養新的用戶習慣,也就是大家常說的“教育用戶”,否則世界可能一直很難進步。
移動互聯網興起之前,大家都是線下打車,但是滴滴打車顛覆了傳統線下打車的用戶習慣;以前大家都是現金支付,但是微信支付顛覆了現金支付的用戶習慣。
《設計心理學》里面有這么一段話:“如果用新的方式做一件事只比原來好一點,那么最好與以前保持一致。如果必須做出改變,那么每個人都得改變。新舊混雜的系統會讓每個人困惑。當新的做事方式明顯優于舊的方式,那么因改變而帶來的價值會超越改變本身所帶來的困難。不能因為某樣東西與眾不同就認為它不好。如果我們故步自封,我們將永遠不會進步?!?
這里的價值包括但不限于用戶價值、商業價值(短期價值、長期價值)等,當新習慣會需要用戶改變舊習慣時,這個設計帶來的價值有多大,值不值得讓老用戶付出學習成本。有時候,明知改變會引起用戶的強烈抵觸,仍然改變用戶習慣,可能因為改變的價值大于改變的困難。
剛才提到的 ins 的例子中,有的人不知道 ins 為什么要改版,創新咨詢公司 IDEO 的溝通設計主管 Remy Jauffret 說:“當品牌、組織超越了最初的商業意圖,或擴展業務提供不同的產品,或領導希望吸引新的客戶,這些情況都可能需要新的品牌視覺。變化總是大家不舒服,然后又平息,我認為時間才是檢驗真理的唯一標準。”
我們在設計中,有時候會遇到自己的產品某個功能體驗比較差,但是延續了很久,而市面上其他同類產品在相同功能的體驗上已經做的很好,我們可以往主流交互體驗上改版嗎?這時需要權衡改變之后是否能帶來明顯的體驗升級,還是說對于用戶來說是不痛不癢的變化,可改可不改?
以安卓為例,在幾年前,安卓手機的底部有 3 個實體鍵,后面手機更新迭代,變成了虛擬三鍵設計,因此底部存在3個不同功能的熱區。而在 Android 4.0 設計規范中,為了避免底部標簽欄與已經存在的底部虛擬鍵產生交互上的沖突,安卓明確說明了不要使用底部標簽欄。
但這種規則,在使用體驗上、開發者的適配上都發生了問題,用戶更接受 iOS 的體驗,后面谷歌在 Material Design 中,允許了底部標簽欄的存在。這相當于和原來的用戶習慣不一致,但卻帶來了更好的用戶體驗。
這里結合上癮模型的觸發、行為、多變的酬賞、投入進行闡述,這四個步驟是一個循環,當用戶越沉迷于這個循環,說明你的產品對用戶的吸引力越強,用戶習慣也就越強,這里會側重于從培養用戶習慣的角度進行拆解。
外部觸發說白了就是加強產品曝光,讓用戶一下子就能想起你。舉個例子,“充電五分鐘”下一句是什么?你大概率會想到“通話兩小時”,這種經過外部的長期觸發,最終已經轉變成了內部的習慣,會讓你記憶深刻。
外部觸發的類型主要有4類,通過將信息滲透進用戶生活,吸引他們采取下一步行動:
付費型觸發:做廣告、搜索引擎推廣都是付費型觸發,爭取新用戶;
回饋型觸發:公關和媒體等領域的觸發,比如對產品做正面報道、推薦等;
人際型觸發:熟人之間的口碑傳播是一種極其有效的外部觸發,可以為產品帶來“病毒式增長”;
自主型觸發:以驅動用戶重復某種行為作為重點,讓用戶形成習慣,比如新聞訂閱、每天早晨的鬧鐘等。
內部觸發是用戶心理產生的使用動機,內在情緒驅動自己去使用一款產品。
當某個產品與你的思想、情感或者是原本已有的常規活動發生密切關聯的時候,那一定是內部觸發在起作用。對于習慣刷朋友圈的人來說,拿起手機就不會自覺打開微信;對于習慣刷微博的人來說,拿起手機就會刷起微博,甚至自己都沒有意識到。一再重復這種場景,會用戶就會對此形成一種穩定的聯系,進而形成習慣。
斯坦福大學福格博士曾提出“福格公式”,福格行為模型可以用公式來呈現,即 B = MAT。B 代表行為,M 代表動機,A 代表能力,T 代表觸發。只有動機、能力 、觸發三者皆備,才能跨過“行動線”。
觸發:即上面所提到的外部觸發與內部觸發。
動機:動機決定你是否愿意采取行動。福格博士認為,驅使我們采取行動的核心動機主要是三種:追求快樂,逃避痛苦;追求希望,逃避恐懼;追求認同,逃避排斥。
能力:這里要詳述的是能力,所謂習慣,是指人們在幾乎無意識的情況下做出的舉動。一種行為的復雜程度越低,無論是體力上的還是腦力上的,被人們重復的可能性就越大。越簡單的操作成本,記憶成本越低,越容易形成用戶習慣。
舉個例子,刷抖音就是用戶行為成本極低的場景,你在刷抖音時,不需要多余的交互行為,切換視頻甚至不需要點擊,只需要向上滑動。除開抖音算法的精準推薦不說,從交互層面而言,也是足夠簡單并且形成習慣了。
如果改變會打破認知習慣,要讓用戶能快速了解新設計的使用方式。最好的方式是能夠讓用戶快速與已其他競品的操作習慣產生關聯。比如采用其他主流應用成熟的交互方式。
如果改版會很大程度上改變用戶行為,也可以考慮嘗試以下的方式。
· 改版操作指引:這種方式較為常見,但是仍應注意避免繁瑣的操作指引,切勿把操作指引當作體驗差時的解決方案。
· 兼容多種用戶習慣:這種方式可以讓不同用戶選擇適合自己的交互方式,最大程度考慮到所有用戶,但同時也可能造成了功能冗雜的情況。比如安卓底部三大金剛鍵,后面手機全面屏時代,新增了全面屏手勢??紤]到安卓老用戶的使用習慣,三大金剛鍵(底部虛擬按鍵)始終被保留下來;
· 允許切換新舊版本:這種方式一般是改版變化過大,用戶一時間不容易接受新的體驗方式,常見于網站,如站酷早期的大改版,但是僅適用于過渡期。
當然,除上述方式外,肯定還有一些其他讓改變行為習慣更舒服的方式,這里不一一列舉。
多變酬賞主要表現為:社交酬賞,獵物酬賞,自我酬賞。這幾種酬賞會加強用戶對產品的使用習慣。
社交酬賞:人們從產品中通過與他人的互動而獲取的人際獎勵,比如被認同、重視、喜愛等。比如人們喜歡發朋友圈、微博等,期望得到回饋,某種程度上都是為了獲得社交酬賞。
獵物酬賞:人們從產品中獲得的具體資源或信息。比如瀏覽信息流,豐富的信息流內容為用戶提供了資訊,比如刷抖音,人們追求視頻的新鮮感、追求內容的豐富性都是屬于獵物酬賞。
自我酬賞:人們從產品中體驗到的操控感、成就感和終結感。在目標驅動下,我們會去克服障礙,即便僅僅是因為這個過程能帶來滿足感。就像你玩游戲,希望贏過對面,或者期待將游戲玩通關,本質上屬于自我酬賞。
如果希望繼續培養用戶習慣,與產品產生更緊密的聯系,就需要鼓勵用戶進行一些投入,以增加他們使用產品的可能性。行動只是用戶使用的第一步,促使用戶對產品的投入,才會真正增強用戶與產品之間的聯系,形成更強的用戶習慣。但是如果用戶自身沒有投入,即替換成本低,那么隨時都可能有被其他產品取代。
舉個例子,移動互聯網時期,微信早早入局,人們的關系鏈都在微信里面沉淀,即人們越使用微信,關系鏈沉淀越多,就越難以更換其他產品,所以兩年前想要挑戰微信的多閃、馬桶 MT 和聊天寶這三款社交 App 不可避免的失敗了。
用戶越愿意投入,就證明用戶粘性越高,在此過程中,用戶習慣也會不斷加強。
現階段,人人大談用戶習慣,但是用戶習慣不以自身為標準,而是需要考慮產品用戶的行為特征,以及人們在使用產品時更加深層的、甚至用戶本身都沒有發現的習慣,這就需要設計師對習慣的產生、習慣的判斷、習慣的培養有深入的認識。
一般情況下,產品不適合貿然改變用戶習慣,但是在有特殊需要的情況下,還是不可避免的改變產品的用戶使用習慣,當然我們需要如何讓用戶更加容易接受。大多數產品,都希望用戶能夠形成對自己產品的習慣,所以需要了解用戶如何對產品產生習慣、加強習慣,使產品擁有更強的吸引力,但是良好、正向的用戶習慣一定是基于用戶體驗的。
文章來源:站酷 作者:熱風_
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在有一次面試的時候,我問候選人一個問題:你覺得你作為設計師,最擅長的是什么?候選人回答我說他最擅長的是移動端的設計。
緊接著我又問主流的移動端設計規范有哪些呢?他開始支支吾吾說不出所以然,我再次提醒他做移動端的時候是怎么做的,有沒有參照什么設計規范?他歸納總結了半天,說是去參考一些比較成熟的 APP,看他們是怎么做的。
他的回答有問題么?有問題,錯了么?也沒錯。但是他沒有聚焦問題,也對成熟的設計規范一無所知,成熟的 APP 設計規范本身也是屬于可參照的坐標系;但他們都有一個更加底層的規范,那就是 iOS 設計規范和 Materia Design 等移動端設計規范。
他的回答更多像是知其然而不知其所以然,這些設計規范我們可以理解為一種被普遍接受且廣泛運用的方法論,而我們在做設計的時候,就是在有意或者無意中運用這些設計規范進行輸出方案。
萌新設計師拿到需求就開始上手畫圖,設計老油條拿到需求會思忖再三;萌新設計師設計過程中東借西鑒,設計老油條設計過程中會運用完整的設計體系;萌新設計師評審設計的時候總是三緘其口,設計老油條評審設計的時候口若懸河。
是什么導致這兩者之間的差別呢?
這就涉及到設計進階中的一個重要的問題了:你在做設計的時候,有沒有自己的方法論?
百度百科上對于方法論的定義是“關于認識世界、改造世界的方法的理論”。
如果聚焦在設計行業,可以理解為,關于分析問題、解決問題的方法的理論,初級的設計師傾向于通過經驗化的手段解決問題,高階的設計師則通過一定的設計理論去支撐自己的設計,關于方法論的沉淀,可以看出設計師個人能力階段。
1. 總結歸納
像軟件工程師一樣,每個人都有自己的技術棧,設計師也可以這樣理解,你的職業成長依賴于相關的某一行業;因此你的“技術棧”,構成了你設計能力的基本盤,大類比如 B 端交互設計師和 C 端交互設計,體驗設計師和視覺設計師等,小類如 B 端可視化設計師、C 端動效設計師等。
在各自行業積累的經驗,是我們個人技能的護城河,通過對這些經驗的總結和歸納,我們在遇到類似需求的時候,可以快速復用;這也是為什么招聘的時候一般會要求有類似行業經驗的設計師優先。
同時,我們在運用這些經驗去設計的時候,可以理解為是一種本能的直覺;我將其稱之為設計師的直覺,就像色彩搭配、文字間距、頁面留白這些基本的設計要素,大多數設計師都是依賴于設計師直覺(經驗)進行設計。
2. 復盤
設計師的經驗構成了我們方法論的基礎,但是在平時的設計中,如果不注重項目復盤和總結,沉淀的經驗也大多都是毫無章法的記憶碎片;因此針對項目的復盤很重要,復盤既包含設計層面的,也包含產品規劃、人員協同層面的,這些也剛好構成設計師多維能力的一部分,比如產品能力、溝通能力等。
復盤可以讓我們的經驗更好的轉化為可用的方法論,比如之前在設計長表單的時候,遇到了很多復雜的問題,既有業務方面的,也有交互方面的;通過之前的一盤復盤文章《如何設計一個超長長長長長的復雜表單》,我將遇到的問題以及解決方法分析并記錄。
實際上,初版的設計稿并沒有像文中所寫的那么完善,而是在后續的不斷優化中,我將復盤后的一些方案加以運用,取得了良好的效果。
總結歸納和復盤的區別在于,總結歸納是在一個項目階段內展開的,是碎片經驗的累計;而復盤是一個項目階段結束后,從項目的全局視角出發,通過回顧和反思,發現項目的優點和不足,以此來激發新的思路和新的方案,為以后的項目提供參考;而總結歸納也可以作為復盤的一個手段,兩者相輔相成。
機制,于是花時間精心準備,組織大型會議,或激烈討論或洗耳恭聽,在心里留下一個又一個“哦,原來如此”,“哦,不過如此”,“哦,彼此彼此”的回響,時隔幾周后這樣的氣泡便消失殆盡,難免困惑其意義幾何。
3. 抽象
方法論本身是一個抽象的概念,人們將現實世界中發現問題解決問題的方法總結成一套可以加以復用的理論,抽象一方面可以延伸方法論的使用范圍,也可以更好的進行指導設計;通用的規則一般要比狹隘的規則容易遵守,我們所見到的大多數設計規范,都是依據原子設計理論,通過對原子、分子、組織、模板、頁面的定義,產出相應的設計規范和資產。
在產出設計規范的過程中,是將設計風格映射到原子設計理論上,從而抽象出各自行業內的設計規范;在運用設計規范的時候,我們又將設計規范解構到各自的業務中,從而產出符合業務場景的設計,解決業務問題。
4. 刻意練習
最近看了一本書,《刻意練習》書中寫道:
“反復做一件事情,目的是找出你在哪些方面存在不足,并且聚焦于在那些方面取得進步,試著采用不同的方法來提高,直到你最終找到適合自己的方法。
為了在沒有導師的時候有效地練習某種技能,牢牢記住以下三個 F,將是有幫助的;這三個 F,其實是以字母 F 開頭三個單詞,即:專注(focus)、反饋(feedback)以及糾正(fix it);將技能分解成一些組成部分,以便反復地練習,并且有效地分析、確定你的不足之處,然后想出各種辦法來解決它們。”
刻意練習適合需要大量時間來進行鞏固的技能型能力,比如插畫、排版等,我們可以看到大多數學習插畫需要的一個基本要求就是多畫多練習;而同樣,刻意練習在寫作溝通方面也有著比較突出的作用,當你輸出的內容越多,你的寫作技能同樣也會提升(當然這不是絕對的線性關系)
如果說總結歸納、復盤和抽象是形成自己方法論的理論基礎,那刻意練習就類似于手段了,通過刻意練習,可以將方法論加深固化為自己的專有技能,提升自己的多維能力。
通過對設計經歷的總結歸納、復盤和抽象,形成一套屬于自己的完整方法論體系。
同時,基于對相關技能的刻意練習,加固完善方法論體系,有助于我們學習業務知識,提升業務能力;快速輸出方案,提高設計效率。
文章來源:優設 作者:星野隨記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天我們來聊一聊動畫法則與動畫曲線,做動效不但要遵循物理規律還要結合人們的視覺體驗,想讓動效更自然更符合實際,對于動畫法則與動畫曲線的學習是必不可少的,希望此篇文章能幫助到你~
首先我們說一說動畫法則,動畫有12項基本法則,源自于迪士尼動畫師經累積數十年的動畫制作經驗所整理出來的,我們逐一來分析學習
01.擠壓與拉伸(Squeeze and stretch)
當有力作用到物體身上時,物體將會產生一定的形變,比如你在拍球時,球落地后會被擠壓,彈起時會產生拉伸,對于具體的擠壓與拉伸的強度,與物體的硬度和用力的大小有關。做動畫要遵循運動規律讓動畫更自然。
如下圖小球的彈跳,左側是無擠壓與拉伸的效果,右側是加入擠壓與拉伸后的效果,明顯右側更自然一些
從擠壓與拉伸的程度上,我們還可以看出物體的硬度,擠壓與拉伸的程度越明顯,物體越柔軟,反之,物體越硬,如下圖我們做一個夸張點的對比,可以看出右側小球硬度更高一些。
02.預備動作(anticpation )
當物體要發生運動或者人物要做動作之前會有一個預備動作,比如向前方扔東西,一般都會抬手向后然后在向前?;蛘呷嗽谔咧皶认露装l力,然后在高高跳起,做動畫也是一樣,預備動作可以讓用戶知道即將發生什么。例如下圖中的藍色小球會看起來更有活力和沖勁。
03.布局(staging)
staging是表演;展現;分階段進行;籌劃的意思,我們可以理解為布局或者構圖,例如看動畫時,有些表達人物特性的畫面會靜止幾秒,有些場景素材過于復雜的地方會對突出的人物打聚光燈,來引導用戶的視覺走向。
04.連續與關鍵(straight & pose to pose)
我們可以理解成是兩種動畫制作方法,第一種是連續,也就是根據連續的動作逐一來制作每一幀的畫面;第二種叫做關鍵,也就是先制作好關鍵的動畫,然后再制作關鍵動畫之間的畫面。(連續與關鍵適用于手繪動畫,而用AE或者一些動畫軟件在制作時可以結合使用)舉個例子,比如你想做由于矩形逐步變幻成三角形的動畫,如下圖
05.跟隨動作與重疊動作(follow through & overlapping)
跟隨動作意思是動作的一個延續性,比如人物戴著紅領巾向前跑然后停止,在停止的時候,紅領巾是向前飄動的;重疊動作是指人物在運動的時候身體的關節并不是同一時間開始同一時間結束的,而是兩者有重疊,如果同時開始和結束的話會很機械。
06.緩入緩出(slow in & slow out )
這個是最常用的動畫法則,后面的動畫曲線中也會詳細說明這部分的,因為所有物體從靜止到開始運動再到最后停止,都是一個逐步加速在逐步減速到停止的一個狀態,當然機械物體的運動除外,比如傳送帶上的貨物,就屬于勻速運動。
07.動作弧線(action arc)
人物運動時會受到骨骼的影響,會呈現弧線運動,如果是直線運動就會生硬很多,舉個例子
如果你看到了很明顯的區別,卻還是不知道為什么的話,我們來這樣看
是不是瞬間豁然開朗
08.次要動作(secondary action)
次要動作我們可以理解為細節,主要是點綴主要動作的,比如用右手敲門,左手自然下垂,會給人感覺很放松,如果左手握拳會給人氣憤的感覺,如果眼睛四處張望看起來就比較像小偷,這里的左手和眼睛就屬于次要動作,可以豐富主要動作,但是不要太過,適當即可。
09.節奏(rhythm)
節奏可以使畫面更有張力。有快有慢,有急速,有慢鏡頭,這些都可以使畫面充滿節奏感,很平均的畫面就會很機械。
10.夸張(exaggeration)
夸張是可以增加對用戶的吸引力的,和現實一模一樣不是最優的選擇,合理的講動畫夸張化往往可以呈現出更好的效果。(可以用擠壓與拉伸,加快或放慢等等)
11.實體圖(real figure)
可以理解為立體的形態,一個圓很平,但是立體的球就會有空間感,同時要保持畫面的平衡。
12.吸引力(apparl)
畫面有創新,獨特,可以讓用戶過目不忘,吸引力強
以上要合理的運用才會達到最好的效果,不要機械的使用,說完了動畫法則,我們看一下動畫曲線。
首先動畫曲線有什么作用?在哪里可以調節呢?
動畫曲線可以現實對象運動的仿真效果,比如加速運動、減速運動、勻速運動、自由落體等等;在圖表編輯器中為某個屬性添加動畫時,可以在速度圖表中查看和調整動畫曲線,從而影響對象的變化速率,使其更真實。
正式學習動畫曲線之前我們先說一個小知識
關鍵幀
時間軸上的關鍵幀會有一些不同的形狀,關鍵幀圖標形態取決于關鍵幀之間的時間間隔的插值方法。當圖標的一半為深灰色時,顏色較深的一半表示這一側附近沒有關鍵幀,或者其插值由應用于前一關鍵幀的定格插值所取代。
我們一起來看下有幾種圖標類型
讓我們來一一解釋,先看最簡單的四個
圓形:
自動貝塞爾曲線(對兩側速度不同的關鍵幀進行柔和的連接)下面動圖可以看出兩者的不同對比
正方形:
定格(硬性變化)在文字變換動畫中常用
凹三角和凸三角都是停止關鍵幀,可以通過右鍵點擊切換保持關鍵幀來調整
凹三角是曲線關鍵幀轉換為停止關鍵幀后的狀態;凸三角是普通線性關鍵幀轉換為停止關鍵幀后的狀態
了解了關鍵幀之后我們來看看速度曲線與值曲線
最后我們來學習下動畫曲線,動畫曲線可以分為:線性動畫,緩入動畫,緩出動畫,緩入緩出動畫,我們逐一來舉例說明
線性動畫(linear)
動畫從開始到結束一直是同樣的速度運動,也就是勻速直線運動,看起來不是很自然,例如現實生活中的傳送帶就是勻速直線運動。
緩入動畫(ease-in) -加速運動
動畫的速度先慢后快,動畫曲線先是陡峭再平緩,例如現實生活中汽車啟動,但是緩入動畫會在速度最快的時候停止,會很突然,有點像被磁鐵吸住的感覺。
緩出動畫(ease-out)-減速運動
與緩入動畫正好相反,緩出動畫的速度先快后慢,例如現實生活中汽車慢慢停止
緩入緩出動畫(ease-in-out )
速度由慢變快再變慢,例如現實生活中的汽車啟動加速到停止。但是默認的F9對于實際效果來講并不夠,還需要我們把對比調節的更強,如下圖我們可以看到調整前后的不同節奏感。
總結一下,單純的線性動畫與緩入動畫和緩出動畫并不太符合正常的運動規律;當緩入緩出動畫相互結合時才會更符合正常的運動規律,但是時間上的掌握也是需要慢慢琢磨的,希望此篇文章可以給你帶來一些啟發
文章來源:站酷 作者:凌旬
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
傳統的汽車中控系統,大多是相對固定的硬件組合到一起,共同構成中心的控制臺,控制著包括導航、收音機、播放器、空調等在內的各種功能。一直到 2000 年前后,汽車的中控臺都一直以這樣相對固定的物理按鈕和旋鈕來搭建,用戶也可以通過官方或者第三方服務,來升級功能,比如將磁帶播放器升級為CD播放器乃至于內嵌電視功能等等。
隨著移動端技術的發展,iOS 和 Android 等智能軟件系統的完善和提升,汽車的中控系統也不再受限于固化的硬件功能。平臺化的軟件體系讓中控系統有了更多的可能性,影音娛樂開始更加豐富,而已然完善的移動端觸摸式交互生態,則為汽車中控以屏幕替代物理按鈕打下基礎,各類原本存在于手機電腦的新型的 APP 、功能、服務也逐漸出現在汽車中控系統上,而特斯拉更是一步到位,以一塊巨大的觸摸屏徹底革新了中控的交互體驗,OTA 升級,有機多樣的UI交互,徹底釋放開了汽車中控交互體驗上的想象力。新的問題出現了,新的方法在迭代,新的趨勢也得到了印證。
寶馬奔馳保時捷等頂級的汽車廠商大都在中控臺的設計上,探索了各自的可能性,國內廠商也毫不示弱,不過其中絕大多數的系統都基于我們熟悉的 Android 或者是 Android Auto 作為基礎來進行定制和優化,而蘋果則基于自家 iOS 生態,在 2013 年推出了 iOS in the Car 服務,目前正式名稱為 Carplay。而目前各大廠商所青睞的 Android Auto 也上在 Carplay 發布之后所跟進并發布的。
目前,Carplay 和 Android Auto 都已經上行業標準級別的存在,今天這篇文章, 我們先聊聊 Carplay。
CarPlay 車載系統旨在令用戶通過汽車制造商之原生車載系統來使用、操控iOS設備并發揮其功能。該產品的首個版本計劃于2014年發布,最早出現在一些制造商的汽車展覽上。
Carplay 本身并非完全獨立的存在,它本身會和 iPhone 一起聯動,讓iPhone 成為你的車鑰匙和輔助管理系統。
CarPlay 車載讓你能夠在駕駛車輛時智能、安全地使用各項 iPhone 功能。你可以開導航、打電話、收發信息、聽喜歡的歌。所有這一切,都整合在車內的中控顯示屏上。在 iOS 14 中,CarPlay 車載還引入了全新的 app 類別和適用于 CarPlay 車載儀表盤的自定墻紙。
Carplay 以 蘋果自身在移動端交互和用戶體驗上的深厚積淀,總結和梳理出了一套可供學習和值得參考借鑒的規范。
這些規范對于需要考慮車載使用場景的廠商以及正在布局車載移動端軟件或者系統的廠商的設計師而言,都有著相當的參考和學習價值。
作為車內輔助、操作、娛樂的中心,Carplay 可以直接連接到汽車中控的觸摸屏上,提供基于 iOS 的相關的服務和應用。Carplay 的整體設計圍繞著車內駕駛這一使用場景,而它的設計原則也圍繞著這一場景來規劃:
Carplay 當中會有提供音頻內容的 APP,諸如 Podcasts,網絡電臺,新聞,音樂,體育節目等等,這些服務和 APP 將會通過內置的屏幕顯示,并且借助最常見的「標簽欄+列表」來呈現基本的框架,并且必須包含「播放」界面。盡管這類服務和應用是借由內置的界面框架來呈現,但是依然有值得注意的要點:
使用此圖標代表明確的、本地的的內容。
使用此圖標來標識在線的內容,確保用戶知道內容來自網絡,并且會耗費網絡流量。
在進行音頻內容播放的時候,Carplay 會顯示「正在播放」的界面,并且會使用如下界面:
在設計這個相關的界面功能的時候,需要注意以下幾點:
Carplay 能夠內嵌到不同廠商的車中,自然也可以控制車內的硬件。這一部分的硬件驅動支持通常是由廠商提供,并且借由 Carplay 內的界面,提供統一的交互體驗。
VoIP 也就是基于 IP 的語音傳輸功能,而在 Carplay 中,VoIP 應用主要借助 Siri 服務,并且全由 Siri 操控,它并不為用戶提供直接的交互界面,因此無需專門設計 UI 界面。
它支持閱讀信息和編寫/回復消息,不過需要用戶授予權限
當你的 APP 有推送信息未讀的時候,通常會在 APP 的右上角增加一個紅色的小紅點標識,并且其中會有一個白色數字用來標識未讀信息的數量。
對于錯誤信息,應當妥善處理,并且絕對是要在必要的時候才推送報錯信息。
在加載內容的時候,使用黑屏或者靜態的界面,可能會讓它整體上看起來像是死機了一樣,者可能會導致用戶離開。
在 Carplay 當中,有2種常見的導航模式:
橫向導航。通常使用標簽欄來進行導航,不同內容橫向排布,用戶可以快速點擊不同標簽切換。
分層導航。用戶在屏幕上點選不同選項,通往不同的子界面。其中地圖應用采用的是這種結構。
音樂類應用可以使用橫向導航,也可以使用分層導航,在設計導航的過程中,應當注意:
全面的測試,是確保應用可用性的重要前提。
無論音頻是否是你的 APP 的主要內容呈現形式,你都需要了解用戶對于音頻有哪些期待,并且盡量去貼合這些需求。
在管理汽車功能的頁面當中,廠商提供的功能和數據將會無縫的接入到 Carplay 當中,比如氣候、網絡、GPS 等等。當數據不可用的時候,盡量提供合理的響應方式。
比如當汽車通過隧道,沒有 GPS 信息的時候,盡量以不打擾的方式來告知用戶。
3.3、iPhone
Carplay 是和 iPhone 連接起來使用的,并且在程序數據上也相互兼容互通,只是Carplay 本身提供的是簡化之后的 UI ,并且針對駕駛的場景進行了優化。
支持 Carplay 的車輛通常會有物理按鈕和旋鈕,它們可以作為 Carplay 交互的輔助。當物理按鍵作為用戶的主要交互介質的時候,通常至少會存在一個 Siri 按鈕,導航控件,選擇控件,以及后退控件。
這些控件和 Carplay 應當高度對應,無論是播放、暫停、上一首/下一首 都應該做出準確的相應。具體可以參閱:MPRemoteCommandCenter
當 Carplay 投射的屏幕不支持觸摸的時候,還有基于旋鈕的焦點式交互方式,當用戶擰動旋鈕的時候,能夠讓光標從一個元素切換到另一個元素,激活并交互。
文章來源:優設 作者:陳子木
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶可以通過內置的觸摸屏來與 Carplay 直接進行交互。高保真屏幕可能會比低保真屏幕,在交互效率上更高,更低延遲,支持更多手勢。Carplay 的交互基本采用的都是單指交互,具體可以參考下方列表:
在設計交互的時候,盡可能少地使用觸摸交互,避免用戶在駕駛過程中分心。
Siri 是 Carplay 的基本功能,無干擾的語音讓用戶和程序之間的交互更加自然和安全
即使看不到 Carplay 的屏幕,依然可以使用方向盤上的語音命令按鈕來激活 Siri。激活后,Siri 會針對語言進行處理和分析,并且轉換為可用的指令。
具體可以參與 SiriKit 編程指南。
動畫可以讓屏幕上的元素,擁有一層附加的視覺效果。如果方法得當,動畫還能呈現狀態,提供反饋,增加用戶直接操控時候的感覺,并且告知用戶可視化操作的結果。
成功的品牌設計并不只是把 LOGO 塞到 APP 當中,出色的 APP 能夠巧妙地使用字體、配色和圖像來構建獨特的品牌形象。
關于這方面的設計,可以詳細參考 iOS 設計規范中的 配色、版式以及 圖標和圖像 這三個章節。
在品牌設計上,Carplay 要求設計師:
通常,配色可以提供交互性,提供視覺連貫性,并且對界面賦予生命力。
Carplay 支持不同像素密度不同縱橫比的顯示,但是這也意味著在實際布局設計的時候,要格外小心,盡量讓你的設計在不同的屏幕分辨率和長寬比之下,都顯得足夠正常。
Carplay 采用的字體是蘋果的 SF 字體。你可以在這里下載到字體:
和 iOS 類似,在 Carplay 當中,屏幕分辨率也分為 1x 2x 和 3x。
每個 Carplay APP 都應該有一個顯著突出的圖標,確保在駕駛的時候可以輕松點擊到。
如果你設計的 APP 當中,需要的圖標并不存在于系統圖標當中,或者系統圖標與你的 APP 并不匹配,可以自定義圖標設計。
系統本身內置了許多小圖標,服務于日常各種不同的任務,通常這些小圖標會使用在導航欄和標簽欄當中,盡可能使用這些內置的圖標。
上拉菜單是一種特定的彈出菜單,通常從屏幕底部彈出,并且包含2個以上的選項。不過在 Carplay 當中應該盡量避免使用上拉菜單,在 iPhone 上倒是可以使用它,但是不要在 Carplay 中顯示。
在內容加載的過程當中,請勿讓屏幕保持靜止,或者空白,使用活動指示器確保它看起來沒有靜止。
如果可以的話,可以在加載過程中提供對用戶有幫助的信息。具體可以參考 UIActivityIndicatorView
警告會用來通知用戶一些關鍵性的信息,警告通常由標題、可選信息以及一個或者多個按鈕組成。除此之外,警報的視覺系統是靜態的,無法自定義。
警告最小化呈現。由于警告本身會破壞用戶體驗,所以請在重要的情況下使用警報。
相關開發人員可以參考這份文檔:UIAlertController
按鈕通??梢杂脕碛|發一些特定的操作,具有可自定義的背景,并且可以包含標題和圖標。和 iOS 不同,Carplay支持的按鈕樣式非常有限。
標簽是推送到屏幕上的一條短消息,這個標簽可以顯示任意數量的靜態文本。在設計標簽的時候,盡量保持標簽清晰易讀。具體開發可參考UILabel。
導航一般在屏幕的頂部,通常導航欄右側會有返回按鈕,中央是標題。有時右側會有其他的可交互的控件。
滾動視圖讓用戶可以瀏覽到更多的內容,用戶可以用滑動或者輕拂來進行瀏覽信息。
標簽欄通常出現在屏幕頂端,并且用戶可以借此快速切換。邏輯上標簽欄可以包含無限多的 Tab,但是可見的標簽數量,會根據實際顯示尺寸而有所不同。
表單通常會以單列的樣式存在,干凈有效地呈現大量信息。
在具體的表單條目的設計上,也有詳細的規格要求。
默認樣式,左側可放置圖片,并且標題也是靠左對齊的。具體參考文檔:UITableViewCellStyleDefault 以及 UITableViewCell
副標題樣式。這是包含標題和副標題的一種樣式,兩者靠左對齊,上下排布。具體參考文檔:UITableViewCellStyleSubtitle 和 UITableViewCell
Value1 樣式。標題靠左對齊,副標題靠右對齊。具體參考文檔:UITableViewCellStyleValue1 和 UITableViewCell
Value2 樣式。標題和副標題文本都靠右對齊,具體參考文檔:UITableViewCellStyleValue2 和 UITableViewCell
文章來源:優設 作者:陳子木
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這一年,更多的是關于交互的思考。如果說界面是外表的話,那么交互就是其靈魂,只有交互合理的產品,才能夠讓用戶更好的使用,而交互細節成熟的產品對體驗上的提升則更巨大。寫這篇的起源是平日在設計評審時或多或少會遇到以下的交互問題:
在思索如何能夠盡量避免遺漏細節的過程中,發現狀態可見性原則對于這些細節有比較重要的指導意義。這一原則想必大家都不陌生,但可能并沒有引起大家的重視,且網上大部分文章對于此原則的解釋都比較簡短。因此在探索過程中產出了這篇比較詳盡的關于狀態可見性原則的深度解讀。目錄如下,重點已圈好~
大家可以根據上述目錄來進行選擇性閱讀,當然全文閱讀也是極好的~
我們在開頭闡述了可能遇到的一些問題。而以上情況的出現,都源自于我們在設計時思考的不夠全面,很多時候都忽略了某些情況下的設計,導致有些關鍵體驗上的問題未被發現。我們可以看下微博和知乎在斷網下點贊的例子。
可以看到,微博在斷網下依然有點贊動作的反饋,且沒有任何異常提示,這樣會導致用戶大多數以為此次操作是成功的。但知乎在斷網情況下,點贊是不能生效的,且有消息提示“異常提醒”。這樣的話其實就能夠讓用戶明白此次操作沒有成功。在這種場景下,微博的點贊就屬于“不恰當的反饋”。而這些設計,都可以歸因于狀態可見性原則的范疇。
讓我們先了解一下狀態可見性原則的定義。這是尼爾森(Jakob Nielsen)-人機交互學博士,于1995年1月1日發表了「十大可用性原則」。而可用性原則位于十大可用性原則之首。
雖然只有這么一句話,但其中包含的意義比較重大。我們現在所使用的系統,都運用了狀態可見性原則,如果沒有,那么系統幾乎會掉入不可用的現象。而系統在使用體驗上的差異性,有很大一部分原因也在于可見性原則運用的好與壞。
我們來舉一個生活中的例子來幫助大家理解。當你手機沒電,你用充電器連接手機時,在連接的一瞬間(恰當時間),手機狀態發生變化(恰當反饋)讓你成功獲取手機正在充電的信息(系統狀態)。如果在某個環節出現問題,比如連接上手機2分鐘后(不恰當時間),手機狀態才發生變化。那么你肯定會認為哪里出現了問題。這就是狀態可見性原則的基礎運用。
那么我們如何能夠深刻理解一個原則呢,最簡單的做法就是將其拆分,并結合實例理解。下面通過原則拆解來進行深刻解讀。
我們將拆解分為以下三個部分,下面的篇幅會更詳盡地進行說明
時間在這里指的就是系統的響應時間,而合理則可以理解為時間的長短。這句話可以理解為從用戶執行操作到反饋出現的間隔時間是否正常,是否有影響到用戶的正常體驗。
當我們在進行打字輸入時,我們敲擊鍵盤的同時,屏幕上就會出現對應的文字。而如果出現文字的反應時間過長,我們就會感覺到明顯的卡頓,此時的響應時間就會變得“不合理”。
根據Robert B. Miller在他的研究《人機對話的響應時間》中以及其它相關資料,制作得出以下結論圖
以上是人機交互響應時間的總覽,接下來細節深化每個時間點對應的操作。
我們先看100ms以內的。我們平時使用的小組件動畫,比如說按鈕反饋,勾選反饋,以及其他需要瞬時反饋的操作,基本都是在100ms內完成的。
在看100ms-1s區間的,在這個期間進行的動畫,用戶能夠很清晰的看見動畫發生的過程,而又不顯得遲鈍。我們普通UI中應用的動畫則大部分在100ms-500ms這個范圍內。【為何在這個時間內呢,個人的理解是:對于發生在UI界面內的動畫,100ms內的動畫太快,人只能感受到開始和結束的狀態,不能看見發生過程,因此一般大于100ms,而500ms是用戶即時感知的最長時間,因此小于這個范圍內的動畫較為合理】
最后看下1s-10s這個區間的:在這個階段,最有可能進行的就是相關頁面的加載行為,或者某些小型文件的上傳和預覽。針對于這種情況,我們一般會在加載進行中,添加對應的加載效果,來緩解用戶的焦慮和等待情緒。
最后則是10s以上的,一般用于大型文件的上傳或者弱網環境的加載過久。
大約10秒鐘后,用戶的情緒將達到極限,內心將開始產生疑惑,超過10秒,用戶往往會離開網站,而不是試圖繼續恢復他們一開始想要做的事情。
因此,我們在進行系統設計中,需要對超過這一時間內的行為,進行對應的反饋。比如加載超過10s的時候,我們是不是需要給用戶提供離開的選項,或者提示用戶重新加載這樣一種行為。我們可以看下高德和美團在加載中的例子
我們可以看到,在到達10s后,美團自動給出了一個當前網絡不可用的,請檢查網絡的提示,并終止了加載進程。而高德地圖則是沒有任何提示,自動結束了加載。相比之下,美團能夠讓用戶明白為什么中斷了該進程,也就擁有了更好的用戶體驗。
且對于一般情況下都超過10s以上的形式,我們無須讓用戶停在當前頁面等待。比如微博或者抖音的視頻上傳,一般會消耗比較久的時間,因此當用戶點擊上傳后,都只會留一個小地方來展示上傳進度,用戶隨時可以做其他的事情,這樣有效避免了用戶長時間等待的問題。
以上則是常見的在合理時間內的表現,但目前也存在一些特殊場景:
比如時間延遲,圖蟲和微博會在用戶停留幾秒后增加評論區域的顯示,根據用戶停留時間,判斷用戶對當前內容感興趣,以此來增加用戶的互動。
類似的這種設計還有抖音的評論分享,當超過一定時間后,評論圖標自動變為朋友圈圖標。而在PC端,也有一個很典型的案例,不知道大家注意到沒有,就是關于hover的延遲。我們在使用hover顯示時,一般可能大家認為中的都是鼠標移動上去立刻顯示,但在某些應用場景中,延遲300ms再進行hover顯示,會更合理,舉例如下:
大家可以看到上圖,在你快速移動時,是不會顯示下方的補充說明的。在停留大概300ms后,則會出現提示。其實這里對應了兩種用戶場景。第一種是快速移動的場景,有利于用戶切換不同頁簽時不打擾用戶;而在停留時,用戶則是想要看更詳細的信息。因此在這里使用hvoer延遲既能不打擾用戶,也能滿足用戶的不同需求。
這里是之前做的一個案例,就是由于沒有考慮到hover延遲,從而使得用戶在快速移動時會讓hover的信息產生干擾。
以上的內容都是針對于時間的詳細解釋。只有了解在對應的時間系統處于哪種狀態,我們才能夠滿足狀態可見性原則中“恰當的時間”這一原則。從而更好的對系統進行對應的交互設計,讓用戶在使用產品時獲得優秀的體驗。
按照目錄接下來應該講反饋了,但在反饋之前想先提及一下頁面信息呈現。只有當用戶理解當前頁面所表達的信息后,才能夠進行接下來的操作,從而得到對應的反饋。在這里主要提及兩個點,一是核心信息,二是預期信息。
一個用戶界面如果沒有核心信息的呈現,那么給到用戶的反饋是很弱的,用戶第一眼都不知道從界面中能夠獲取什么內容。尤其是在移動端核心信息的呈現更為重要:
比如上述兩個案例,在界面上只呈現了最重要的內容,移除了其他全部干擾內容,讓用戶更聚焦。當然平時接觸到的不可能全部是這種頁面,我們在頁面信息呈現較多時,也需要進行重點信息的呈現。在這里放一個動態的案例讓大家對比一下重點區分的形式
除了核心信息,還有預期信息的呈現,說白了其實就是元素的可交互性與不可交互性。當事情按照用戶預計的方向運行時,用戶會有強烈的控制感。在PC上,用戶可以使用鼠標懸停來判斷該元素是否可交互,但在移動設備上,用戶只能通過點擊來判斷是否為交互元素。
這就要求我們在移動端設計時需要清晰地考慮到可交互元素與不可交互元素在外觀上的區分。我們先來看一個關于微信的例子:
大家可以看一下微信的數字呈現,除了默認的黑色字體外,是不是還出現了一種淺藍色字體。而你點擊藍色字體,則發現可以調出動作面板。而黑色字體則不會。
這就是利用顏色的區分來引導告知用戶部分信息的可點擊性。而目前關于移動端可交互元素如何設計,如何讓評審時不再聽到“你這個看著像不可點的”這句話。根據相關資料和過往項目,總結出以下幾點:
首先根據目前人們的認知,基礎控件類型的都是可以操作的,比如按鈕,導航欄、底部標簽欄等。下圖為工作中做的一些基礎控件:
拋開基礎控件,剩余重點是文字類。文字類在不加任何提示的情況下,用戶會默認為不可操作的對象。一般我們通過下列幾種方式來體現其可操作性。
介紹了可交互性,那么再來講一下不可交互性的元素。不可交互的部分有一個非常重要的點,就是應該需要讓用戶認識到該元素為什么是不可交互的,不對用戶造成困擾。
不可交互的處理方式一般分為置灰和隱藏兩種方式。我們首先來看看置灰無反饋類別的使用場景:
還會存在一種置灰有反饋類別的使用場景,而對于非按鈕類狀態的置灰,經過資料和相關調研,發現可以根據其使用場景來設置是否給出反饋,比如網易云音樂的音樂列表場景。
除開置灰的另一種場景就是隱藏,工具類應用對于隱藏這個操作使用得較多,比如我們平時使用得sketch和figma也基礎應用了這一操作場景。
好了,說完了用戶界面的相關內容,只有了解上述內容,讓用戶明白界面哪些是可交互,哪些不可交互。才能夠讓用戶進入到下面的“恰當反饋“。
在這里我先講手勢操作,因為手勢操作是前提,然后再講反饋設計。
反饋的前置條件是操作,我們在加餐中已經告知了如何引導用戶操作,但在移動端中可能還包含一些隱藏的手勢操作,利用不同的手勢可以達成不同的操作響應。我們來看一下這個案例:
這是即刻對同一個控件進行了兩種手勢的定義,但大部分用戶可能對于第二種長按手勢的功能其實是不知道的。這樣的功能來說對于新手用戶來說是處于不易發現的“彩蛋“功能。又比如下方的知乎雙擊點贊,以及最近微博更新的連續點擊效果:
如果我在這里不進行事先說明,可能部分用戶還不知道。但好在上述兩種方式的設計前提是建立在不影響主功能使用的,用戶依舊可以通過其他操作來完成。
說這些的是為了表明,我們在設計反饋時,要考慮到手勢操作的用戶認知程度,一些特殊的手勢操作雖然能提高用戶的操作效率,但用戶如果都不能發現,何談提高效率,更多的作為“隱藏彩蛋”功能出現。因此我們在產品設計中要盡量注意去使用常規手勢而不是非常規手勢。下列歸納了部分手勢:
大部分情況下我們其實使用“點擊”和“滑動”就可以完成大部分系統操作。如果我們需要加其他操作最好在用戶第一次進入時加上引導。
當然,在某些情況下,我們是需要將常用的操作,轉化為不常用的操作,來防止用戶發生誤操作,比如下方的keep在運動中停止的按鈕,考慮到運動的場景,單純的點擊很容易被誤觸。因此keep對“結束”這一功能采用“長按+引導”的方式來防止用戶誤操作:
OK,接下來正式進入反饋這個環節。
反饋就是當用戶對于系統進行相關的操作后,系統對應引起的一系列變化。反饋從類型上可以分為視覺反饋、聽覺反饋和觸覺反饋。
聽覺反饋和觸覺反饋在這里簡單講一下,一般在我們的設計中使用的比較少,聽覺反饋目前用的最多的是語音助手和地圖類工具在息屏時后的反饋,比如下方的高德地圖反饋,能夠讓你在進行開車或騎行時,即使關掉屏幕,也能通過語音反饋知道此時正在導航中:
而震動反饋最開始是在蘋果內的應用,包括你在知乎上進行點贊,appstore下載應用,都會進行對應的反饋,讓你的感受“實體化”,提升使用體驗。
而目前在其他app上,也逐漸開始了應用,比如大家熟知的微信“拍一拍”,在拍頭像的同時會伴隨著震動反饋;以及iMessage的反饋,它會在煙花綻放的那一剎那有震動反饋,給用戶更真實和有趣的體驗。
好了,最后來講視覺反饋,視覺反饋是我們目前最常見的反饋,也是平日里接觸最多的交互反饋。視覺反饋可以分為以下三種類型:
控件反饋舉一個最常見的案例,就是我們按鈕的狀態變化,我們通??梢钥吹綘顟B有以下幾種變化:
大家對上述按鈕的狀態可能都比較熟悉,但在很多情況下可能會忽略一些其他控件的點擊狀態,比如我們看下方的一個例子:
這是點擊“收藏”按鈕時兩個不同點,一個沒有點擊狀態的感應,一個有。這其實也是之前我比較疑惑的一個點,從功能性上來講,它并不影響后續的使用。但這種點擊狀態在官方文檔上到底有沒有明確說明呢,特意去查了下官方文檔,在IOS中的設計原則中有這么一段描述(黑字加粗部分)
并且在IOS的原生應用中,基本都遵循這一原則:
雖然有這樣一條原則說明,但并沒有特別嚴苛的規定我們必須要這樣做,因為即使沒有這種反饋,也不會特別影響用戶的整體操作,更多的是帶來使用體驗上的提升。因此大家可以在平日的使用中根據產品的設計階段,特別是在優化體驗的時候,可以考慮這一部分。接下來我們看一下頁面反饋
當我們觸發的可交互元素不涉及頁面的跳轉,那么此時的反饋多數用于當前頁面本身的反饋。而一般是由alert、toast、action sheet等來構成的。我們需要利用這些控件來對用戶的相關操作給出反饋,比如下面躺平和夸克的例子,當用戶操作時有對應的后續反饋:
再來看一個有對比性的例子:
上圖是QQ音樂和網易云音樂對于退出賬號這一場景采用的不同控件,那么這兩種控件哪種使用得更為合理。從用法上來說,兩者都沒有錯誤,但目前的移動端設計在這個場景逐漸傾向左側的設計形式。因為從使用程度上來說,左側的Action sheet 的級別會弱于右側的Alert,對用戶的打斷程度會更弱,且Action sheet可以通過點擊空白處來取消,而右側的alert在移動端大部分都是模態的,只能通過操作來取消。
因此對于這兩種需要根據使用場景來進行區分。一般來講,Alert更適合用于對系統操作有一定風險或者很重要的操作【需要引起用戶強烈注意】,Action sheet則相對于Alert更輕量化,對用戶的打斷較弱。
關于頁面反饋這部分還有些控件有比較細致的區分。比如toast提示適用于更輕量化的場景反饋,因為全網彈窗相關的內容也有很多了,在這里不細講。但大家在使用控件時需要注意下列IOS官網上的一個原則規定:
原則上盡量不去打斷用戶,給予輕量化的信息反饋,除非是某些需要引起特別注意的場景。關于這個的舉例,我們可以看下京東和淘寶在加入購物車的例子:
淘寶是使用傳統的toast來進行加入成功的反饋,而京東則是利用一個小動畫來達到告知用戶已加入成功的提示。相比之下京東的提示則更加有趣和輕量。因此我們除開傳統的控件外,也可以利用動效來進行更為恰當的反饋。最后,我們來講一下頁面跳轉反饋:
這可能是大部分設計師都一直忽略的問題。在我們的設計說明中,也一直很少涉及到頁面跳轉的單獨說明。而開發一般會按系統默認的方式去設計。
那么在頁面跳轉中,一般涉及到以下幾種方式,左右切換,上下切換以及聯動性切換。很多設計師其實并沒有太注意左右切換和上下切換的區別方式。那么在這里進行詳細的說明下:
最常見的跳轉就是左右切換。在大多數情況下,我們一般采用的是這類跳轉方式。且該方式應用在大多數應用程序中:
這種方式也跟我們平時的視覺順序有關,我們一般看事物都是從左到右的順序來進行的。這種場景普遍存在于界面中,比如一般性的頁面切換,功能進入等;接下來我們繼續講上下跳轉:
根據資料總結上下跳轉的場景應用有以下:
1.觸發的新頁面相對于當前頁面是臨時性的操作 (微信發紅包,新添加群人員,新建筆記本,新建話題等),一般用上下的跳轉方式:
2.跳轉前后的頁面存在比較緊密的強關聯性,想讓兩個頁面的聯系更緊密,可以采用這種方式。比如QQ音樂和網易云的歌曲列表和播放頁之間就采用的這種方式。
大家觀察一下,同樣的上下跳轉方式,為什么網易云的整體看上去更加自然柔和呢,除了運動節奏外,還因為在整體的運動過程中,網易云以唱片為聯動點,將兩個頁面聯系起來,從而更加地柔和,這也就是接下來要講的第三個跳轉方式:聯動跳轉。
這種跳轉方式一般會以頁面中的某個控件作為前后頁面的承載點,從而讓兩個頁面的聯系非常緊湊,視覺上更加舒適美觀,但同時開發難度也比較大,適用于比較固定的某些頁面。除了我們熟悉的APP Store外,我們看下面兩個案例:
聯動頁面的好處,就是能整體的頁面銜接的更加柔和自然。我們也可以發現,在很多的概念設計中,用得最多的過渡動效也是這種聯動設計,比如下方來自Sang Nguyen的概念設計
因為要想提升頁面的整體柔順效果,目前來看聯動的方式是最為好的,但同時其實現難度也較大。
這是原則拆解的最后一個小部分,其實就是通過前面兩部分的拆解,原則已經講述得差不多了。而讓用戶了解,在我看來,就是我們給予用戶的反饋能夠讓用戶看懂。
首先看下這個案例:
大家可以看到文案一的整體表述,其實會讓用戶迷茫,到底哪個是撤回的操作,哪個是取消的操作。而文案二整體的文案和按鈕都有非常清晰的指向,能夠讓用戶清晰理解其意圖,達到繼續操作的目的。我們再看一下開頭的知乎反饋的例子,其實設計上還可以更進一步:
通過文案二的進一步設計,能夠讓用戶在知道操作異常的同時知其原因,幫助用戶快速解決當前問題。其實文案這部分的內容,在個人看來,一是盡量少用專業術語或者含糊不清的詞語來反饋給用戶;二是在告知用戶出錯時,盡量附帶簡短的原因說明。這樣用戶更好地去理解想要表述的內容。
OK。寫到最后,你會發現以上所講的內容,其實都是在闡述一個原則——“狀態可見性原則:系統應該在合理的時間內通過適當的反饋,始終讓用戶了解正在發生的事情?!毕嘈糯蠹椰F在已經知道什么是合理的時間,什么是恰當的反饋,以及如何讓用戶理解。通過這樣的一個原則,我們能夠更好地去考慮到交互上的細節呈現,例如一個可交互元素的不同狀態,點擊后的反饋等。其實原則整體與我們的很多知識相關聯,這也是知識體系的一部分。
最近學到的關于知識體系的認知,就是你在學習一個新的知識的同時,能夠把你的舊知識串聯起來,這樣你的整體知識才不會碎片化,而是體系化。通過這樣的方式,你在透徹認知一個原則的同時,能夠聯想到各種關聯場景,從而能夠把整體的設計及交互做得更完善。
最后想說:經典的原則之所以經典,你會發現雖然它是很早之前提出來的,但具有時代超前性。在面對如今產品應用場景和形態都發生巨大變化的當下,它仍然適用。
文章來源:站酷 作者:進擊的M
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
想要探索未來趨勢,必然需要了解當下和過去的事情。因此,我們需要先來回顧下 2020 年的變化吧。
2020 年因為疫情,讓協作、云端、即時通訊、遠程會議、AI 智能等等,成為了遠程辦公的必需品。目前,疫情在國內已經獲得了控制,后疫情時代已經到來,許多最初沒有的習慣,在發現新的工作模式更加有效率后,也就繼續保留了下來。這些保留下來的習慣,也將在 2021 年會有更進一步的發展。
在視覺設計層面,各大設計語言陸續推出了新的設計版本,更為突出各自設計風格,以建立自己的視覺護城河。谷歌發布了 Android 11,Apple 發布了 iOS14,微軟持續宣傳他的 Fluent UI 設計理念。在國內的辦公領域,騰訊文檔推出了類似 Fluent UI 設計理念的風格,石墨文檔依舊保持獨特的東方韻味,飛書發布了飛書文檔,繼承飛書本身簡潔的 UI,以及活潑的插畫風格。
谷歌的 Android 11
基于 Material Design 設計的 Android 11,裝飾上運用了簡潔的幾何圖形,UI 細節上開始趨向圓角的運用,色彩方面選擇了更為協調的配色,對比之前版本純度有所降低,顯得更為高級。
蘋果的 iOS 14
UI 設計延續原有的風格,清晰的字體,大圓角的運用,加上豐富的動態效果,并且新增了許多貼心的新功能,例如懸浮播放視頻、主屏幕的 Widget。
微軟的 Fluent UI
這是微軟為跨平臺,而提出的設計解決方案。支撐設計概念的關鍵詞有深度、材質、動畫、光線等等,這聽起來感覺與 Material Design 特別相似。不過在最終的視覺呈現上微軟會更接近于真實世界,例如,透明的毛玻璃效果,或更為立體的圖標等。
Behance 和 Dribbble 在 2020 年出現了許多以 3D 插畫為主視覺的設計方案,因為技術的發展,設計師借助 Figma 或 Dimensions 就可以輕松的創作所需的 3D 素材。關鍵的這不是設計方案中的“花瓶”,因為在 Mac 的最新系統 Big Sur 中,已經開始運用了 3D 圖標,相信在以后 3D 的運用場景將會不斷的被挖掘出來。
2020 年初時在 Dribbble 流行起來的一個風格叫“新擬態”,這是將投影運用到極致后出現的效果,正如作者所說的:“讓我們想象一下,如果在移動界面設計中,投影的形式發展的更好的話,那將來的界面將會是什么樣的,這是我的愿景?!毙聰M態在視覺上表現確實很驚艷,為此 Android 還制作了一個新擬態的 12 宣傳視頻,但是,主觀感覺這應該很難廣泛運用到實際產品當中。
設計專注于表現內容,這是從包豪斯到現在一直遵循的規則,而這個理念也將會持續下去。設計目標終將是需要把關鍵信息傳達到用戶手中,讓用戶知道自己為什么在這,這里有什么,并且能到哪里去。
技術的發展,形式也一直在發生變化,提升信息傳達效率,這已經不單是平面設計專屬。學會運用動效、交互或智能推薦等綜合的方法,來達到設計目標,會是將來常用的設計手法。
在以前由于屏幕分辨率太低,窗口四角正常會運用直角,因為圓角會出現鋸齒或者模糊,影響界面美觀。而先如今移動端屏幕質量早已超過紙媒的印刷技術,圓角也開始被廣泛的運用。另一方面圓角在之前的認知中,是兒童的專屬,是更為親和力的表現形式。而經過近幾年的發展,這個偏見正在慢慢改變,因為圓角也可以做的很高大上,也能設計的很潮流。
蘋果總是第一個吃螃蟹的公司,Mac 的最新系統 Big Sur 整體變得更加圓潤,窗口四角從以前的 10px 增加到 20px,并且全新的控制中心也沿用了 iOS 14 的設計風格和設計布局。值得再一提的是,微軟 Win10 的概念稿中也開始嘗試運用起了圓角。所以這個趨勢是蠻值得關注的一點。
設計師常常會陷入形式主義,而忽略了本該表達的內容,特別是在插畫上。也許這個道理每位設計師都懂,但為何還是會前仆后繼的撲倒在自我滿足的陷阱中呢?也許原因中會有一點是,當內容過于直接表達,或者元素過于普通,就很容易讓作品變得毫無趣味,這就是矛盾所在了。
那如果設計師既不想脫離內容,又不想設計出乏味的設計,怎么辦呢?這就需要讓插畫具有含義,而不是淪為純粹的形式。優秀的插畫所承載的信息量,能夠遠比文字或界面 UI 來的豐富。
包豪斯有個教學目標,“培養感覺清晰,認知準確的設計師”。因此在包豪斯的基礎教學中,會讓學員研究各種材料的不同屬性。在 UI 設計當中,我們也能制作出各種各樣的材料,在擬物化的時代就能證明這一點。但在 2020 年初時,當某位設計師發現了一種新材料,并把這種材料運用到了 UI 設計當中,一時間火爆整個社區,這就是上面提到的“新擬態”。
這世界是充滿可能的,所以我相信在未來還會有更多的材料會被發現,或者被以新的方式使用。例如,在 2020 下半年又有一種風格開始回歸“毛玻璃”,其中我們所知道的釘釘,在釘釘 6.0 的設計概念中就融入了毛玻璃的效果。在社區中,毛玻璃也被運用到 UI 的各種場景中卡片、彈窗或圖標等。實話實說,毛玻璃的材質的確能增加許多品質感。
這里所說的自然,是能讓人感到熟悉和安心,是以人為本的設計。王敏老師說過:“科學求真,藝術為美,設計從善,設計可以作為結點,讓真善美實現統一。”連接人與產品之間的紐帶是 UI 界面,它需要承載不僅是信息內容,還有用戶體驗,因此,以人為本的設計終會贏得用戶的喜愛。
自然運動效果,不是那種大開大合的酷炫效果,而是讓界面過渡更為自然合理。想要讓界面體驗更為自然,那必然要遵循真實世界的物理規則,例如,重力、摩擦力、向心力、浮力等動態效果。
科學技術的快速發展,讓我們感覺未來近在咫尺,但又十分迷茫不知何去何從。我相信承載 UI 的媒介,必然不僅僅是現在我們所使用的各種設備。VR、AR 或全息影像等技術的發展,將使得 UI 設計會有更多的可能性。賽博朋克 2077 也許真的離我們不遠,那種滿世界無處不在屏讀的社會,怎樣的設計才能真正滿足需求呢?這是我們需要長期思考的問題。
在 2020 年各大廠都推出了暗色調模式,這已成了現如今 APP 的標配。除了深色模式外,以后還會在可視性、場景和實現成本等因素方面,更進一步的打磨。
雖然在 2020 年不管是社區,還是實際項目,許多設計師都開始熱衷于 3D 插畫,就連蘋果微軟也不例外。但是 Google 卻繼續堅守自己的設計風格,扁平的裝飾性插畫,例如 Android 11 就運用簡單的幾何圖形進行裝飾,相關的插畫也是更多運用的扁平風格,這種堅持必然會有其重要的原因。
裝飾性插畫在各種屏幕的適配性更廣泛,并且在繪制成本和實現成本方面也會更有優勢。在屏幕媒介還沒發生顛覆性改變前,我認為扁平的裝飾性插畫在未來將還會大放異彩。
后疫情時代的遠程辦公,我們需更加考慮如何緩解合作的疏離感。如何拉近人與人之間的協作,打破遠程的空間桎梏,讓合作更具沉浸感。這時情感化的設計就能充分體現它的價值,例如,這幾年開始火的 emoji 頭像,或者各種表情包,它們讓溝通的雙方產生情感共鳴,而不是面對著冷冰冰的屏幕。
皮克斯運用技術的創新,提升了質量和效率,從而改變了整個動畫的歷史。對于我們來說,未來的插畫需求會越來越多,并且還要求獨特的創新性,這就需要有更優的解決方案。
Ant Design 的 HiTu 在 SEE Conf 的時候提出了解放圖形化生產力,那就是將插畫各部件組件化,這有效的提升插畫效率。然而在插畫庫的維護方面,還需要設計的創新。因為效率的提升,讓設計師能有更多時間,專注于更有創造性的工作,然后將新的創意理念融入部件,最終完善整個插畫組件庫。
凱文凱利在《必然》里討論了關于未來的生活方式,他認為我們的未來環境會充滿各種屏幕,它將會在各種事物的表面出現,屏讀會從我們起床開始到晚上睡覺,一直出現在我們視野中。如今的人們每人都有各種各樣設備,因此,多屏協同辦公是必然的趨勢,不管你是與人合作,還是獨立工作。
萬物互聯已經是很久的話題了。在 2020 年華為的鴻蒙系統,發布了跨設備進行的分布式交互,實現了多屏協同。我感覺,這將是很重要的一步。
身份認證是信息安全最關鍵的一步。我們通常會用身份 ID 加密碼進行登錄,并且為了驗證你不是機器人,還會加上人工輸入驗證碼,如果再有其他的設置選項,那我們的登錄交互就會被拉的很長,有時還會出現登錄失敗的情況。在如今浮躁的社會,許多用戶也許在前幾步就已經失去了耐心。
移動設備擁有有豐富的傳感器,并且精度也在逐年的提高。隨著指紋、面部、虹膜等等技術成本的降低,這些技術也開始越來越普及化。如今使用新的識別技術,很輕松就能完成各種身份認證。
當年喬幫主一直堅持的單手操作,而如今,手機屏幕逐漸越來越大,單手操作已是一種奢望。為此,各手機品牌想方設法的改變交互方式,為的就是能實現單手操作,并且為此作為宣傳的噱頭。iPhone 輕點兩下 home 鍵或向下輕滑虛擬 home 鍵,就能讓整個內容向下移動半屏,從而方便單手操作頂部功能。
想達到目標的第一步,就是辦法讓拇指能觸及到功能。但我們還需要進一步思考的是,拇指本身的靈活性并不高,并且也只能是單點觸控,那怎樣的交互形式能滿足日益復雜的交互需求呢?
屏幕可拓展,將會是移動辦公的重要轉折點。不管是需要長篇編輯的文字,還是畫板無限大的表格,或者是需要強大美化功能的演示,這都需要足夠大的屏幕才能有更優的體驗。折疊屏的出現讓手機能代替平板,滿足更多使用場景。折疊屏目前由于成本的原因,在大眾眼中還屬于新事物。但我相信成本在未來不會是問題,更重要的問題是,屏幕形式的變化,對于交互來說將會有哪些影響,并且如何挖掘其中真正的潛力。
自 MIUI12 隱私功能發布后,APP 訪問隱私頻次大幅下降,這使得應用的行為越來越規范,也因此獲得了用戶、國家相關機構和媒體的認可。
在凱文·凱利的《必然》中描述了這樣的一個未來景象,我們的各種狀態將會被設備所跟蹤,大到你的地理位置,小到你的心跳,你所經歷的一切都將被上傳到網上,設備能通過對過往的分析,給你推薦各種商品或服務。這很美好,但同時也存在許多風險。在《竊聽風云》的電影情節中,就是由于先進的竊聽技術,造成了各種無法預估的災難。所以這是一把雙刃劍,在技術進步的同時,我們也需要時時刻刻關注隱私的保護。
在 2019 的 Google I/O 大會上,Google Lens 展示的 AR 點菜功能可以智能識別用戶掃描的菜單并將美食網站上的相關推薦直接呈現在屏幕上。當識別到小票信息時,可快速提取小票上的金額,且可自動彈起計算器快速幫助用戶計算人均消費,節省人工計算的時間成本。
在辦公場景下,如何幫助用戶減少無謂的工作,讓更多精力專注于內容。把排版規范、素材提取、文件管理、功能查找等瑣碎的事情,交給人工智能來完成。在以前工業時期有機器的賦能下,人們的生產效率進行了一次飛躍,而下次的效率提升將會是人工智能。
是否希望自己學會“量子閱讀法”呢?也許 5 分鐘實現十萬字快速閱讀不是夢。Neuralink 發布了 Link V0.9 版的腦機接口,并且已經在動物上進行實驗,他們通過把一塊微芯片植入猴子的大腦,然后讓其通過意念玩電子游戲。雖然這產品在人類普及的概率幾乎為零,但是這也算是人類向前邁出了一大步。
這只是一個開始,未來的設備將不局限于可穿戴,而會是與人體緊密相連?;蛟S可以想象一下,在未來人們會像在醫院預約掛號一樣,在科技公司樓下排隊更新升級身體里的“機械器官”。
如果要說接下去哪個技術變革,將對我們生活工作產生重大影響,我認為將會是 VR 和 AR。在溝通方面,體驗將會變得更為真實。遠程溝通常常效率很低,其中很重要的一點是空間的距離感,而空間的距離會產生雙方鏈接的不穩定性,因為雙方無法達成眼神、肢體等信息的交流,有時候一個眼神或者動作就能完成的事情,需要反復的語言交流,甚至會陷入各種尷尬的境地。
除了溝通之外,在工作、生活、學習等領域,VR 和 AR 也將會有更多可能,媒介的屬性不再是二維平面,而是三維空間,這使得它能提供更為沉浸式的交互體驗。
受疫情影響,遠程辦公、網上購物和在線學習等進入了更多人的生活中,這已經成為當今的人類文化,我相信這只是剛剛開始?;赝?10 年前,智能手機還是新鮮事物,而如今已是大眾商品,在未來 10 年后回看今天,某些事物也將是相同感受。
依稀記得上大學時 4G 時代的到來,旁邊的人都在說網速多快多快,聽歌看視頻一點都不卡。
而如今 5G 開始普及,網速也再次提升,但外界對其的評價褒貶不一,其中最為常見的話題就是“5G 對我們的生活將會有什么改變呢?”,有人覺得它只會提高我們每個月的話費,也有人提出 VR/AR 全景直播、高清遠程會議、無人機作業、自動駕駛等技術將會更為成熟。
不管如此,5G 在 2020 年度過各種坎坷,最終普及到我們每個人身上。5G 對許多領域都會有質的影響,特別是依賴網絡環境的場景。其中就有辦公領域,大文件上云、協同辦公或遠程會議,5G 將會給這些場景提供更好的體驗,也會讓更多可能變為現實。
這篇文章是對當下的思考,也希望能對 2021 年的工作帶來些許幫助。在這過程中越是總結,越是對未來的趨勢感到迷茫,一篇文章并不能囊括所有內容,不足之處也希望理解。在未來或許會有數不盡的黑天鵝,也可能因為技術爆炸,使得新的潮流突然的興起,未來是無法預測的,所以,就讓我們一起擁抱變化吧~
藍藍設計的小編 http://www.syprn.cn