
轉載請注明:學UI網》B端設計:智能銷售平臺
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
a
Ryan Farina之前主要負責iTunes還有蘋果開發者產品的設計,以及蘋果TV的設計。也在Facebook和ins擔任過UX設計師,是一位攝影愛好者,平時特別喜歡攝影和足球,除了twitter好像沒有其他的社交賬號。
Twitter上的賬號也主要分享生活為主,很少去分享設計相關。個人作品博客也目前主要分享攝影作品為主。
Ryan Farina的作品集非常簡單,標準的蘋果風,直接首頁封面放了幾個效果圖作為背景。
和很多設計師不一樣,項目介紹就是一個簡簡單單兩句話說清楚項目背景,如上圖就是介紹蘋果Testflight這款軟件是針對蘋果開發者發布測試的一款產品。
這是他之前負責Facebook個人頁面的作品設計,也是采用簡約的排版和布局。
以及蘋果TV和iPad等產品的一些UI界面設計,蘋果的設計師也并沒有我們想的那么輕松,很多官方APP都需要設計,同時還要考慮眾多平臺的設計和統一。
在職期間主導的iTunes產品設計,這些作品集雖然有點老,但是設計師作品集的包裝上還是有很多值得我們學習的,沒有太多花里胡哨的東西,主要是在板式上凸顯設計功底。
所以從這個設計作品包裝中,我們其實可以學習到,今天一個作品集并不是一定要放很多套路化推導,好的作品你不需要說話,隨便看看設計細節都能被認可。
a
Craig Dehner是和Jony lve一個團隊設計師,他們一起打造了蘋果iOS設計系統,現在在蘋果應該11年了,他是在2009年以實習生身份加入蘋果的。你現在用的蘋果系統就是他參與的,并且是核心設計師。是Cincinnati大學畢業的。
他平時也和很多公司進行過項目合作,包括airbnb等這樣的知名公司。目前定居在舊金山,是一個戶外愛好者。
他的代表作有很多,最出名的就是siri,從0到1構建了siri的設計生態,雖然目前我覺得siri還是不夠聰明和智能,但是在設計層面,還是無可挑剔,特別是動效的設計。
他也參與了airbnb的設計,合作過很多知名項目,不知道是官方合作還是個人項目合作。
他幫助airbnb打造了搜索租房以及選房頁面的體驗,應該是從交互視覺到動效完成了整體的體驗升級。
整個作品集的包裝遵循了蘋果一貫的簡約風格,細節和動畫也處理的非常逼真。
同時他作品集還有lyft打車應用,這個應用相當于美國的滴滴。他主要和他們負責UI設計和動畫設計,以及最早的概念海報。
打車頁面設計,整個打車處理的動效非常逼真和真實,流程也非常順暢。
整個動效非常細膩,路障的設計,周圍的人的設計,以及拐彎場景等等非常逼真,同時也能感覺到智能科技的感覺。
以及在iPad端的一些體驗設計,一如既往的蘋果風格和高級感。
他也是iOS9的主設計師,這里想分享一點,用模型機的技巧。很多設計師用樣機,但是完全看不到界面任何細節,樣機選擇一定要高質量高清,能看清楚設計細節。
這個是一款比特幣銀行的電子錢包設計,區別于其他錢包設計,在安全性上做的比較精致。
電子錢包開鎖界面非常的酷,不像傳統的輸入密碼打開那樣,而是非常逼真的方式,像打開保險箱一樣的方式。
整體設計區別于其他的比特幣錢包,運用黑色的設計,非??幔瑫r頁面很多地方都體現出了安全感,讓用戶放心。
早期的蘋果TV引導頁面,以及蘋果系統登錄激活的頁面都是這位設計師做的,真的是蘋果元老級別的設計師。
整個的電視界面設計,一如既往簡約風格。在AR空間里面做設計,體驗上有手機上有很大的差別,但是設計師駕馭的非常的好,也很有創新。
我很喜歡他的扇形菜單設計,非常的科技感,戴上VR眼鏡后,仿佛世界就在你眼前。
最后看幾張他的作品包裝,版式很簡單,左圖右文沒有很復雜的包裝形式,但是每個作品細節深入人心。
s
蘋果設計團隊人不多,每年也會招募一些非常優秀有潛力的實習生,Julia Liang是美國UC Berkeley大學的一名女生,目前在蘋果實習,可能現在轉正了,我們一起來看看什么樣的水平能夠進蘋果實習。
這是這位設計師大學期間設計的海報設計,是一個印刷海報,雖然很簡單,但是里面細節很豐富。
平時一些手繪設計,會畫一些自己學會的東西。看的出來是一位熱愛生活的設計師。
大學也經常接一些私活項目,貌似還給中國一個律師網做過LOGO設計。
這是他平時的一些LOGO設計,紅十字會的一些公益設計。
在校期間的一些學校校徽探索,可以看出設計師雖然設計作品沒有那么商業,或者很強技法,但是在設計創意表達上還是有很多天賦。
另外一個APP設計,從作品集中看出應該是全程參與其中,并且做了很多調研的工作。
是一位UX思維非常強的,作品集有大量設計分析和思考的過程。
一些落地方案的設計,在他這套作品集里面我看到了很多和我們國內作品集不一樣的地方,設計師在發現問題解決問題思路上很閉環,并沒有很虛的套模塊。
a
今天分享的幾個蘋果設計師作品集,主要幫大家打開眼界,好的作品集不一定要有很多流程很多套路,只需要在作品里面能體現你的思考,你的視覺表現力即可。好的作品本身就會說話,切忌為了追求形式化而用錯力。
原文地址:我們的設計日記(公眾號)
作者:sky
轉載請注明:學UI網》國外 百萬美金作品集。長啥樣?
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在 B 端設計領域中,不管是內部用戶、產品、設計師、開發,還是外部產品、設計師等,總能聽到關于界面「屏效」方面的訴求或吐槽。
「屏效」狹義理解是「界面過度留白」;廣義理解,「屏效」源自諧音“坪效”,指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數)。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。
為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感,于是我們展開了「屏效」專題的設計探索與實踐。「屏效」專題探索主要以「探索」與「實踐」相結合的方式展開,將實踐過程中反復驗證有效的設計策略沉淀成設計手冊,同步將部分功能進行工程化,確??梢蚤_箱即用。
用戶聲音|不同的故事相似的訴求
面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%;認為提升屏效對體驗有提升的終端用戶占 50.6%。
外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里,其中就有 2 點提到關鍵字「效率」。
通過了解不同用戶和產品類型發現,不同的用戶在工作場景的產品使用中有著相似的特征:
案例收集|發現問題,大膽假設
縱觀 B 端產品界面,發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例,為了逐步突破問題,選擇以數據產品中覆蓋率極高的表格為設計切入點,通過線上跨產品多端地毯式的體驗走查,發現表格三個層次的問題:
視覺、交互層在無需理解業務場景和用戶目標的情況下,都較容易發現,屬基礎問題,但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。
綜上我們提出假設:為提高屏效,可從視覺、交互、信息三個層次解決
視覺層為提高信息查閱速度,可以通過提高信息密度;交互層為提高操作速度,可以縮短當前手勢到目標之間的距離;信息層為提高信息被理解的速度,可以通過重組織等方式。
基于假設,我們進行了進一步的桌面研究,查閱論文等書籍,尋找設計理論的驗證和指導。
競品分析|尋找實踐證據,謹慎驗證
我們知道視覺上界面留白過多(過疏會增加滾屏成本,過密因易串行而影響閱讀效率),以表格「行高」為例,探索各表格在字號、字高和行高的關系,因為不同字體的同字號實際像素高度會有差異,因此選擇的是字高(即文字垂直高度的視覺大?。┒亲痔柣蜃中懈?,決定留白的兩個重要因子是字高和表格行高,以次推演,界面元素和元素間距的留白關系,探究在視覺層怎樣的留白率能保證甚至提升屏效。
以數據產品中的表格為例,通過直接和間接競對的方式,分別從數據的查閱(視覺)、分析(交互)維度進行功能點和設計細節上的比對,來看看優秀產品是如何解決屏效問題。
直接競對:內部用戶口碑較好的產品 A、B外界競對:同領域的 Tableau、網易有數、金山、微軟表格;間接競對:谷歌郵箱、AntD 等的緊湊主題的常規列表(一維表格)
通過競品分析可以發現,數據分析領域的表格留白率普遍較低(信息密度高),尤其是金山和微軟的電子表格,其次是同類面向數據用戶的 Tableau、網易有數,而谷歌郵箱等工作臺常用的常規列表緊湊版本中,留白率和數據領域的電子表格不相上下。
緊湊版的使用場景也常常是面對數據量巨大的信息呈現,通過切換緊湊主題,提升信息的快速瀏覽,而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大,而在實際案例實踐中,也已經將表格行高優化至 30px,克制的使用留白。
除此外,競品其他層次的設計也做了比對,總結來看整體設計做法:高密度、少屏數、少留白等。
文字陷阱:中英文字高不等于字號
舉個容易犯錯的競品參考是,谷歌在緊湊版主題下字號 12px,列表行高是 28px,但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠,缺乏呼吸感。
原因在于谷歌的 12px 是英文字體,實際字高只有 10px,而 AntD Table 的語境是中文字偏多,實際字高有 12px,所以留白的差異在于一個是 18px(28-10),一個是 16px(28-12),這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高,而非「字號」和表格行高,進一步推演,決定界面留白的是「元素視覺高度」和「元素間距」。
論文查閱|尋找理論證據,謹慎驗證
研究表明,低密度認知負荷低,但高密度任務完成率高,用戶更喜好
參考資料:論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》
對于信息,用戶需要需要閱讀(視覺),思考和理解(認知),需要點擊按鈕、操作鼠標和打字(行動),在人機工程學中,統稱為負荷。即認知(記憶)負荷、視覺負荷、動作負荷,即分別對應用戶體驗設計的三個層級,信息/視覺/交互。而負荷所花費資源從多到少依次為:認知 > 視覺 > 行動。
認知負荷,舉個例子,看了但不一定懂了。你是否有這么一種體驗——刷抖音,雖然很多(信息密度小,輸出效率低),但可以一直刷下去并且刷很久;而看一門 C4D 教學視頻,即使就短短十來分鐘(信息密度大,輸出效率高),但是卻要看上半天。因為刷短視頻時,你的輸入效率遠高于作者的輸出效率,而看一門 C4D 教學視頻時,你的輸入效率遠低于作者的輸出效率??墒?,輸出效率是客觀的,輸入效率是主觀的。如果輸出效率很高,你可以通過提高自己的輸入效率(比如讓自己成為 C4D 專家)來跟上作者,從而變強;否則輸出效率很低(信息質量低),你的輸入效率很高(很專業),信息于你而言都是無效的。
假設負荷總量不變的情況下,那么以上三類場景界面需要對用戶負擔分配大致如下,官網品宣類需要低認知成本,低視覺負擔,視覺要求高,用戶才會被吸引過來閱讀,甚至酷炫的交互更能增加互動體驗而帶來的趣味感,比如蘋果官網,信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息,而 B 端應用因為是專業使用,首先認知方面隨著員工的專業度提高而降低,因此可以通過提高視覺負擔,來降低行動負擔,進而減少操作用時,當然最佳情況是三個維度能整體降低負擔,讓總負擔降低,就需要更多設計巧思了。
面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中,設計師常用的 Top 3 做法為:【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。
通過以上的探索,我們可以確定的是,B 端產品面向專業人員的工作界面設計中,提高屏效可從視覺、交互、信息三個層次進行,視覺層-高密度,即提高屏幕信息密度;交互層-低跳轉,通過減少頁面跳轉、手勢與常用操作的距離等;信息層-有效性,通過重組織或輔助信息幫助用戶理解,甚至提供幫助手冊等以提高用戶專業能力。
基于以上的總結,對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,尋找運營機會點。
如下表格經過高屏效策略優化前后對比圖,優化前相同維度下不同人群數量的對比需要視線來回跳動比對,而優化后的表格內容,更符合用戶看差異場景下分析目的數據查閱,視線鎖定相同維度,即可快速比對數值大小。
下面以視覺、交互、信息三個層次解剖設計過程背后的思考。
視覺層|高密度-克制的留白
眼動理論:研究表明,人眼最小可視視角 0.3 度,水平最大眼動舒適轉動區 30度,垂直最大眼動舒適轉動區 55度??傻贸鋈搜圩钚∽R別范圍 12px,水平視野舒適眼動寬 1200px,垂直視野舒適眼動高 2200px。參考資料:論文《基于眼動交互的用戶界面設計與研究》
如圖,縮小表格行高的同時,目標信息之間的眼動距離隨之縮短,在眼動舒適區內看到更多信息,便于信息的高效獲取。
理論基礎:菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型,它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為:T=a+blog2(D/W+1),W為其中目標的大小;D為到目標的距離;T為移動到目標所用最短時間。參考資料:菲茲定律
表格單元格借助交互狀態,增加懸浮出現的信息組件,前置顯示目標單元格明細信息,同時通過交互出現的指示器輔助行列信息的獲取,高頻操作考慮手勢位置放置,縮短與操作目標的距離,以提高整體操作效率。
理論基礎:交互設計四大策略「組織、刪除、隱藏、轉移」參考資料:《簡約至上》
用戶為了對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看,根據用戶目標,將關聯性大的數據放置相鄰列(即將要對比的人群放置列頭),即可快速查閱,減少眼跳距離。
設計趨勢中常見的大字體大留白界面,但在 B 端場景中,面對緊張的工作節奏,時間和注意力變得尤為可貴,相對而言,基于復雜度守恒定律, B 端信息量大且高頻訪問的產品中,「用得快」要比「看得美」更重要,「高密度」「低跳轉」詮釋的即是「空間換時間」,少一次點擊,少一次跳轉,少一份等待,就多一份時間和效率。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
元宇宙是一個全新的數字世界,我們可以想象的任何東西都可以存在。在元宇宙中,每個人都可以是創造者,對于創意工作者們而言,這或許是一個全新的機會。
今年 3 月 10 日,游戲公司 Roblox 通過直接上市的方式登陸紐交所,首日股價上升 54.4%,市值超過 400 億美元。這是元宇宙的概念首次出現在上市公司的招股書當中。而在一年前,Roblox 的估值僅為 40 億美元。
“4 月份,Roblox 還入選了美國《時代》雜志的先驅企業榜單,5 月,JP Morgan 評級報告首次覆蓋 roblox,首次評級為增持,最新目標價為 85.00 美元;LightShed partners 授予 roblox“買入”評級,目標價 85.00 美元;morgan stanley 維持 roblox 評級為增持,最新目標價為 87.00 美元;6 月,Truist Securities 維持 roblox 評級為買入,最新目標價為 103.00 美元?!?
后續,隨著 Roblox 的上漲,元宇宙的概念引爆了資本圈。除了號稱元宇宙第一股的 Roblox,Facebook、谷歌、亞馬孫、迪士尼等公司也在紛紛布局元宇宙;國內市場中,騰訊、網易、字節跳動等互聯網大廠也已悉數入局這一賽道。進入 2021 年以后,元宇宙這個賽道似乎突然變得十分火熱,不少公司紛紛打上布局元宇宙的標簽。
2021 年 3 月以來的部分相關融資
元宇宙就是數字世界,Metaverse,即 meta(超越)+universe(宇宙)的結合。元宇宙也可以理解為人類意識中的虛擬世界, 元宇宙不是特指某一款應用或產品,它更像是一個概念,通過數字化形態承載的平行宇宙,并且我們一定要明確,元宇宙并不僅是游戲,只是游戲是目前最佳形態的載體。
圖 1 @READY PLAYER ONE
通過虛擬增強的物理現實,呈現收斂性和物理持久性特征的,基于未來互聯網,具有鏈接感知和共享特征的 3D 虛擬空間(由 AR,VR,3D 等技術支持),它的本質是:平行宇宙。簡單來說,就是現實世界的“人造映射版”,我們在虛擬世界中與一個全新的身份一一對應,并且不會間斷地“生活下去”?!陨鲜蔷S基百科對元宇宙的描述。
元宇宙與真實世界的關系
最終,我們將一直連接元宇宙,擴展我們的視覺、聽覺和觸覺,將數字項目融入物理世界,或者隨時進入完全身臨其境的 3D 環境。該系列技術統稱為擴展現實(XR)。
1. 元宇宙在當下對創作者們的挑戰
圖 2 @Link Li
關注空間場景
元宇宙對接物理世界最后的挑戰在于人的感官體驗,我們的視覺、聽覺和觸覺都需要得到反饋,對于創作從業者來說,我們可以優先關注空間視覺的表達,在虛擬的世界中,人們會首先關注空間中的場景,如何低成本快速構建空間場景或許是新的機會。
圖 3 @Mattey
提升創造力
除了技術能力,創造力會是創作者的主要生產力,因為元宇宙會迎來一大波創作浪潮,設計師們和藝術家們將在同一個舞臺大展身手,而更優質的設計作品更具生命力和競爭力。
圖 4 @Artman Studi
拓寬技能拓展知識面
創作者們需要關注許多新的學科內容還有拓寬自身技能,而不僅僅只局限在眼前所見,元宇宙要構建的是整個世界整個社會,而不是某一個產品某一個系統。
圖 5 @Anatolii Babii
轉換思維方式
設計師們需要關注的不僅僅是用戶,而是所有的玩家——元宇宙中的所有人。這就需要轉換思維,如何更合理、更高效、更便捷、更自由、更美觀、更具象、更豐富、更公正。
其一,通過算法、算力提升驅動渲染模式升級,提升游戲的可觸達性。
其二,通過區塊鏈、AI 技術降低內容創作門檻,提升游戲的可延展性。PGC(Professionally-generated Content 的縮寫,專業生產內容)內容方面,第一方游戲內容是建立元宇宙的基礎場所,而目前 3A 游戲在場景和人物建模上都需要耗費大量的人力、物力和時間資源。為實現元宇宙與現實社會高度同步,算法算力以及 AI 建模技術的進步有望提升 PGC 內容的生產效率。
其三,通過 5G、云計算技術支撐大規模用戶同時在線,提升游戲的可進入性。元宇宙是大規模的參與式媒介,交互用戶數量將達到億級。
其四,通過 AR、VR 等交互技術提升游戲的沉浸感。
圖 6 @由英偉達 Omniverse 的 3D 能力渲染出來的場景和人物
2018 年的時候,法國藝術團體 Obvious 就通過“生成對抗網絡”算法(GAN)創作了一幅名為《愛德蒙·貝拉米肖像》的作品,在紐約佳士得以 43.25 萬美元的價格拍出,成為第一件進入大型拍賣行的人工智能藝術品。
圖 7 @人工智能藝術品:《愛德蒙·貝拉米肖像》
另一種 AI 會更為智能,比如微軟小冰,經過 22 個月學習人類繪畫之后的作品甚至能夠得到央美老師的肯定,面對這樣的人工智能,創作者可能需要思考的是如何利用如此強大的技術為元宇宙帶來更為豐富和精彩的內容,探索一些規則上的玩法上的東西。
圖 8 @小冰在接收了“自由”和“束縛”兩個刺激源后創作的作品
圖 9 @當輸入“在人類討厭你之前,你就自己消失”
Decentraland 和 Cryptovoxels 等基于區塊鏈的虛擬世界是下一個前沿領域,它們是社交網絡、游戲、商業和創造力的混合體。他們也是元宇宙的聚會場所。
圖 10 @Cryptovoxels
那么,究竟什么是基于區塊鏈的虛擬世界?Decentraland 和 Cryptovoxels 都是使用以太坊區塊鏈構建的用戶擁有的平臺(世界)。用戶通過購買稀缺的土地 NFT 來擁有世界的一部分。由于世界上的土地由 NFT 表示,這意味著每個地塊都是獨一無二的,并且可以輕松跟蹤所有權。
圖 11 @Decentraland
Decentraland 是一個 3D 空間,您可以在其中構建虛擬世界、玩游戲、探索充滿 NFT 藝術的博物館、參加現場音樂會等。如果您安裝了 MetaMask 擴展程序,它可以在標準的 Web 瀏覽器中運行以訪問加密貨幣和 NFT 功能。您可以買賣房產,為藝術畫廊創作和出售虛擬藝術品,或者建造世界。有幾家公司已經在 Decentraland 投資了土地,其中一些公司可能愿意支付熟練的建筑商來開發它。
圖 12 @Decentraland
3D 場景設計師也能夠通過為元宇宙設計場景體驗而獲取豐厚的回報。
身份:擁有一個虛擬身份,無論與現實身份有沒有相關性。
朋友:在元宇宙中擁有朋友,可以社交,無論在現實生活中是否認識。
沉浸感:能夠沉浸在元宇宙的體驗當中,忽略其他的一切。
低延遲:元宇宙中的一切都是同步發生的,沒有異步性或延遲性。
多元化:元宇宙提供多種豐富內容,包括玩法、素材、美術素材等。
隨地:可以使用任何設備登陸元宇宙,隨時隨地沉浸其中。
經濟系統:與任何復雜的大型游戲一樣,元宇宙應該有自己的經濟系統。
文明:元宇宙應該是一種虛擬的文明。
元宇宙八大要素
1. Roblox:通過開放式的平臺和創作激勵機制,由玩家主導建立了一個去中心化的世界,且不斷擴大規模
Roblox 與 Steam 等游戲商店不同的是,每個玩家不僅可以挑選喜歡的游戲,還可成為創作者,在游戲引擎 Roblox Studio 上用簡單的工具搭建出游戲、劇情、角色和空間,邀請其他用戶進入體驗,并從中獲利。在 Roblox 中,玩家使用一種名叫 Robux 的虛擬貨幣購買游戲和道具,開發者亦可以將掙到的 Robux 換成現實貨幣,這極大地激發了玩家的創造力。
圖 13 @ROBLOX CORPORATION
2. 堡壘之夜(Fortnite):通過一種核心玩法吸引用戶,然后不斷添加新元素,通過豐富多樣的聯動和增加可玩性讓用戶加入到更多場景中
堡壘之夜近年來也在元宇宙概念上發力,希望打造超越游戲、更寬廣的虛擬世界。堡壘之夜本是第三人稱射擊游戲,但因其豐富的玩法和聯動備受玩家青睞。
2020 年,不論是邀請饒舌歌手 Travis Scott 開辦虛擬演唱會,還是與一系列漫威 IP 達成夢幻聯動,無不是充滿想象力和野心的嘗試。今年 4 月,堡壘之夜的開發者 Epic Games 也在新一輪融資中達到了 290 億美元的估值。
圖 14 @travis-scott-fortnite
據外媒 BusinessWire 報道,IDC 最新數據顯示,2021 年第一季度全球 VR 頭顯出貨量同比增長 52.4%,Oculus Quest 2 及 HTC Vive Focus 等 VR 一體機占據了絕大多數的發貨量,本季度市場份額為 82.7%,高于 2020 年第一季度的 50.5%,VR 游戲和健身的日益普及提升了消費者對 VR 的認知,而 Facebook 等公司則使這項技術更易于使用。
圖 15 @IDC 中國
基于區塊鏈的元宇宙中的許多平臺仍在研發增強現實(AR)和虛擬現實(VR)技術,這將使用戶能夠在虛擬空間中獲得充分互動和沉浸感。
普華永道預測,到 2030 年,VR 和 AR 技術將為全球經濟帶來 1.5 萬億美元的增長,而 2019 年為 465 億美元。
圖 16 @Ger?eküstü Ger?eklik, Sanal Evrenler: Metaverse
AR/VR 對創作者而言也是一種可能性
面對潛力巨大的 VR/AR 市場,設計師其實大有可為,目前市場上 VR/AR 產品還沒有非常有競爭力的,而且在這種硬件和軟件高速發展的時刻,優質的設計內容可能是一個很大的突破口,UX/UI/動效/3D 在 VR/AR 的應用非常值得設計師思考和實踐。
VR 繪畫也是近年很火的一個部分,不少創作者已經嘗試用 VR 進行藝術創作了,VR 技術硬軟件的升級也使得 VR 繪畫的視覺效果越來越好,并且可用性和可能性也大大提升。
圖 17 @法國藝術家 Anna Zhilyaeva 的 VR 立體繪畫創作過程
Uniswap 一雙襪子賣 16 萬美元,推特創始人五個單詞拍出 250 萬美元,加密藝術家 Beeple 在佳士得的 NFT 拍賣作品獲得 975 萬美元出價……
最近瘋狂刷屏的除了元宇宙就是 NFT 了,什么是加密藝術,以其價值瘋狂的增長而受到越來越多人的追捧,即使很大一部分人并不明白那是什么。
圖 18 @前 5000 天-6900 萬美元高價的數字藝術家 Beeple 的作品
1. 什么是 NFT
首先,什么是 NFT?NFT 是 Non-Fungible Tokens 的縮寫,意思是不可互換的代幣/非同質化代幣,具有不可分割、不可替代、獨一無二等特點。可互換的的代幣具有相同的屬性、價格,就像是你的 1 比特幣和我的 1 比特幣的本質是一樣的。但 NFT 都是獨一無二的,NFT 可以代表一幅畫,一首歌,一項專利,一段影片,一張照片,或者其他的知識產權。在這個領域,NFT 起到的是專利局的作用:幫助每一個獨一無二的東西進行版權登記,幫助其識別專利。
NFT 示例
2. 人們為什么愿意相信 NFT 的價值
為什么人們愿意相信 NFT 的價值呢?并且愿意為其爭先恐后的花費巨額的真金白銀。說到這里不得不提一下區塊鏈技術,NFT 這種獨特的數字資產的所有權在區塊鏈上進行跟蹤,例如以太坊。目前大部分的 NFT 交易都是通過以太坊來進行的,可通過使用以太坊的區塊鏈作為公共分類賬進行跟蹤。也就是說你買到的任何數字資產你可以非常容易的證明你擁有它的所有權,NFT 一次只能有一個所有者。所有權通過其他令牌無法復制的唯一 ID 和元數據進行管理。然后你可以再把它賣出去,那么這個 NFT 的鏈上會記錄你是曾經擁有過它的人,如果你是這個 NFT 的創造者,這個 NFT 每轉售一次你都可以獲得一定的版稅收入,而且這是全自動的,在一些平臺上你可以躺著收錢。就是因為它的這一種對創作者的友好性和對所有者的唯一性,使得越來越多的人加入 NFT 的創作和買賣,當越來越多的人信任它,它的價值就會越來越高,然后就會吸引更多的人信任它的價值,這就是一個循環。
下圖是 OpenSea(第一個也是最大的加密商品點對點市場)近期排行前列的 NFTs:
圖 19 @OpenSea 截止至 20210913
CryptoPunks 作為 OG(元老)依然穩定在前三,并且最近出現的另一種頭像 Bored Ape Yacht Club 也是在以太坊區塊鏈上空投出來之后馬上受到了人們的追捧,這兩者的成功都是完美契合了人們的社交需求與審美需求,人們購買他們就像購買收藏品一樣,這是一種數字藝術品的交易。
圖 20 @CryptoPunks
圖 21 @Bored Ape Yacht Club
值得一提的是一周之內橫空出世并且到達第一位的 Loot,單看下圖是不是不太理解它為何這么火?
圖 22 @Loot
其實這是一個以以太坊為基礎的黑底白字的文字游戲,該項目是一個隨機冒險者裝備游戲,由 8000 個 NFT Loot 包組成,戰利品是隨機生成并存儲在鏈上的冒險者裝備。統計數據、圖像和其他功能被故意省略以供其他人解釋。還不懂?不懂就對了,不懂也是它火的原因之一。Loot 成功的原因當然不止這個讓人一臉懵逼的噱頭,它與其他 NFT 不一樣的地方在于其可擴展性和創造性,意思是任何擁有它的人可以根據 Loot 字段來進行想象和創造,它是可編程的而不是創造者已經制作好了的固定 NFT 只能進行買賣,這就極大的刺激了任何參與者的創作激情。
現在已經出現了一系列令人眼花繚亂的 Loot 衍生品,比如比 Loot 更為簡單的數字 NFT The N Project,同樣的黑底白字,并且只有數字 0 到 14,推出三天就市值達到 4000 萬美元,一躍成為排行榜前十。
圖 23 @The N Project
不得不說 Loot 和 The N Project 的成功會令很多人不解,其實這也是元宇宙發展中出現的先驅性產品,它們沒有精美的畫面,但是這有助于降低開發人員的復雜性和開發成本,同時為用戶提供自由、創造力和表達能力。正如 Loot 的口號“你可以做任何你想做的事”也正好契合了元宇宙的精神。Loot 的出現為元宇宙帶來了一種底層規劃的可能性,共同創造并且海納百川,不正好契合了元宇宙的多元化屬性?
3. NFT 對于藝術家來說是一個自由創作的舞臺
借著 NFT 的風潮,藝術家在這里找到了一個自由創作的舞臺,你可以不再局限于表達你的“甲方”想要的東西。沒有風格、流派與地區限制,你只需要做你自己,盡可能多的發揮自己的想象力,這些都可以成為 NFT。如果你的 NFT 作品被買家購買收藏,恭喜你,你會獲得對應的報酬。你的作品永遠不會被“剽竊”,區塊鏈可以帶給你足夠的安全感。
圖 24 @Foundation
不知你對于用黃金買蘋果是怎樣看待的?
比特幣是是一種價值儲存手段 (SoV)。它是不可篡改的、也是世界上最去中心化的資產,它也是最難攻擊的鏈。它的價值是依靠人們的信仰而賦予的,只要有人相信它,它就會一直保值。從技術上講,比特幣區塊鏈 (Bitcoin) 的存在是為了鑄造和追蹤 bitcoin (BTC),而且只限于此,這是它最大的局限——僅僅能實現簡單的價值傳遞。
圖 25 @Mustafa AKMAN
而以太坊可不僅是一種加密貨幣,它支持復雜的價值傳遞。它是可編程的區塊鏈,意味著人們可以使用寫入代碼的「貨幣」來開發 Apps 和產品,這也讓以太坊成為了第二代區塊鏈技術的代名詞。
圖 26 @WHAT IS ETHEREUM?
“以太坊為所有人提供數字貨幣和數據友好型服務的開放訪問權限——無論您的背景或位置如何。它是加密貨幣以太 (ETH) 和您今天可以使用的數千種應用程序背后的社區構建技術?!? 以太坊官網
圖 27 @Ford Modular XR Space 2021
AI 人工智能是構建與維護元宇宙不可忽視的主要力量,以下有一些用例場景;
最終,人工智能可能能夠在我們探索時實時生成完整的虛擬世界。圖形渲染技術和人工智能技術之間的界限可能會繼續模糊。有一天,AI 可以接受一些輸入,例如“茂密的叢林環境,從瀑布中流出的溪流”,并將其轉變為我們可以探索和互動的完全身臨其境的 3D 環境。
我們今天的互聯網多少是存在壁壘的,不同應用程序與空間所共享的信息相對較少,但加密和去中心化計算開始打破其中的一些壁壘?;蛟S有一天創作者們可以跨應用實時協作,編輯和查看相同的資產,這就像在 3D 世界版的在線文檔一樣。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當變量進入環境時,在函數中聲明一個變量,就將這個變量標記為“進入環境”。從邏輯上講,永遠不能釋放進入環境的變量所占用的內存,因為只要執行流進入相應的環境,就可能會用到它們。而當變量離開環境時,則將其標記為“離開環境”
就是跟蹤記錄每個值被引用的次數。當聲明了一個變量并將一個引用值賦給該變量時,則這個值的引用次數為1。如果同一個值又被賦值給另一個變量,則該值的引用次數加1。相反,如果這個值引用的變量又取得了另外一個值,則這個值的引用次數減 1。當這個值的引用次數變成 0 時,則說明沒有辦法再訪問這個值了,因此就可以將其占用的內存空間回收、當下次再運行時,它就會釋放引用次數為 0 的值所占用的內存
不用的內存,沒有及時釋放,就叫做內存泄漏
1. 循環引用
一個DOM對象被一個Javascript對象引用,同時又引用其它的Javascript對象,這個DOM對象可能會引發內存泄露。這個DOM對象的引用將不會在腳本停止的時候被垃圾回收。要想破壞循環引用,就將引用DOM元素的對象賦值為null
2. 閉包
在閉包中引入閉包外部的變量時,當閉包結束時此對象無法被垃圾回收
3. DOM泄露
當原有的dom被移除時,子節點引用沒有被移除則無法回收
4. Timers 計(定)時器泄露
宏任務包括:setTimeout、 setInterval、 Ajax 和 DOM事件
微任務:Promise、 async/await
微任務比宏任務的執行時間要早
異步和單線程是相輔相成的,js是一門單線程腳本語言,所以需要異步來輔助
事件循環
同步進入主線程,異步進入任務隊列,主線程內的任務執行完畢為空,就去任務隊列讀取對應的函數,進入主線程執行
執行順序:
一:先執行所有的同步任務(log)
二:執行完畢再去執行第一個宏任務
三:執行第一個宏任務時,先看有沒有需要執行的‘微任務,如果有就執行,沒有就執行‘宏任務’
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
轉自:csdn
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
之前一直是用axios請求rap2模擬的接口,想試著用express自己寫一個簡單的,然后連下MySQL數據庫。
npm init -y
npm install express
www.js
文件,把這段代碼寫進去,然后直接node www.js
啟動服務,然后在瀏覽器訪問http://localhost:3000
就可以看到后端返回的Hello World!
啦。
const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { //這里面可以先從數據庫獲取數據,然后返回給前端 res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) })
axios.get('http://localhost:3000').then((res) => { console.log(res); });
http://localhost:3000
,如果不是同一端口的話會出現跨域不能請求的問題。解決方法是在www.js
文件中加上下面這段:
//加了這句之后就可以跨域請求了??? app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //允許所有來源訪問 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); //允許訪問的方式 next(); });
app.post('/post', (req, res) => { console.log(JSON.stringify(req.body));//前端發送給后端的數據 res.send('ok');//返回給前端的數據 });
axios.post(`http://localhost:3000/post`, "向后端發送的數據").then(res => { console.log("后端返回的數據res=>", res); });
第6節
解決。
express沒有內置的POST請求API,但是有聽說將body-parser(詳情) 內置到express中了。但是我試了直接使用不了。所以還是直接安裝第三方包
使用第三方包body-parser
npm i body-parser
app.js
//1引包 const bodyParser=require('body-parser') //2配置 // 配置模板引擎和 body-parser 一定要在 app.use(router) 掛載路由之前 // parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parse application/json app.use(bodyParser.json())
轉載整合自(文中鏈接) 參考鏈接:
Express 中文網
在express中獲取post請求數據(原文鏈接)
body-parser(詳情)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
轉自:csdn
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語:每個做產品或者運營的同學都會遇到需要處理業務數據的情況。處理業務數據首先要了解業務這件事,找到處理業務數據的規律。作者總結了他業務數據的分析框架與思考,與你分享。
業務數據分析這件事下個定義就是對于業務關注的指標數據的變化進行分析解讀?;旧厦總€做產品或者運營的同學都會經歷到,甚至有些公司的商分部門會設立業務經營分析的架構專門做這件事。
很多公司都在做這件事。我在前司的工作有一部分就是對業務數據做周維度以及月維度的解讀。這件事我大概做了一年多吧,我理解這樣的好處至少有以下這三個。
更深刻理解業務:
這個好處是對于個人而言。之前的公司有個不成文的規定是每個新入職的同學會寫業務數據月報。好多同學挺抵觸這件事的。的確那么大的業務,剛入職的同學寫這個業務數據解讀的確是有些困難,
但是,我也發現好多同學做過一次數據分析,基本上對于業務就有了一層更清晰的認知。
及時感知線上問題:這個是觀測數據比較最重要的原因之一吧,很多時候組織龐大以后,很難通過體感感知線上的問題,這個時候數據是能夠在一定程度上反饋業務問題的,通過數據可以快速找到問題偵查方向。
發現業務規律找到機會點:這個好處一定是最重要的,如果你長期觀察數據波動,你就一定會找到數據波動的某種規律,如果你知道這背后的原因,你就可以“順勢而為”,有針對性的制定產品或者運營策略,往往能事半功倍。
在前司做了一年多的業務數據解讀,逐漸發現要想做好業務數據解讀這件事,至少需要三個層面的建設。這個三個層面相輔相成,一起構成了一個清晰的業務數據解讀的理想狀態。
大腦核心在做判斷,這個判斷本身需要你足夠的了解自己的業務。
你要足夠了解自己業務內所有指標的含義,這里既包含業務的核心指標,也包含各個維度的分層分級指標。你不僅要了解他們,還要了解他們之間的關系。
經驗豐富的大腦看到一個指標的波動,就能聯想到有可能是什么動作導致的,同時能映射到其他指標上,能夠快速結合工具進行交叉指標的驗證。
初級的工具能提高獲取數據的效率,中級的工具能幫助理清分析思路,高階的工具能幫助決策,但無論是哪種水平的工具都要符合你自己的業務本身特性以及自己分析框架。
我之前和數據部門產品同學一起搞過一個異動數據分析工具。這個工具會直接告訴你在某個周期內的所有的數據維度的變化,并計算出每個數據維度的對于整體業務數據變化的貢獻率。到后期還是發揮很大的作用的。
不過這都是在我們吃透了自己業務每個指標代表什么意思以及摸透自己業務本身的分析框架的基礎上做的產品化工具,如果盲目就投入工具建設,應該結果是得不償失的。
這個層面不難理解,或者說數據分析本身就是個甄別信息的過程,你需要建立你自己數據特征與內外部之間的信息邏輯,拿外賣舉例,世界杯期間的外賣業務的DAU在上漲,那么你首先要知道世界杯正在發生這個事,否則也就別談驗證世界杯與業務數據之間關系的問題了。
我在前司任職期間,我感知的每個信息我都會結合業務本身去想一想有沒有產生關聯關系,同時我也足夠多的開放自己,企求接收更多的信息。
上面三個層面是指數據分析的理想狀態,但是不代表三個層面你都有建設就可以做好業務數據分析,按照目前我的理解,好的業務數據分析一定能講的清什么樣的人,在什么樣的場景,因為什么事件驅動,最后造成了業務數據怎樣的變化。
好的數據分析=人+場景+事件驅動;推導邏輯大概是,數據變化不是原因本身,數據變化是業務變化的特征表現,人是業務的主體,場景是主體的范圍或者是特定的主體集合,事件驅動是動因。
還是拿上面的外賣業務的例子講,世界杯期間外賣業務DAU在上漲,是住宅小區和校園的用戶因需要熬夜觀看球賽,導致宵夜場景的DAU增幅較大,進而拉動了大盤DAU的增長;如果但看結論本身,不做定量分析我理解是個合格的業務數據的解讀。
通過自己長期以來數據分析的摸索,我逐漸形成了一套業務數據分析的框架思路。共分為四個步驟:
這個環節你要明確數據問題到底是什么。一般情況下至少要從兩個維度描述問題,什么時間,什么指標。時間好理解,指標這回事你要根據你的業務拆解到最小的單位,比如訂單量異動了,至少要明白是DAU在異動,還是轉化率在異動,還是都在異動;
這個環節是經驗輸出,你要平常的時候足夠了解業務,了解用戶,并通過不斷的數據分析或者各種信息對于數據異動做出合理假設。
比如你是外賣業務,你明確問題是7月份~8月份外賣業務DAU在增加,那這個時候我會想到可能是學生放假導致依賴外賣解決用餐需求的場景增多(因為學校有食堂)。無論如何這個環節你要根據信息或者經驗對于數據異動做出合理解釋,再進行下一步。
這個環節你要證明你的假設,如果你的假設成立,那么到底該怎么證明,還拿外賣業務舉例,我的假設是學生放假導致的外賣業務DAU增長,如果要驗證這一點的話,我可以從DAU的年齡分層以及瀏覽地點兩個維度進行驗證,如果是年齡分層中20歲左右的住宅場景的DAU增長較大,那你的假設至少邏輯上是沒問題的。
如果有問題,你就要再回到經驗假設這一層,重復這個循環。
當你做了前三個環節之后,還沒能把事情說明白時,你要盡可能補齊信息,當然也不是盲目補齊,而是從人、場景、事件任何一個因素往外了解。同樣需要你足夠了解業務。
比如點評app是個地方性比較強的應用,某個城市的占比會很重,如果以上三個環節仍無法定位數據問題時,那你可以了解某個城市發生了什么,有沒有可能是這個城市的某個因素造成的,以及怎么驗證。
業務數據分析這個事核心是你得了解業務,我更多說的是一些方法論的框架和思考,一定不能照搬,要結合業務本身的特性使用。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前段時間筆者接手了一個自動售貨機線上購物小程序的項目,花了幾天時間設計小程序端的訂單模塊,積累了一點設計心得。
今天我結合自身經驗,基于用戶場景的帶入來給大家分享自動售貨機線上訂單交易模塊的設計規則,也記錄一下這次項目經歷。主要有兩個部分:
在設計訂單模塊之前,我們首先需要了解用戶的購物場景。我們的支付寶小程序同時接入了自動售貨機和智能貨柜。
和電商的訂單交易場景最小閉環流程不同(選購商品——直接購買/加入購物車 ——去購買——填寫地址等信息——支付——等待收貨),自動售貨機線上購買流程如下:
選購商品——加入購物車(自動售貨機沒有這一環節)——支付——取貨 。
梳理整個購買流程,可能會出現以下場景:
基于上述場景我們可以歸納產品要體現出的場景包括:
這里有幾個問題值得注意:
(1)購買機器點位問題
雖然能夠在購買頁手動選擇要購買的機器點位,但是為了讓用戶的操作成本降到最低,滿足用戶“懶”的心里,我們需要能夠盡可能準確判斷用戶最可能去取貨的機器的點位,用戶可以不用手動選擇自己想要購買的機器。這里的購買首頁點位顯示的一期邏輯是:
(2)是否能夠添加商品到購物車?
自動售貨機的交易特點是用戶單次購買僅能購買一件商品,而智能貨柜的交易數據顯示,用戶單次購買往往是一次性購買多件商品。因此,在智能貨柜線上購買過程中,需要有加入購物車這一功能,以方便用戶一次性購買多件商品。
產品頁面設計時,需要結合用戶購買流程明確地指導用戶取貨地址和取貨方式,避免用戶因不知如何取貨而導致的客訴。
圖1:支付成功后引導取貨-原型
相應地,待取貨訂單展示中需要明確標識取貨機器、取貨方式、取貨時間等信息。
圖2:待取貨訂單強調取貨信息-原型
每一筆訂單都可能出現異常情況,比如用戶去取貨的時候發現機器卡貨了,或者取貨之后發現商品過期了等等,一些出貨失敗的情況系統會自動退款,但一些系統無法識別是否出貨失敗的情況,需要用戶手動申請退款。
接下來我們就開始從訂單交易框架搭建開始詳細講下如何設計自動售貨機線上購買的交易流程。
訂單交易最基礎的部分是交易流程,從設計最小閉環開始,逐漸往最小閉環里補充交易流程。訂單模塊的核心分為兩塊:
訂單狀態是定義訂單將按照哪幾個步驟進行的依據,就像我們人的生命周期一樣,有嬰兒期、少年期、中年期、老年期。訂單狀態具有幾個特點:
自動售貨機小程序的訂單設計的訂單狀態:
訂單操作是基于訂單狀態下,可給用戶觸發的對該訂單的操作。訂單狀態一般都由訂單操作觸發才會發生改變。比如買家點擊取貨按鈕后,觸發訂單由待取貨狀態變成了已完成狀態。
在訂單操作設計上需要考慮對訂單功能的用戶群體包括哪些。電商常見的用戶群體包括買家、商家、平臺管理員。
對于自動售貨機線上購買交易場景來說,訂單模塊的用戶群體主要包括買家平臺管理員(暫不涉及商家端)。此文僅討論用戶端的訂單基礎流程設計(平臺端的訂單模塊設計下次我們再討論hh~)
綜合而言,最后小程序所有的訂單狀態和用戶對應的訂單操作如下圖:
最后,我們再來復盤下如何基于場景來構建訂單體系結構:
第一步:分析用戶場景,找到訂單模塊需要滿足的產品需求;
第二步:根據用戶購買操作流程設計訂單狀態和訂單操作,注意不要忘記訂單異常情況的處理。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
產品在進行設計時,往往需要做好多方面的考量,針對有一定“障礙”的用戶,產品需要做好包容性設計,幫助用戶更自如、輕松地使用和進行交互。本篇文章里,作者就如何進行無障礙設計做了方法策略上的總結,一起來看一下。
你知道嗎?視力、聽力和行動能力完全健康的人,可以輕松地讀寫,可以有效執行多任務,并且始終可以正常工作的人約占總人口的50%?其余的人都是戴著眼鏡或有色盲,手腕或耳朵受傷,生活在嘈雜的環境中或網絡信號質量差,忙碌或忙碌中,閱讀障礙或有注意力障礙等。
這意味著大約一半的用戶可能很難使用我們的產品或瀏覽我們的網站。因此,我們可能錯過了提高用戶滿意度并擴大受眾范圍的機會。
不過在設計階段實施一些簡單的原則就可以改善交互和整體用戶體驗,極限設計可以為所有人帶來價值,我們稱之為“包容性設計”。
包容性設計考慮了盡可能多的人的需求和能力,而不僅僅是針對殘疾人。它認識到我們的需求會隨著時間和環境的變化而變化,因此它會預測錯誤,掙扎和不同的交互方式。它的目的是在問題發生之前解決問題,提高標準并改變良好產品設計的標準。
包容的用戶界面是善解人意,有意識且可訪問的。年齡、性別、教育程度,財富和能力等不同特征,在不同環境中生活或工作,獲得技術水平不同的不同人群可以舒適地使用它。我們將使用POUR作為在用戶與界面之間創建簡單、輕松、快速交互的參考。
作為設計師,我們當然不能控制以上所有要求都能做到。但是我們應該承認,人們遇到的許多可訪問性問題是由設計階段未做過的決定引起的。
因此,設計師有很多機會可以有所作為。僅通過做出更明智的設計決策,我們就可以影響(改進或協助)四種經驗。
通常,可訪問性被認為是對創造力的挑戰;但是,如果我們認為這是一個創造性的挑戰,那么我們會開辟全新的可能性領域。真正好的可訪問性的訣竅不是在功能或功能上進行折衷,也不是在美學上取舍,而是使功能和創意體驗也可以訪問。
1)顏色
① 對比度
對比度是亮度或顏色的差異,使物體從周圍環境中脫穎而出,并可能對清晰度產生顯著影響。高對比度使視覺元素從背景中脫穎而出,更加引人注目。
專家提示:純粹的#000000黑白色會給眼睛帶來強烈的對比度,甚至會影響閱讀障礙者。這就是為什么我們傾向于避免使用它,而是選擇深灰色的原因。
② 亮度
亮度描述從光源發出的照明水平或從表面反射的光量。明亮的顏色反射更多的光線,并會干擾我們閱讀和處理信息的能力。
避免在背景或較大表面上使用鮮艷的顏色。請勿在文本上或文本附近使用鮮艷的顏色,以免干擾文本。
如果品牌要求特定的高亮度顏色,請嘗試建議使用飽和或較深的顏色。如果你絕對必須使用明亮的顏色,則應將其用于突出顯示動作的方法最小化,并將其與較深的色相搭配以達到平衡和高對比度。
專家提示:任何含有超過50%黃色的顏色都會自然反射更多的光。這意味著黃色,橙色,綠色和藍綠色是高風險顏色,應謹慎使用。
③ 色盲
色盲是無法區分特定顏色(通常是紅色和綠色,偶爾是藍色)的一種,它比你想象的要常見。
專家提示:不要僅僅依靠顏色;顏色不應該是傳達重要信息的唯一方法。您可以執行以下操作:
2)版式
① 字體選擇
通信是每個數字產品的首要目標,可以借助印刷術及其正確應用來實現。內容應清晰易讀,這意味著易于識別和解釋,輕松閱讀和處理。
簡潔明了對于快速閱讀和解釋至關重要,請避免使用復雜的字體,因為它們只會增加視覺干擾。選擇正確的字體家族,針對那些具有清晰定義和獨特形狀的字符,因為視力障礙或閱讀障礙的人可能會因某些字符或其組合而感到困惑。
② 字體樣式
字體樣式還會影響弱視或閱讀障礙者的閱讀性能。我們應該注意并謹慎使用字體樣式(如斜體,下劃線和大寫)的頻率和位置。
根據“英國閱讀障礙協會”的規定,應避免使用斜體,特別是對于較大的副本塊或較小的字體。這是因為它們使字母傾斜,顯得更加尖銳,因此更難以閱讀。
正文也應避免使用帶下劃線的字體樣式。給長的段落加下劃線會增加視覺噪音,從而降低閱讀性能,而給短的句子或單詞加下劃線會與活動鏈接相關聯,并可能引起混亂。粗體是添加對比度和強調的更好選擇。
盡管沒有確鑿的研究,但有一些證據支持也應避免主要針對正文使用大寫字母。似乎所有大寫字母的統一外觀會降低單詞形狀的對比度,從而使掃描變得不那么容易。此外,大寫看起來有點緊張,可能感覺好像有人在向您大喊大叫。
專家提示:平衡是關鍵。謹慎使用每個樣式并賦予其含義甚至可以提高可讀性。
③ 字體大小
您知道絕大多數人戴眼鏡或隱形眼鏡嗎?實際上,十分之六以上!此外,約有62%的人通過手機訪問互聯網,這還不包括應用程序的使用情況。當視力不佳的人在旅途中在小屏幕上使用技術時,可能會出什么問題?
使用較大的字體。通常,16px被認為是最具有包容性的,但是請注意,字體可以以不同的比例站立,并且字體的大小可以相差很大。切勿低于14px,事實上,大多數現代網站的正文都使用18px字體,而標簽,標題或工具提示僅使用14px或16px。
專家提示:此外,避免使用薄而輕的字體,因為對于較小的字體或在明亮的光線下可能難以閱讀。
④ 段落格式
幫助人們輕松瀏覽內容應該是我們的首要目標,因為只有20%的人可以閱讀內容,其中55%的人可以快速瀏覽內容。我們的工作是通過使用舒適的段落格式來盡可能地支持人們。
研究表明,用于支持可讀性的平均在線行長(包括空格)約為70個字符。標題,字幕和項目符號點將有助于掃描,而左段對齊將使文本更易于閱讀。
較長的文字墻使人們參與的機會大大減少。成功的段落長度不超過5到6個句子。
空格將幫助患有認知和注意力障礙的人,保持閱讀重點。對于其余的內容,它只會使閱讀更加愉快和流暢。根據WCAG,最佳做法是將行高(行之間的間距)設置為相對于該類型大小的1.5相對值。段落之間的間距也至少應比行間距大1.5倍,因此必須明確定義。
提示:行距不應超過2.0,因為它可能產生相反的效果并分散讀者注意力。
⑤ 復制版面
作為設計師,我們經常陷入過度設計布局的陷阱,以使它們看起來引人注目或獨特,從而將可用性放在一邊。這就是為什么我們看到諸如文本的一部分之類的趨勢在彩色或帶紋理的背景上重疊圖像或文本的趨勢。只要我們知道如何以及何時使用它們,我們仍然可以享受其中的一些趨勢。
當在彩色或帶紋理的背景上使用文本時,我們需要確保它們之間的色彩對比度足夠高,同時在整個重疊區域都保持一致-意味著在副本下沒有較淺和較暗的區域,也沒有過多的細節干擾。較大的字體大小和較重的字體粗細也會提高對比度。
專家提示:一如既往地“了解您的用戶”。時髦的布局并不適合所有人。
您可能在想,視覺設計如何影響聽覺體驗?因此,想象一下您正在與一個俱樂部的朋友交談。我敢打賭,您只能聽見她說的話的一半,但是您可以通過看著她的嘴唇移動,肢體語言和面部表情來保持對話的進行。
由于視覺效果的支持增強了模棱兩可的聲音,因此您最終可以理解它們。在用戶界面中,聲音對于不同的人可能意味著各種各樣的事情。它們也很容易在嘈雜的背景中丟失,因此最好以視覺提示來支持它們。
我們的目標應該是提供聽覺和視覺提示的反饋,支持錯誤,通知以及與相關和鄰近圖形元素的重大交互。我們還必須確保視覺線索保持足夠長的活動時間,以使人們能夠看到和閱讀,同時又不隱藏任何重要的內容。
一個好的做法-不限于支持聲音輔助技術,是在UI元素中添加描述性標簽,并在圖像中添加標題,以便于在屏幕閱讀器中輕松導航。為視頻使用字幕是改善聽力體驗的另一種方法,對非母語人士也有幫助。
最后,我們不應該忽略聲音是問題的情況,這就是為什么我們需要視覺替代的原因。有些人可能對特定的聲音敏感,或者處于聲音可能引起干擾的情況下。然后,這是一個好習慣,讓人們可以選擇關閉聲音而不必調低揚聲器音量,從而使此功能清晰可見。
專家提示:避免使用不必要的自動播放聲音和音樂,因為它們會打擾甚至驚嚇別人。
1)知覺
① 視覺清晰度
清晰度是用戶界面中的第一個也是最重要的屬性。成功的用戶界面使用戶能夠識別和解釋他們所看到的內容,了解產品的價值和所要采取的行動,預測使用產品時會發生什么以及與產品成功交互。
形式跟隨功能是一項原則,指出對象應反映其預期的功能或目的。為了在用戶界面中實現此目的,我們使用了附加功能,附加到UI的視覺提示/屬性,以顯示用戶與其交互的可能方式。
支付能力取決于用戶的身體能力、目標、過去的經驗,當然還取決于他們認為可能的情況。按鈕應該看起來像按鈕,就像鏈接、菜單標簽、表單等一樣。使用清晰的符號/功能可以幫助用戶識別或解釋界面,并輕松進行交互。
在用戶界面中使用熟悉的和已建立的設計解決方案將幫助用戶預測結果并自信地采取行動。因此,使用設計模式來解決常見問題是一個好習慣,該設計模式是經過測試、優化和可重用的解決方案。
設計模式建立在過去的經驗和可能性的基礎上,并附加到特定的目標上。為避免眼前的問題,選擇正確的設計模式應該是我們避免混淆或壓力大的交互的第一要務。
建立一致的視覺語言是獲得更全面界面的關鍵。具有相同功能和/或重要性的重復交互式UI組件應始終以相同的方式外觀和操作。因此,導航、按鈕、鏈接、標簽、錯誤等元素應在整個產品中具有一致的樣式,顏色和動畫。
值得注意的是,一致的視覺語言不僅可以通過附加含義和減少視覺噪音來幫助互動,而且還可以增強產品的個性,提升品牌知名度,建立情感聯系和信任。
② 層次結構
視覺層次結構是指圖形元素的視覺重量及其排列方式,使用戶可以輕松地探索和發現內容。通過為頁面元素分配不同的視覺權重,我們可以對內容進行分組并影響人們感知信息和瀏覽產品的順序。
顏色是第一大關注焦點。彩色元素將脫穎而出,因此在層次結構中位于較高位置。明亮的顏色會更加突出,因此,考慮到這一點,我們應該仔細安排和分配顏色,以將眼睛引導至正確的位置。
視覺元素的大小(例如印刷、按鈕、圖標和圖像)在確定重要性方面幾乎與顏色一樣強大。較大的圖形吸引了用戶的注意,并且顯得很重要。對于排版,明顯不同的尺寸縮放比例可以幫助建立內容層次結構,并使內容掃描變得輕松而輕松。
輔助視覺層次結構的另一種方法是通過設計一致性和例外。一致對齊,外觀相似,重復或相鄰的元素給人的印象是它們是相關且同等重要的,而偏離元素以及不尋常的形狀和有趣的紋理或樣式將更加顯著。太多的設計例外會引起人們的關注,并會增加復雜性,因此,謹慎使用它們是一個好習慣。
專家提示:研究格式塔原理及其在UI設計中的應用將有助于我們理解視覺感知和分組以改善視覺層次。
③ 色彩應用
顏色不應該是傳達信息或增加意義的唯一方法,但它仍然有用且很有影響力,因此不應將其視為裝飾性元素。顏色具有含義,盡管沒有硬性規定,但是太多的顏色會導致信息疲勞,并且不一致地使用顏色會導致混亂。
避免使用太多顏色。通常,三種顏色足以描述頁面的所有重要視覺元素。60–30–10規則可以幫助我們建立完美的和諧。其中60%的彩色項目由原色組成,以創建統一的產品主題,具有30%的輔助顏色增強含義和/或創建引人注目的效果,以及10%的強調色,以補充和輔助主顏色和輔助顏色。
此外,我們需要確保為消息使用正確的色調。除了美學,顏色還可以創造情感和無意識的聯系。特定陰影的含義會因我們所處的文化和環境而異,并且顏色通常具有不同的含義-在西方世界,錯誤是紅色,成功是綠色,信息是藍色等。
專家提示:可以將我們自己的含義分配給顏色,只要它們不與既定規范重疊,并且我們在整個產品中使它們保持一致。
④ 符號學
符號學是對符號/圖標及其含義的研究。它著重于人們如何形成和解釋這些含義,這取決于人們所看到的上下文。在用戶界面中,圖標是可視語言的一部分,用于表示功能、功能或內容。符號學可以幫助我們設計立即被識別和理解的圖像。
盡管這些年來,我們已經開發出具有大多數人接受和理解的含義的圖標。用戶還習慣于使用特定于平臺的圖標,并且可以輕松地進行解釋。在可能的情況下,最好遵循這些既定的解決方案,以獲得熟悉和流暢的體驗。
當然,在某些情況下,我們需要設計具有特定功能的自定義產品特定圖標。這些圖標必須盡可能簡單明了,以確保清晰度。它們還應該具有一致的視覺樣式,以傳達其功能或與其他非功能性元素區分開。
最后,我們不應該僅僅依靠視覺隱喻來傳達含義,因為某些關聯可能并不那么明顯。如果圖標需要標題來描述其含義,則可能不合適。如果不確定,請與實際用戶一起測試我們的設計會有所幫助。
專家提示:圖標不僅易于解釋,而且還可以具有多種含義。因此,將標記與功能圖標結合使用是一種很好的做法。
2)互動
記憶
許多心理學實驗表明,健康個體的處理能力非常有限。在我們的短期記憶中,我們大多數人平均可以保留7項,具體取決于個人。我們的大腦并未針對數字產品所需的抽象思維和數據記憶進行優化,因此良好的設計會有所作為。減少頁面上可用選項和信息的數量,以及使用清晰的標題,面包屑和“后退”選項來訪問以前的內容,將幫助用戶記住或提醒自己他們在哪里,打算做什么或要做什么。
交互元素上或附近的清晰可見副本將幫助用戶在整個交互過程中保持知情和自信。例如,表單標簽應始終可見,動作不應隱藏在懸停后面,按鈕應提供目標位置的上下文,并且各節的標題應明確。
專家提示:通過稱為“塊”的過程可以增加我們的短期記憶和處理能力。這是我們在視覺上將項目分組以形成更容易記住的較大項目的地方。
1)菲茨法
菲茨法則為人類的運動和互動提供了一個模型。它指出,將指針(光標或手指)快速移動到目標區域所需的時間是其距目標的距離除以目標大小的函數。意味著較小的目標會增加互動時間。
根據Fitts法則,我們旨在減小用戶與目標之間的距離,同時增加其尺寸。該法律主要適用于導航和按鈕。菜單和子菜單元素應在附近,而按鈕,鏈接和分頁應在較大區域上單擊,以實現更快更準確的交互。
專家提示:根據可用性最佳實踐,按鈕/鏈接的最小尺寸為42×42像素(重擊尺寸)。
2)獎勵:提高績效
到目前為止,我們已經建立了包容性設計,旨在讓盡可能多的人訪問并實現他們的目標或解決他們的問題,盡管他們有自己的情況。
我們可能很幸運,可以使用最先進的設備或超高速互聯網,但是當我們的信號不太好時,我們會感到掙扎。對于大多數人來說,老式設備和糟糕的互聯網已成為常態,因此,為獲得最佳性能而設計是一件大事。
極簡主義是關鍵。如果我們打算創造一種可以被盡可能多的人使用的產品,那么我們就應該擺脫不必要的一切。圖形,圖像或動畫是有價值的,還是增加了視覺噪音和加載時間?如果是的話,那就必須走了。
圖像優化是幫助提高數字產品性能的另一個標準。通過將圖像調整為合適的大小,然后通過諸如ImageOptim和TinyPNG之類的工具運行它們,可以節省寶貴的千字節和實際的加載時間。
開發人員通常使用的一種提高性能的技術是“延遲加載”模式,其中圖像的加載是異步的,并延遲到需要時才加載。
例如,如果您快速滾動到頁面底部,則在網站完全加載之前,您可能會看到類似網站線框的內容?!皾u進圖像加載”的一種替代方法是“漸進圖像加載”,其中我們顯示一個空的占位符框<div>,然后用小的低質量模糊圖像填充它,最后用所需的高質量圖像替換它。
在每個數字產品中都遵循上述最佳實踐,這是高可訪問性標準的良好起點。但是總會有改進的余地,并且更好地了解我們的用戶可以揭示提高無障礙標準的新方法。
因此,有必要花費一些時間和金錢來更多地了解我們的不同類型的用戶,因為他們可以教會我們很多有關使包容性體驗成為現實的知識。了解我們的用戶將幫助我們練習同理心。
“賦權”不是偶然的設計思維過程的第一步。在移情階段,我們的目標是加深對我們正在設計的人員及其獨特視角的了解,因此我們可以在進行任何設計決策時與他們認同并代表他們。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互和體驗設計師在實際工作中可能會借鑒外來的理論,比如米勒法則。但是你知道嗎,其實你們運用這一法則的時候也是有誤區的。今天我們就來看看米勒法則到底是干什么的,我們應該怎么樣運用它才能使我們的工作進展下去。
說到「米勒法則」(Miller’s law),你可能不太熟悉,因為它更多是被稱作「7±2法則」,還有一個有趣的叫法——神奇數字7±2(The Magical Number Seven, Plus or Minus Two)。
這個法則闡述的是:人類的大腦短期記憶存在上限,最多可以記憶大約7±2,即5~9個信息團。
說起來這個法則還算簡單,但我看見網絡上許多講解關于「米勒法則」在UI設計中用法的文章,都是在反復例舉類似以下案例:
網頁的導航菜單往往不會多余9項;金剛區往往一行只會有5個等案例。
這著實有點硬生生在套理論的味道。
因為「米勒法則」研究的是人類大腦的短期記憶量,而導航菜單、金剛區這些場景,是側重用戶識別,而不是側重用戶記憶。
試想你作為用戶的時候,你會去記導航菜單的名稱嗎,哪怕是短暫地記下來(就像我們記短信中的驗證碼,然后到另一個應用中輸入的場景一樣,短暫地記?。??
我想大部分的人在這些場景中,應該都是所見所得、過眼云煙的吧。
并且“導航菜單的設計旨在用戶識別而不是用戶記憶”這個觀點,在UX研究咨詢公司 Nielsen Norman Group(NN/g 尼爾森諾曼集團)的“web可用性”一文中也有指出。
所以以上導航菜單、金剛區的案例,產品可能確實也是有在控制菜單項目的數量,但更多應該是出于對「??硕伞沟目剂?,而不是「米勒法則」。
我之前也有在《交互四策略實現??硕伞芬晃闹姓f過:
用戶的決策能力會跟隨選項數量的增長而降低,給用戶非常多的選擇,約等于沒給用戶選擇。
這些案例完全是強行反推,給套了個「米勒法則」的結論,實屬不妥。
那我就來談談,我對「米勒法則」的理解以及它在產品設計中的用途。
米勒在1956年《心理學評論》刊中的《神奇的數字7±2:我們處理信息能力的一些限制(The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information)》一文中,首次提出「米勒定律」。
但該文只算是一篇闡述學術觀點的文章,不算嚴格意義上的論文。
米勒在文中引用了實驗者記憶變化音調的實驗,發現人們在短時間內可以很好地記憶并復述5~6位的信息,隨著收到的信息位數增多,記憶出錯的概率也在不斷增加。
但因為實驗者存在個體差異,最終的信息記憶量基本都能在該基礎上再浮動2~3位。
所以得出了“人的大腦在短期記憶中最多可以記住大約7±2個信息團”的結論。
但因為該實驗與文章不屬于正式的科研研究和論文,所以后來的科研學者又對“人類短期記憶上限”進行了更多的實驗研究,最后形成了很多種學說。
有堅持7±2的守舊派;有認為最佳短期記憶信息團為4±1的創新派;也有認為“人類的最佳短期記憶不應該被束縛于一個固定數值區間”的不站隊派。
確實 NN/g 尼爾森諾曼集團也說過,用戶的短期記憶能力存在較大的個體差異,前25%的人群比尾部25%的人群會好大約2.4倍。
但不論怎么說,這些實驗都明確表明了:人的短期記憶存在上限,只是對具體能記住的信息團數量存在分歧。
基于這個結論,我們在設計產品時,該如何加以運用呢?
NN/g 尼爾森諾曼集團基于「米勒法則」,提出了以下幾則設計指南參考:
① 響應時間必須足夠快,以便用戶在等待下一頁加載時不會忘記他們正在做什么(體驗側)。
② 更改訪問鏈接的顏色,以便用戶不會忘記他們已經單擊過哪里(UI+交互側)。
不要讓用戶去記優惠券代碼,而是該將優惠信息置入短信或郵件中的鏈接,通過鏈接自動將優惠券轉移到用戶的購物車中。
這樣可以讓計算機承擔記住晦澀代碼的負擔(交互側)。
③ 在用戶可能需要幫助的場景顯示“用戶幫助”功能,這樣他們就不必前往單獨的幫助功能區去記步驟,然后再回來解決手頭的問題。(交互側)
你會發現,實際上專業團隊對「米勒法則」的理解,基本都在于如何解決“人的短期記憶上限”問題,并沒有去糾結,到底是7±2,還是4±1?
并且我在 NN/g 團隊每一條設計指南的后面都標注了該條指南作用的側重向,發現大多都體現在交互側。
因為「米勒法則」研究的是人的短期記憶極限,在視覺表現層其實很少會運用到。
視覺更多強調的是“從識別到操作”,這并不是「米勒法則」的研究內容。
舉一些切實的例子吧,基于「米勒法則」而誕生的產品交互中,我們最常接觸到的就是移動設備自動獲取短信驗證碼,方便用戶一鍵填充。
通過圖像識別用戶的銀行卡號,減輕用戶記憶負擔。
這一類有關用戶短時記憶的場景,為減輕用戶記憶負擔而誕生的交互形式,才是真正的基于「米勒法則」。
現在你明白了嗎?因為「米勒法則」中提到了短時記憶極限量為7±2個信息團,讓許多人都去關注數字了,而忽略了「米勒法則」到底在研究什么。
然而這個數值,迄今為止,在科研領域依然還存在著分歧。
米勒在他發表的文章中也提到了:
雖然短時記憶存在上限,但是人們的大腦也總是在努力尋找其他方式拓寬這個極限,例如拆解與再組合。
在前面米勒讓實驗者記憶變化音調的實驗中,就有人通過自主拆解、再組合信息形成信息團的形式,來增加自己最終記住的單位信息數。
基于此,前面圖像識別用戶的銀行卡號的示例,如果因為技術受限而無法實現,我們也可以通過拆解卡號為“4位一個信息團”的方式,來方便用戶記憶、輸入與校驗。這樣在體驗方面也是一種彌補。
要將用戶的記憶負擔減輕到極限,那就干脆讓用戶放棄記憶。
例如蘋果基于自己的云管理與密鑰技術,在識別到用戶在創建密碼時,會自動填充強密碼,強密碼復雜混亂到很難被人腦記憶。
一方面加強了密碼的安全性;另一方面,搭載其他技術手段來減輕用戶的記憶負擔,不再糾結于用戶究竟能記住多少個、多少位的密碼。
直接將用戶需要記憶的內容減輕至0,這也許才是真正基于「米勒定律」而創造出來的產品設計吧。
其實這篇文章我認為更多是寫給交互和體驗設計師看的。
如果你著手的功能有涉及到用戶記憶的場景,不防可以參考一下這些減輕用戶記憶負擔的案例,還有NN/g的設計指南。
但好像現在「米勒定律」被很多UI設計師用成套路了。
然而你發現了嗎,文中「米勒定律」的案例,與視覺、與“7±2”很少存在關聯。
如果文章開頭導航菜單、金剛區的例子,你硬要說是參考了神奇數字7±2,我認為勉強也算行吧(嗯…勉強算)。
因為雖然我認為其設計理論更多是建立于「??硕伞怪系?,但「希克定律」告訴我們要減少展示給用戶的選項數量,卻并沒有給出一個建議值。
如果你希望在某些場合給你的設計一些立足點(大家懂的),你如果說結合了「??硕伞古c神奇數字7±2,我認為比直接說基于「米勒定律」要更內行一些。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn