92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

產品出海如何做好設計?

濤濤

國內互聯網近幾年發展迅速,在很多方面都超過了一些其他國家互聯網的發展階段。隨著國內互聯網產品競爭日趨激烈,很多企業都把目光投向了用戶量龐大的海外市場。而疫情對于全球經濟的影響更是加速了海外市場的數字化進程。據 Sensor Tower 數據顯示,2020 年 Q1 全球移動互聯網應用下載量達 336 億次,同比增長了 20.3%。

產品出海如何做好設計?來看這篇近6000字的總結

產品出海的第一道屏障就是語言。但若想打造一款能夠適應海外市場的產品,只完成不同語種的翻譯是遠遠不夠的。在產品設計的過程中,我們需要考慮兩個方面:國際化與本土化。

國際化+本地化的策略,也就是“glocal—global+local”,指的是結合國際統一和地區差異。這種策略在統一的前提下,通過靈活配置保障地區的個性化體驗,既能滿足統一維護提升產品效率,也能保障當地用戶的特殊訴求,是一種性價比很高的設計方案。

產品出海如何做好設計?來看這篇近6000字的總結

產品設計的國際化

產品的國際化,即全球化。國際化的通用設計能夠為產品打造一個全球統一的形象與內核。

產品出海如何做好設計?來看這篇近6000字的總結

△ Chrome 的不同地區首頁功能與樣式基本一致

一套通用的設計系統和設計規范,既可以幫助我們在產品的國際化設計中 樹立產品調性,又可以保證操作的一致性,同時提升設計的高效性。阿里旗下面向東南亞市場的購物平臺 Lazada 在開發之初,通過使用 Fusion Design 的設計系統,大大節省了設計的時間。在如此復雜的電商業務場景之下,整套產品的設計最終僅 3 靠個設計師就完成了。

產品出海如何做好設計?來看這篇近6000字的總結

△ 設計系統對產品研發成本的影響

除此之外,一致的內核也能夠幫助企業在全球范圍內建立起統一的品牌形象,增強品牌的識別度與知名度。

產品設計的本土化

想要讓產品在某一個市場上站穩腳跟,對于本土化的思考是必不可少的。本土化的核心是 因地制宜,根據地區差異相應調整產品策略。

產品出海如何做好設計?來看這篇近6000字的總結

△ UC 瀏覽器在不同地區的首頁布局

為什么說本土化對于產品的出海非常重要?其原因并不難理解。Charles Eames 說過,“Recognizing the need is the primary condition for design.” 任何設計的本質都脫離不開對需求和問題本身的理解。好的設計是在對需求、動機、心理、環境等相關因素有了充分了解之后所產出的解決方案。

針對海外設計研究的思維框架

在考慮產品的本土化時,我們需要關注到用戶的需求是什么、是否仍然成立,用戶的行為模式是什么樣的,以及整個外在社會物質、精神環境等方面的狀況。螞蟻金服團隊通過海外本土化設計實踐,總結出了一套“環境-人-需求“的研究框架,列出了可以去調研的多個方面。

產品出海如何做好設計?來看這篇近6000字的總結

△ 螞蟻金服-“環境-人-需求”出海產品設計研究框架(做了小部分修改)

1. 需求(價值)

首先,我們要做的第一步判斷就是原來的用戶需求是否成立。產品在原市場想要解決的問題,是否在新的市場仍然存在,即我們的產品是否 有用?這個問題的答案決定了原先的產品是否對于該市場的用戶是有價值的。如果有價值,那么就可以深入探索如何讓用戶用起來;如果沒有價值,那么就需要進一步判斷是否要繼續開拓這個市場,以及如果繼續開拓這個市場,在原有的產品形態上,我們能否通過改造的手段讓它符合在新市場的用戶群中挖掘出來的、不一樣的新價值?

達到了“有用”的標準,我們則需要開始考慮“ 好用”的問題。只有滿足“好用”這一條件,產品才能夠被用戶用起來、從而真正在新市場落地。在實現“好用”的過程中,我們可以關注以下幾個層面的影響因素:

生活形態、價值觀

生活環境與社會環境會塑造當地用戶的生活形態與習慣。

下圖分別是日本和北美地區的新聞資訊類 App。同樣是推送新聞資訊,兩者在表現形式上卻大相徑庭??梢钥闯鋈毡镜男侣?App 布局緊湊、信息量大、頁面坪效很高;而北美的新聞 App 則更注重突出重點內容,信息密度相對來說并不高。

產品出海如何做好設計?來看這篇近6000字的總結

△ 日本-新聞資訊類 App

產品出海如何做好設計?來看這篇近6000字的總結

△ 北美-新聞資訊類 App

這種差異的背后,其實是兩地上班族生活形態的差異。日本城市小、人口密度大,上班族通勤大多會選擇地鐵。而北美地區面積大,大部分人會駕車上班。駕車的人雙手需要長時間控制方向盤,同時開車也需要持續注意路況,只能在間隙中查看新聞內容;而乘坐地鐵的人雙手更加自由,也有較長的通勤時間需要消磨,故可以接受更多的信息,也能夠接受更繁瑣的操作。

產品出海如何做好設計?來看這篇近6000字的總結

△ 北美(左)和日本(右)各自的生活形態

有時候,某個地區的用戶長期習慣的操作模式,會與主流的操作模式有所差異。設計師 junu 在個人博客中講述了他為 Melon(一個韓國主流音樂播放器)進行體驗優化的一段經歷。他發現 Melon 當時的播放操作邏輯比較冗長,用戶需要先點選列表中的多首樂曲,再點擊底下的播放鍵,此時 Melon 會將用戶所選歌曲自動生成一個列表并進行播放。這和當時 Spotify 等音樂播放器“點擊即播放”的主流交互邏輯相比,要更復雜和麻煩,尤其是在用戶只是想要立即聽到某一首歌曲的時候。因此,junu 提議引入“點擊=播放”的操作方式。但當他們設計出了這樣的優化方案后,卻發現在測試過程中老用戶們對這樣的交互方式感到陌生和沮喪?;谟脩舴答?,最終,他們采取了一個折中的方案,既保留了原先的復選框作為多選操作的區域,讓用戶仍然能夠選擇樂曲生成列表并且播放;同時又引入了點擊單曲直接播放的操作。相比第一版優化方案,用戶的接受程度有了明顯提升。

產品出海如何做好設計?來看這篇近6000字的總結

△ Melon 播放器的點選操作邏輯

設備環境

10 年前,高端大屏幕手機在東南亞和非洲市場普及率并不高,因此產品出海時需要考慮當地常見的設備是什么,并作出相應的適配。近幾年,隨著市場經濟的發展以及中國手機的成功出海,即使是東南亞和非州的發展中國家,高端移動設備的普及率也已經很高,這為設計師在考慮通用性的過程中減輕了不少負擔。不過,在為每個地區的用戶做產品設計時,仍然需要調研清楚當地設備的使用情況,比如什么樣設備更流行、普及率更高;如果某一地區的設備不夠發達,那么設計的操作也需要考慮到設備不同所造成的差異。

業態/監管

在不同的國家或者地區,各個行業的標準與制度也可能存在很大區別。例如財會軟件行業中,在北美和英國占據了重要市場份額的 Quickbooks、Xero 等公司,卻無法成功打入歐洲一些國家的市場。因為財會軟件本身的功能、流程設計與當地的財務制度是緊密相關的。在這樣的情況下,歐洲本土的企業顯然會對當地的政策和制度更加熟悉,也更容易設計出符合當地企業與會計需求的財會產品。

2015 年,Airbnb 進入中國市場。在最初的市場調研和用戶調研之后,針對本土化,他們所邁出的第一步就是根據中國的業態環境對產品的前 10%和后 10%做了改造。其中,產品的前 10%指的是登錄這一類用戶開始使用產品所需要進行的步驟,而后 10%指的則是支付等用戶完成一個完整流程所需要進行的操作。因為當用戶進入到產品主要鏈路中時,其功能流程基本相通(搜索地點、挑選房間、瀏覽信息等),不需要做過多的改變;但產品的前 10%和后 10%則決定了用戶能不能把產品用起來并不遇到障礙。因此,針對登錄的部分,愛彼迎將原先的 Facebook 等第三方登錄替換成了微信與微博賬號的登錄;而在支付的部分,愛彼迎引入了支付寶與微信支付的方式,打破了中國本土用戶進入產品和完成訂單的壁壘。

產品出海如何做好設計?來看這篇近6000字的總結

△ Airbnb 產品中國本土化的“前 10%與后 10%”策略

社會經濟

社會經濟環境的不同代表著社會階層狀況的不同,它會影響人們在消費時的行為方式。螞蟻金服在調研菲律賓市場時發現,當地擁有銀行賬戶的人口僅占了總人口的 34%,同期中國擁有銀行賬戶的人口則占了總人口的 85%。而這 34%的人基本上都是當地的富人及中產階層。在貧富分化嚴重的菲律賓,大部分普通民眾是沒有銀行賬戶的。這一人口學特征很大程度影響了螞蟻金服電子錢包業務對菲律賓目標用戶的描繪,繼而影響了產品各個層面的設計。

文化/宗教

在各個文化/宗教里存在著不同的意象,也會有各自的表達方式與禁忌等等。在某個文化下表示友好的行為,在另一種文化下可能是一種冒犯。這些都是在設計時需要去注意的。除此之外,在不同的文化/宗教語境下,人們會有不同的行為模式與價值取向,這里我們會引入一個模型——霍夫斯泰德文化維度模式,來對這一問題進行更詳細的解讀。

霍夫斯泰德文化維度模式

霍夫斯泰德文化維度模式是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個理論框架。它可以幫助我們對于不同文化群體的價值觀有一個較為全面的了解,從而更明白該文化群體中人們的行為傾向。此理論總結了衡量各文化價值觀的六個維度:

權力距離指數(power distance index,縮寫為 PDI):指在家庭、公司、社區等組織機構中地位較低的成員對于權力分配不平等的接受程度。權力距離指數高的文化,組織更中心化、有特定的等級秩序、更容易聽從領袖的決策;而權力距離指數低的文化,組織更扁平化、主張人人平等、更傾向于自己做判斷而不易受控制。

個人主義(individualism,縮寫為 IDV):與集體主義相對,指個人融入集體的程度。個人主義越高的文化,自我意識更強烈,更看重依靠個人努力獲取利益和價值,追求隱私保證和自由;而個人主義程度越低的文化,會期望得到“團體”的照顧,更忠誠地依賴于群體和熟悉的社交關系,更傾向跟隨主流價值觀做決定。

不確定性規避指數(uncertainty avoidance index,縮寫為 UAI):指社會能在多大程度上容忍不確定性。不確定性規避指數越高,人們會更遵循規則,恐懼變化、喜歡熟悉,并且習慣通過已知經驗推演事物邏輯。而不確定性規避指數越低,人們會更有更強的安全感,對變化的包容性更強,有著更輕松的生活態度,鼓勵冒險,對風險的承受度更高。

男性化(masculinity,縮寫為 MAS):與女性化(femininity)相對,指人們(不論男女)更富有競爭精神,自信與野心,注重財富和社會資源的積累,而女性化社會責注重人們之間的關系和生活的品質。故男性化程度高的社會,人們會更加自信、進取、好勝,追求英雄主義,關注物質成功及權利地位;而男性化程度低的社會,人們會更加注重合作與謙和,信奉中庸共識主義,更享受生活、關愛他人。(注:男女平等)

長期導向(long-term orientation,縮寫為 LTO):最初名為“儒家動力”(Confucian dynamism),指社會對未來的重視程度。長期導向的社會,注重堅持不懈和節儉,愿意計劃未來生活,也會設定長期目標;而短期導向的社會,會認為活在當下更重要。

放任與約束(indulgence vs. restraint,縮寫為 IVR):指社會成員在多大程度上意圖控制自身的欲望。放縱指數越高的社會,人們會更加樂觀、積極、沖動,認同隨心所欲的觀點,更傾向自我欲望的滿足和表達;而克制指數越高的社會,則會在心態上更加嚴肅、嚴謹、審慎,會有更嚴格的社會規范制度,而認為休閑娛樂不重要。

使用他們官方網站( https://www.hofstede-insights.com/ )上的 Culture Comparison Tool,可以查詢到各個國家的文化維度指數,也可以選擇不同的國家進行對比。

產品出海如何做好設計?來看這篇近6000字的總結

△ 日本與荷蘭的文化維度指數對比 – hofstede

在為特定地區的用戶設計產品時,我們可以從這些維度去解讀他們的行為傾向,并據此提出相應的解決方案或者設計方案。滴滴團隊在開拓墨西哥市場時,根據墨西哥的文化維度指數在產品的本土化上制定了從功能到外觀等不同層面上的設計策略。

產品出海如何做好設計?來看這篇近6000字的總結

△ 墨西哥地區的文化特征指數

產品出海如何做好設計?來看這篇近6000字的總結

△ 滴滴墨西哥的本土化設計策略

這類源于文化差異的設計差異并不少見。在淘寶等國內的電商平臺上,“按照銷量排序”是一個被高頻使用的功能,消費者們認為什么產品買的人多,什么產品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當在北美的電商平臺亞馬遜上,我們會發現并沒有按銷量排序這個選項。因為美國的用戶相對來說個人主義更強、更相信自己的判斷和選擇,他們不認為他人推薦的就一定是好的。

產品出海如何做好設計?來看這篇近6000字的總結

△ 國內外電商平臺對比

在企業即時通訊工具行業,國內的主流產品,如企業微信、釘釘等,都選擇了藍色這一比較沉穩的顏色作為主色調,在產品功能的形態上也偏向于嚴肅。而海外的辦公產品 Slack,視覺色彩更加豐富;整體的產品定位也更加活潑歡樂,常常會有“不嚴肅”的表達,比如在界面多處都使用了 emoji。這樣的產品形態差異,其背后是兩種文化在放縱(享樂)/克制(嚴肅)這一維度上的差異。

產品出海如何做好設計?來看這篇近6000字的總結

△ 企業微信與 slack 的產品風格對比

內容本土化

除了功能框架上的設計需要考慮本土化外,產品中運營內容的本土化也是不可輕視的一環。Spotify Design 團隊在《Designing for Belonging: Why Image Localization Matters》一文中,記錄了他們對于內容本地化的一些經驗和思考。同樣,內容的翻譯僅僅是本土化的第一步。在地區之間區別不大時,完成內容的翻譯便能夠滿足其他地區的需求。如下圖中 “浴室歌單( Songs to sing in the shower)”的播放列表,列表上的文案一經翻譯,就能夠推送給德國、波蘭、以色列、意大利等一眾國家的用戶。但當內容的閱讀群體有著更顯著的差異時,僅僅翻譯是不夠的。在看到這張圖片的時候,其他人種比如亞洲人可能就不會產生很強的代入感,也會缺少對產品的一種歸屬感(這個產品并不是為”我“設計的)。

產品出海如何做好設計?來看這篇近6000字的總結

△ Spotify “Songs to sing in the shower” 歌單

下圖展示的是 Spotify 另一個歌單—— “快樂時光( Happy Hits)” 的封面在不同地區的呈現形式??梢钥吹剑鎸ξ幕町惛蟮娜后w時,Spotify在保持了統一的樣式風格的基礎上,針對每一個地區都展示了當地人在他們的生活中“快樂”的樣子。這種本地化內容更加貼近當地用戶,也能夠讓用戶產生更強的連結感與共感。

產品出海如何做好設計?來看這篇近6000字的總結

△ Spotify “Happy Hits” 歌單

結語

回到那句話 —— “Recognizing the need is the primary condition for design.”產品的出海其實只是我們在設計中會遇到的一種場景,在這個特定場景下我們的設計思考與其他場景下是互通的。如果僅僅完成了翻譯這一步,那我們就忽視了在新市場下另一群用戶的特征、需求、使用情景、操作習慣等關鍵信息。無論是不是在為產品的出海而設計,我們始終應該保持對用戶的好奇,讓最終的設計實現我們期望達成的目標。

文章來源:優設   作者:酷家樂UED

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

數據化設計

濤濤

2015年之后的中國互聯網,人口紅利、流量紅利逐漸退場。2019年遭遇第一場資本寒冬,上半年投資總金額同比下降了58.5%。也在2019年,“精益創業”、“精益數據分析”、“增長黑客”等一系列數據思潮開始流行。而UX設計師作為半個產品經理,我們很容易將這股“數據熱”遷移到自己身上:每個UX設計師都要學數據分析了嗎?數據和設計是什么關系?天天盯數據會限制設計師的想象力嗎?數據到底要怎么用?……




Preview

——————————

數據熱

過往,設計師一般不會把“數據”掛在嘴邊。我們提倡“以用戶為中心,打磨極致用戶體驗”,較少考慮成本和商業效益。


通俗來說,就是產品經理負責“生意”,設計師負責“體驗”。以“造鞋”為例子,產品經理做了市場調研,決定要生產兒童運動鞋,設計師負責設計“適合4-11歲的兒童在城市公園玩鬧”的鞋子應該長什么樣、穿著它跑跑跳跳是不是舒服的。但是設計師不需要擔心運動鞋的銷量,產品經理則要跟老板匯報銷量業績。


在紅利消退、產品同質化嚴重和快速迭代的多重壓力下,UX設計迎來了更高的挑戰:僅憑主觀判斷“好不好用、好不好看”來打磨產品內在體驗,不考慮產品的生存、增長和盈利,很難在行業立足。與此同時,隨著數據采集工具的日漸成熟,數據以“客觀”和“便捷”兩大特點,幫助我們更快獲得“設計的依據”。精益化設計是必然趨勢,而“數據分析”是精益化設計的手段之一。



沿用“設計鞋”的案例,UX設計師要在自己所在領域思考:在設計調研的過程中,我們用什么數據指標來衡量這個兒童鞋好穿、好賣?在鞋進行批量生產前,我們有沒有數據資源支持我們研究父母/小孩對鞋子外觀的偏好、小孩運動時容易受到哪些物理傷害等等?如果有條件進行小范圍的數據實驗,我們如何設計數據實驗來評估好穿好賣?





PART 01

——————————

數據的定義

“理解任何事物都需要先對它進行定義,這樣才能夠在頭腦中清楚地知道正在討論的是這個東西,而不是其他東西?!狈浅O矚g美國經濟學家Thomas Sowell在《經濟學的思維方式》里說的這句話。


如果我們對“數據”下定義,那么產品設計語境中的“數據”具體是什么?數據是怎么產生的?


從數據采集手段來看,互聯網產品的數據來源主要有3個:二手資料數據、問卷調研數據和應用埋點數據。




1/ 二手資料數據

行業數據和競品數據一般通過二手資料獲得,包括商業交易數據、用戶群的態度和意愿、用戶輿論指數、競品的用戶規模和盈利狀況等宏觀數據。常用的搜索渠道有:百度指數、企鵝智酷、艾瑞、尼爾森、各大科技資訊平臺等。


我們可以將這些理解為“市場數據”,在立項期對產品方向有一定指導意義,能快速了解市場概況,也能幫助產品思考差異化定位的問題。



以“騰訊文檔為”項目為例,我們想提高騰訊文檔用戶創建文檔的成功率,通過模板創建文檔是關鍵路徑之一。研究用戶通過模板創建的路徑時,想大概了解用戶找模板時可能會在意什么。于是我們嘗試使用百度指數搜索“模板”、“文檔模板”、“PPT模板”、“Word模板”、“Excel模板”,從搜索量得知:PPT模板搜索量最高,符合我們的推測;Word模板內容中,簡歷、合同需求量較大,而部分用戶只是想要好看的Word背景等等。雖然我們得到的有效信息不多,但我們能夠通過二手資料的方式,快速了解用戶需求的基本面。



2/ 問卷調研數據

問卷調研數據是通過向目標用戶發放問卷獲得的,側重于收集人口學信息、用戶自述的歷史行為、主觀態度或意愿,比如用戶滿意度調查、流失用戶原因調查等。本質上是通過建立假設、再進行抽樣統計的方法來得到用戶口述的答案。也就是,問卷傾向于聽用戶說了什么、而看不見用戶真正做了什么。嚴謹的問卷分析也會比對后臺數據,校驗用戶說的和做的是否一致,以清洗無效數據。




3/ 應用埋點數據

較之于問卷調研數據,我們想看“用戶做了什么”,則通過分析應用埋點數據獲得。

“應用埋點數據”也叫“埋點數據”、“前端頁面數據”,我們可以簡單理解為“通過技術手段獲得用戶在應用內(網站、客戶端、小程序等)的操作行為數據”。其背后原理是:用戶和界面發生交互,系統需要向服務器發送請求和返回請求,把這些請求預埋一段計數代碼,就能得到頁面的曝光數據和用戶的操作數據。

埋點需要產品經理或設計師做好數據指標的定義,跟開發工程師提前溝通,讓開發工程師在代碼中嵌入埋點。一個埋點由多個字段組成,規范地定義字段,有利于我們在數據平臺搜索埋點更方便。當我們懷疑數據有效性時,也更方便排查埋點問題。




埋點類型可分為曝光埋點、操作埋點和時長埋點:

1. 曝光埋點可以捕捉頁面被展示的次數,可以是針對整個頁面,也可以是頁面中的某個區域。即我們常說的PV、UV。


2. 操作埋點則是在用戶對頁面某個區域(按鈕、卡片、提示條等)進行手勢操作(點擊、雙擊、長按、滑動等)時,進行打點記錄。對應的,也稱之為某個操作的PV、UV。


3. 時長埋點是通過標記以上兩類埋點、并計算時間差獲得的。比如,我們記錄用戶選取模板耗費的時長,可以通過離開頁面的時間(t2)-進入頁面的時間(t1)計算。而離開頁面則用點擊左上角返回按鈕、點擊具體模板等“離開”操作來核算。



基于以上3種原始數據,我們可以運算得出點擊率、功能滲透率、人均點擊次數、人均使用時長等具有對比價值的數據。


較之于二手資料和調研數據,埋點數據更加貼近用戶的真實表現,作為反饋指標的靈敏度更高,可挖掘性更強,也能作為客觀衡量指標引入到每一次產品迭代中。


設計師理解埋點的原理,有助于在數據采集環節跟數據開發更好地溝通,并提出合理的數據需求。另外,當我們拿到一組數據,也需要從根本原理上去判斷數據的信度和效度,確保數據沒有質量問題再進行下一步分析。




PART 02

——————————

數據之于設計

數據分析能力會在UX設計師的崗位招聘要求中被提及,但除了電商和廣告行業的數據化設計知識體系較為成熟,其他領域還在探索。另外,相比于市場營銷、產品經理、產品運營等職能,設計師的分析框架是相對晚熟的。


實際上,我們很難從招聘廣告中歸納“具備數據分析能力的設計師”長什么樣,但我們期望這樣的設計師對數據的感知力強、分析邏輯清晰、數據經驗豐富,對某個垂直領域的數據儀表盤了如指掌等等。


數據對UX設計有什么用?或者說,在設計鏈路的哪一個環節,數據和設計才能發生化學反應?



UX設計日常流程為:得到一個需求(需求評審/需求挖掘)——輸出設計方案(設計決策)——驗證設計方案(設計實驗)。順著這個流程,我們來看看數據在UX設計各階段的作用。



1/ 需求評審:以提升最終業務數據為目標,評估需求的價值貢獻和優先級

肖恩·凱利斯在《增長黑客》開篇就提到“倉筒組織”這個概念:職能組織有各自的KPI,但未必對最終的業務目標都有利。比如開發人力有限的情況下,產品經理想上線新功能,市場運營想搞推廣活動,設計想做UI大改版做炫酷的動畫——就像N匹馬有N個方向,馬車跑不快。


尤其是當產品進入成長期,我們會發現“能做的事情真的太多了”!不僅僅是來自老板和產品經理的需求,每天都有用戶想教你做產品,剛剛競爭對手又上線了N個新功能等等。另外,當多個產品經理分管不同業務線,每個產品經理都會認為自己提的需求優先級最高。那么,ABCD這幾個需求,哪個更值得即刻實現?


有目標導向和成本意識的設計師,不會拿到PRD就開始畫稿,而是做需求評審。下次產品經理給你提需求,或者自己想要主動提案,不妨從下面幾個問題開始思考效益。


如果這個新功能上線或對已有功能做這些優化點:


|正向評估:如果做,能使哪些用戶在什么場景受益?用戶會因此使用、消費、甚至推薦我們的產品嗎?

|負向評估:如果不做,是否會造成用戶口碑變差,甚至棄用我們的產品?

|數據導向:預估這個需求對大盤數據(AARRR)有何貢獻?如果無法在短期看到對大盤數據的直接提升,應該取什么樣的數據指標來評估其價值(GSM模型)?

|比對優先級:目前有ABCD四個需求,而人力資源有限,當下最應該解決哪個數據環節的問題?


我們以騰訊文檔的Excel按行填寫功能為例,闡述如何在需求評審階段就思考數據效益。


一開始,我們只是從用戶吐槽中了解到在手機端使用Excel錄入信息的困擾:協作人之間容易竄行誤刪誤改別人填寫的行,甚至把創建人輸入的表頭信息都給刪掉了。


我們模擬信息收集場景,摘出Excel移動端輸入的體驗節點,發現“在有限的屏幕內去處理表格信息,需要來回滾動/縮放表格,再回到自己的行再輸入”這一點最容易發生錯誤,尤其在沒有凍結首行的情況下。



我們有收集表功能,也支持表格轉收集表,但是都依賴創建人主動去使用這個品類/這個功能。我們是否可以在創建人不干預的情況下,直接把來回滾動的表格輸入變成縱向的表單輸入?



以上都是從“感知”角度發現和分析問題,確認了“存在這么一個問題”,然后提出了一個可行的想法。往往這個時候,我們容易為之興奮。


但是如果我們堅持更精益的投入產出比,我們應當評估“這是不是一個要優先解決的問題”,即評估收益:改變Excel移動端的輸入體驗,能帶來什么收益?


首先,我們做正負向評估。


|正向評估:如果做,用戶可以在手機端更順暢地錄入信息,避免串行刪改的錯誤。雖然這不足以吸引新用戶使用我們的產品,但這個體驗未在競品實現,能形成差異化的記憶點,也許能帶來好的口碑。

|負向評估:如果不做,手機端的Excel輸入體驗跟其他競品無差,用戶倒不會因此流失,但是創建人會因為協作者的犯錯苦惱,也許會因此轉為采用“IM一對一溝通”來避免出錯。


然后是設定數據目標:如果這個功能落到數據板上,能作何貢獻?


|數據導向:我們預期這個功能能夠通過提升手機端的輸入體驗,來避免用戶出錯,降低創建人整理數據的負擔,以提高用戶留存(而非預期這是一個拉新功能)。并且,設計假設正確,應該能通過一些數據指標看到用戶的行為變化。




最后,對比同期提出的幾個產品需求,評估優先級。


|比對優先級:假設Excel按行填寫的需求是A(圖中黃色點),同期有一個影響文檔安全分享的需求B。如果我們按照正負向評估去考量優先級,將AB兩個需求都放在象限圖里,越外層越應該優先處理,那么我們就應該優先處理需求B。



以上是為了將思維可視化呈現給讀者,實操時更重要的是數據意識和敏感度。圖示僅供參考,用何種形式表達不重要。


掌握一套清晰的需求評審思路,才有話語權去討論這個需求是做還是不做、即刻要做還是延后再做。這不僅僅是UX設計師需要具備的目標導向思維和需求分析能力,而是整個團隊都應該建立的數據意識和工作流。這也適用于對設計師提案的自我審查,避免自娛自樂。


2/ 需求挖掘:數據作為產品健康度的體檢指標,為設計圈定問題域

產品在不同的成長階段關注的短期效益會有所不同。初創期,產品先要驗證其假設的需求是不是用戶真實需求、商業模式是否可行。當產品發展到一定的用戶規模,我們可以通過對比關鍵數據指標,去判斷現階段是否符合預期。這就像我們去醫院抽血做體檢,血樣指標可以反映我們當前是否健康。


如何檢驗產品健康度呢?我們首先關注宏觀的數據轉化是否符合預期,即AARRR。海盜指標這一套,想必大家耳熟能詳。但對設計師來說,難點在于如何將宏觀數據轉化與具體的用戶使用場景進行關聯,進而落實到具體的設計任務。


以騰訊文檔為例,在線文檔的核心用戶價值是“從創作到協作的多人多端無縫同步”,因此我們定義用戶的關鍵路徑是“創作→分享→協作”,即:



基于關鍵路徑,我們繼續下鉆分析每一個環節,建立用于監控“轉化質量”的行為漏斗。比如在“分享”這一步,落到APP里,這個行為漏斗是:



我們發現僅30%的創建人在分享文檔前設置了非私密權限——這個數據并不符合我們的預期,因為這會導致創建人分享文檔后,協作人無法直接查看或編輯文檔。協作人需要進行權限申請,創建人則需要處理相應的權限申請通知或更改權限,從“申請權限”到“審批通過”的時間差降低了協作效率。



我們進一步去找關聯的數據指標,來確認“這給用戶造成了困擾”——“有多少用戶在文檔分享出去之后再返回來設置權限”‘、“一個創建者平均要處理多少次權限申請”等等。


通過小范圍的用戶測試,我們了解到“權限設置”是一個視覺盲區。于是,我們優化分享頁的信息展示,來改善“用戶看不見權限設置”這個問題。另外,當創建人在處理權限申請的通知時,提供修改權限的入口,以避免重復處理同一個文檔的申請消息。



最終,我們將“分享前進行權限設置”的轉化提高到80%——吹牛的,業務數據太敏感,無法以真實數據跟大家分享,本文的數字皆為脫敏數據。


這就像一個剝洋蔥的過程。先找到產品的核心價值和對應的主路徑,再拆解到對應的多個用戶任務流,關注微觀的某個環節轉化是否有問題。利用數據診斷產品健康度,然后繼續用數據或其他研究方法下鉆,下鉆到可以落地到設計點的層面。



3/ 設計決策:借鑒用戶行為數據,對方案進行快速決策

2016年聽了白木彰老師在杭州的一次現場分享,他對“Design”的理解非常透徹?!癝ign”是“標志”,應該是大家最共通的常識,就像國旗是這個國家的sign。那“De”是什么?臺下有人回答“重新定義”,而白木彰很自信地說:“不,這是一個否定詞”。

對于UX來說,同理。每一次的設計都是一次否定,否定現有體驗的合理性,否定現有的產品、服務或某一功能完全滿足需求。反過來想,則是審問自己的設計方案:每一次的“否定”,真的更好嗎?


這里舉一個“小需求”為例:騰訊文檔Excel的PC端右鍵菜單高度優化。筆者目前負責騰訊文檔編輯模塊的UX工作,日常就是很多這樣的“小優化”,其實這更加考驗數據敏感度和對“嚴謹”的堅持。


需求背景就是用戶反饋“右鍵菜單太長了,小屏幕看不到菜單底部的內容”。


“展示問題”的解法有很多:


解法1/ 用UI手段,降低單個menu item的高度。



解法2/ 重新歸類,通過折疊來縮短菜單。



解法3/ 當菜單無法完整展示,重新錨定其在屏幕的坐標。




對比競品,確實有表格產品通過(2)去解決這個問題,但是我們撈數據發現:右鍵菜單中,插入行列是高頻操作(紅色部分),點擊次數比其他功能高5~130倍,且人均點擊量分別是3次和2次。我們決定不去對增加行列進行菜單折疊,因為這樣做雖然我們解決了“菜單太高”的問題,但降低了點擊效率。



接到某個需求的“A問題”,我們容易一葉障目。但是,會不會因為我們解決了A問題而引發B問題呢?數據幫助我們快速決策,避免B問題的出現。謹慎對待每一次小設計,因為每一次小設計都是一次否定。


4/ 設計實驗:采用數據實驗對設計方案進行擇優或改進

大家對數據實驗應該不陌生,常用的方法有AB測試和灰度測試,是一種控制變量的抽樣實驗方法。


AB測試是指通過抽取抽取等量用戶樣本進行AB兩個設計方案的投放,對比兩組數據,進行方案擇優。這兩個方案的差異要嚴格控制在“僅有一個因素的差異”。這跟我們初中做生物實驗論證“一棵小樹的生長需要陽光”的思路一樣:兩組等量的小樹,一組有陽光,一組沒有陽光,經歷相同的時間后對比生長的平均高度差。水、空氣、養分等其他條件要嚴格一致。因此大改版等“多變量”的設計并不適用于AB測試去印證。


大改版則通過灰度測試或拆分變量去做AB測試來確保效果?;叶葴y試是指如果軟件要在不久的將來推出一個全新的功能,或者做一次比較重大的改版的話,要先進行一個小范圍的嘗試工作,然后再慢慢放量,直到這個全新的功能覆蓋到所有用戶。也就是說在全量發布的黑白之間有一個灰,所以這種方法也通常被稱為灰度測試。


設計師需要觀察綜合的數據指標,以騰訊文檔為例常規的指標有:PV、UV、人均點擊次數、功能滲透率、使用該功能的留存率等等。另外是多渠道收集用戶反饋,包括騰訊文檔的“吐個槽”社區、微博搜索關鍵詞、隨訪身邊的用戶朋友等。



Conclusion

——————————

結語

數據化設計不是對“精心打磨體驗”的否定。恰恰相反,對設計工匠來說,數據分析能力是一種新的“打磨工具”,提倡在設計實施和決策過程中更科學和客觀。UX和數據的關系,就像我們期望鞋子被量產之前能夠有數據佐證“這款鞋好看好穿好賣”,而不是否定“好看又好穿的鞋子能帶來更好的銷量”。

文章來源:站酷   作者:騰訊ISUX

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


尼爾森可用性原則是什么“鬼東西”(上)

鶴鶴

最近公司在梳理整個產品在用戶體驗層面上可優化的問題,然后匯總整合。公司的交互專家就提出可以利用尼爾森可用性原則來將所以問題歸類,進行整合。

What?尼爾森可用性原則是什么這么厲害?雖然之前也有聽到過這個原則,但是具體的內容并不是很熟悉,于是打開百度開始搜索……


什么是尼爾森可用性原則


尼爾森(Jakob Nielsen)是一位人機交互學博士,于1995年1月1日發表了「十大可用性原則」。十大可用性原則分別為:狀態可見、匹配現實、用戶可控、一致性、認知易取、防錯、高效靈活、優美且簡約、容錯、人性化幫助。

十大可用性原則既可以用來指導Web端,也可以指導移動端,當然其他涉及交互的場景也同樣適用。


知道了這些基本信息之后,也看了一些其他大佬對可用性原則的理解和感悟的文章,接下來我自己羅列一些具體案例來幫助理解和記憶這些原則。


原則一:狀態可見原則


系統應該在適當的時間給與合適的反饋,以此讓用戶了解正在發生的事情。

個人理解:產品應該清楚地告訴用戶任務當前的狀態、流程進度。 


案例:

 「狀態加載」是最簡單的狀態可見的展示,告訴用戶當前是加載狀態,讓用戶在等待過程中不會焦慮



「未讀提示」讓用戶知道有需要了解的信息還是未讀狀態,讓用戶可以及時了解



「更新提示」在視頻、閱讀、電臺等產品中會用的比較多,讓用戶實時了解更新狀態



外賣配送信息、快遞物流信息的顯示也是狀態可見的一種



「操作提示」可以幫助用戶知道自己已經操作成功,并且在有效進行中



原則二:匹配現實環境原則


系統應該說用戶習慣的語言,比如:用戶熟悉的單詞、短語和概念,而不是系統導向的術語。遵循現實世界的約定,使信息以自然且合乎邏輯的順序出現。

個人理解:產品的文案提示應該是用戶熟悉的語言,設計風格應該符合目標用戶的喜好,信息的呈現盡量貼近真實世界。


案例:

「特有風格」在二次元、金融產品、某類人群專用產品等會表現的更突出,特有的設計風格和專業的術語會讓用戶對產品更有信賴感



「模擬現實」在運動軟件、AR游戲中比較常見,讓用戶更有真實感



原則三:用戶可控性原則


當用戶錯誤地選擇了的某個功能后,系統需要提供一個明確的「緊急出口」,來讓用戶離開其不想要的狀態,而且無需額外的對話框,支持撤銷和重做。 

個人理解:當用戶誤操作之后,可以有撤銷重做的選擇,可以后悔。


案例:

「返回、關閉」就是最常見的讓用戶可控制的按鈕



「撤回」某些聊天軟件的幾分鐘內信息可撤回并且支持重新編輯



原則四:一致性原則


我們不應當讓用戶去懷疑不同的語句、狀態或操作是否在表達同一件事。設計需遵循平臺的慣例。

個人理解:同一個產品需要統一的設計規范,同類型的產品也應該遵循基本的用戶習慣。 


案例: 

「規范統一」是指風格統一、交互統一、視覺統一



「同類型統一」可以讓用戶在使用過程中更加方便,沒有壓力


PS:網易云音樂和QQ音樂的操作有些不一致,切換使用會稍微不習慣



原則五:認知易取原則


通過將對象、操作和選項進行可視化,最大限度地減輕用戶的記憶負擔。用戶不需要記住對話框中某一部分到另一部分的信息。系統操作的指示信息需要易于被用戶發現和獲取。

個人理解:就是把需要記憶的信息呈現出來,讓用戶直接確認就行。


案例:

「歷史記錄」保留用戶的查看和搜索信息,方便用戶后續查看

 


「關鍵信息」在購物車中的顯示非常重要,可以方便用戶直接確認下單



「觀看記錄」在讀書、視頻類的產品中非常重要,不需要用戶去記憶上次看到的節點

文章來源:UI設計  作者:IAM蒼蒼君

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


如何形成自己的方法論?

濤濤

在有一次面試的時候,我問候選人一個問題:你覺得你作為設計師,最擅長的是什么?候選人回答我說他最擅長的是移動端的設計。

緊接著我又問主流的移動端設計規范有哪些呢?他開始支支吾吾說不出所以然,我再次提醒他做移動端的時候是怎么做的,有沒有參照什么設計規范?他歸納總結了半天,說是去參考一些比較成熟的 APP,看他們是怎么做的。

他的回答有問題么?有問題,錯了么?也沒錯。但是他沒有聚焦問題,也對成熟的設計規范一無所知,成熟的 APP 設計規范本身也是屬于可參照的坐標系;但他們都有一個更加底層的規范,那就是 iOS 設計規范和 Materia Design 等移動端設計規范。

他的回答更多像是知其然而不知其所以然,這些設計規范我們可以理解為一種被普遍接受且廣泛運用的方法論,而我們在做設計的時候,就是在有意或者無意中運用這些設計規范進行輸出方案。

萌新設計師拿到需求就開始上手畫圖,設計老油條拿到需求會思忖再三;萌新設計師設計過程中東借西鑒,設計老油條設計過程中會運用完整的設計體系;萌新設計師評審設計的時候總是三緘其口,設計老油條評審設計的時候口若懸河。

是什么導致這兩者之間的差別呢?

這就涉及到設計進階中的一個重要的問題了:你在做設計的時候,有沒有自己的方法論?

什么是方法論

百度百科上對于方法論的定義是“關于認識世界、改造世界的方法的理論”。

如果聚焦在設計行業,可以理解為,關于分析問題、解決問題的方法的理論,初級的設計師傾向于通過經驗化的手段解決問題,高階的設計師則通過一定的設計理論去支撐自己的設計,關于方法論的沉淀,可以看出設計師個人能力階段。

怎么形成自己的方法論?

1. 總結歸納

像軟件工程師一樣,每個人都有自己的技術棧,設計師也可以這樣理解,你的職業成長依賴于相關的某一行業;因此你的“技術?!?,構成了你設計能力的基本盤,大類比如 B 端交互設計師和 C 端交互設計,體驗設計師和視覺設計師等,小類如 B 端可視化設計師、C 端動效設計師等。

在各自行業積累的經驗,是我們個人技能的護城河,通過對這些經驗的總結和歸納,我們在遇到類似需求的時候,可以快速復用;這也是為什么招聘的時候一般會要求有類似行業經驗的設計師優先。

同時,我們在運用這些經驗去設計的時候,可以理解為是一種本能的直覺;我將其稱之為設計師的直覺,就像色彩搭配、文字間距、頁面留白這些基本的設計要素,大多數設計師都是依賴于設計師直覺(經驗)進行設計。

2. 復盤

設計師的經驗構成了我們方法論的基礎,但是在平時的設計中,如果不注重項目復盤和總結,沉淀的經驗也大多都是毫無章法的記憶碎片;因此針對項目的復盤很重要,復盤既包含設計層面的,也包含產品規劃、人員協同層面的,這些也剛好構成設計師多維能力的一部分,比如產品能力、溝通能力等。

復盤可以讓我們的經驗更好的轉化為可用的方法論,比如之前在設計長表單的時候,遇到了很多復雜的問題,既有業務方面的,也有交互方面的;通過之前的一盤復盤文章《如何設計一個超長長長長長的復雜表單》,我將遇到的問題以及解決方法分析并記錄。

實際上,初版的設計稿并沒有像文中所寫的那么完善,而是在后續的不斷優化中,我將復盤后的一些方案加以運用,取得了良好的效果。

總結歸納和復盤的區別在于,總結歸納是在一個項目階段內展開的,是碎片經驗的累計;而復盤是一個項目階段結束后,從項目的全局視角出發,通過回顧和反思,發現項目的優點和不足,以此來激發新的思路和新的方案,為以后的項目提供參考;而總結歸納也可以作為復盤的一個手段,兩者相輔相成。

機制,于是花時間精心準備,組織大型會議,或激烈討論或洗耳恭聽,在心里留下一個又一個“哦,原來如此”,“哦,不過如此”,“哦,彼此彼此”的回響,時隔幾周后這樣的氣泡便消失殆盡,難免困惑其意義幾何。

3. 抽象

方法論本身是一個抽象的概念,人們將現實世界中發現問題解決問題的方法總結成一套可以加以復用的理論,抽象一方面可以延伸方法論的使用范圍,也可以更好的進行指導設計;通用的規則一般要比狹隘的規則容易遵守,我們所見到的大多數設計規范,都是依據原子設計理論,通過對原子、分子、組織、模板、頁面的定義,產出相應的設計規范和資產。

在產出設計規范的過程中,是將設計風格映射到原子設計理論上,從而抽象出各自行業內的設計規范;在運用設計規范的時候,我們又將設計規范解構到各自的業務中,從而產出符合業務場景的設計,解決業務問題。

4. 刻意練習

最近看了一本書,《刻意練習》書中寫道:

“反復做一件事情,目的是找出你在哪些方面存在不足,并且聚焦于在那些方面取得進步,試著采用不同的方法來提高,直到你最終找到適合自己的方法。

為了在沒有導師的時候有效地練習某種技能,牢牢記住以下三個 F,將是有幫助的;這三個 F,其實是以字母 F 開頭三個單詞,即:專注(focus)、反饋(feedback)以及糾正(fix it);將技能分解成一些組成部分,以便反復地練習,并且有效地分析、確定你的不足之處,然后想出各種辦法來解決它們。”

刻意練習適合需要大量時間來進行鞏固的技能型能力,比如插畫、排版等,我們可以看到大多數學習插畫需要的一個基本要求就是多畫多練習;而同樣,刻意練習在寫作溝通方面也有著比較突出的作用,當你輸出的內容越多,你的寫作技能同樣也會提升(當然這不是絕對的線性關系)

如果說總結歸納、復盤和抽象是形成自己方法論的理論基礎,那刻意練習就類似于手段了,通過刻意練習,可以將方法論加深固化為自己的專有技能,提升自己的多維能力。

總結

通過對設計經歷的總結歸納、復盤和抽象,形成一套屬于自己的完整方法論體系。

同時,基于對相關技能的刻意練習,加固完善方法論體系,有助于我們學習業務知識,提升業務能力;快速輸出方案,提高設計效率。

文章來源:優設 作者:星野隨記

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的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對于實際效果來講并不夠,還需要我們把對比調節的更強,如下圖我們可以看到調整前后的不同節奏感。

總結一下,單純的線性動畫與緩入動畫和緩出動畫并不太符合正常的運動規律;當緩入緩出動畫相互結合時才會更符合正常的運動規律,但是時間上的掌握也是需要慢慢琢磨的,希望此篇文章可以給你帶來一些啟發

文章來源:站酷 作者:凌旬

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


Carplay 設計規范(上)

濤濤


傳統的汽車中控系統,大多是相對固定的硬件組合到一起,共同構成中心的控制臺,控制著包括導航、收音機、播放器、空調等在內的各種功能。一直到 2000 年前后,汽車的中控臺都一直以這樣相對固定的物理按鈕和旋鈕來搭建,用戶也可以通過官方或者第三方服務,來升級功能,比如將磁帶播放器升級為CD播放器乃至于內嵌電視功能等等。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

隨著移動端技術的發展,iOS 和 Android 等智能軟件系統的完善和提升,汽車的中控系統也不再受限于固化的硬件功能。平臺化的軟件體系讓中控系統有了更多的可能性,影音娛樂開始更加豐富,而已然完善的移動端觸摸式交互生態,則為汽車中控以屏幕替代物理按鈕打下基礎,各類原本存在于手機電腦的新型的 APP 、功能、服務也逐漸出現在汽車中控系統上,而特斯拉更是一步到位,以一塊巨大的觸摸屏徹底革新了中控的交互體驗,OTA 升級,有機多樣的UI交互,徹底釋放開了汽車中控交互體驗上的想象力。新的問題出現了,新的方法在迭代,新的趨勢也得到了印證。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

寶馬奔馳保時捷等頂級的汽車廠商大都在中控臺的設計上,探索了各自的可能性,國內廠商也毫不示弱,不過其中絕大多數的系統都基于我們熟悉的 Android 或者是 Android Auto 作為基礎來進行定制和優化,而蘋果則基于自家 iOS 生態,在 2013 年推出了 iOS in the Car 服務,目前正式名稱為 Carplay。而目前各大廠商所青睞的 Android Auto 也上在 Carplay 發布之后所跟進并發布的。

目前,Carplay 和 Android Auto 都已經上行業標準級別的存在,今天這篇文章, 我們先聊聊 Carplay。

關于 Carplay

想做好車載設計?先掌握這份 Carplay 設計規范(上)

CarPlay 車載系統旨在令用戶通過汽車制造商之原生車載系統來使用、操控iOS設備并發揮其功能。該產品的首個版本計劃于2014年發布,最早出現在一些制造商的汽車展覽上。

Carplay 本身并非完全獨立的存在,它本身會和 iPhone 一起聯動,讓iPhone 成為你的車鑰匙和輔助管理系統。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

CarPlay 車載讓你能夠在駕駛車輛時智能、安全地使用各項 iPhone 功能。你可以開導航、打電話、收發信息、聽喜歡的歌。所有這一切,都整合在車內的中控顯示屏上。在 iOS 14 中,CarPlay 車載還引入了全新的 app 類別和適用于 CarPlay 車載儀表盤的自定墻紙。

Carplay 以 蘋果自身在移動端交互和用戶體驗上的深厚積淀,總結和梳理出了一套可供學習和值得參考借鑒的規范。

這些規范對于需要考慮車載使用場景的廠商以及正在布局車載移動端軟件或者系統的廠商的設計師而言,都有著相當的參考和學習價值。

Carplay 核心原則和功能

作為車內輔助、操作、娛樂的中心,Carplay 可以直接連接到汽車中控的觸摸屏上,提供基于 iOS 的相關的服務和應用。Carplay 的整體設計圍繞著車內駕駛這一使用場景,而它的設計原則也圍繞著這一場景來規劃:

  • 成熟?;谧钍煜さ?iOS 應用,來設計界面元素,并提供熟悉、直觀的體驗。
  • 簡短。采用盡可能簡短的交互,不過度引人矚目
  • 相關。屏幕顯示信息高度相關,提供盡可能少選項,不需要復雜決策
  • 語音?;赟iri,以語音交互為核心,司機無需視線離開前方,手也不用離開方向盤即可完成交互。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

1.1、音頻應用

Carplay 當中會有提供音頻內容的 APP,諸如 Podcasts,網絡電臺,新聞,音樂,體育節目等等,這些服務和 APP 將會通過內置的屏幕顯示,并且借助最常見的「標簽欄+列表」來呈現基本的框架,并且必須包含「播放」界面。盡管這類服務和應用是借由內置的界面框架來呈現,但是依然有值得注意的要點:

想做好車載設計?先掌握這份 Carplay 設計規范(上)

  1. 即使數據不可用,也始終要提供內容??紤]到內容可能會受到網絡狀況的影響,在這種情況下,請依然使用占位符。
  2. 請將內容層次結構控制在3個級別,或者更少。
  3. 使用多個標簽頁來組織內容,并且盡量簡化標簽導航的數量和結構。
  4. 優先顯示相關度最高的內容,減少用戶不必要的操作。
  5. 在最頂層界面中,提供包括單點擊觸摸即可播放的功能,比如「播放」按鈕和「隨機播放」等選項。
  6. 行駛過程中,對內容進行智能過濾。比如超速的時候,系統會進行語音提示,此時智能暫停播放的內容,并在界面中呈現正在播放的內容的相關信息。
  7. 提供盡可能簡潔的標題和說明。
  8. 提供補充性的可視化內容,比如專輯封面等等,更加一目了然。
  9. 不要在 Carplay 中內置登錄和設置的選項和功能,確保 APP 開箱即用。如果需要,盡量讓這類操作在 iPhone 上進行,并且盡早完成。想做好車載設計?先掌握這份 Carplay 設計規范(上)

使用此圖標代表明確的、本地的的內容。

想做好車載設計?先掌握這份 Carplay 設計規范(上)使用此圖標來標識在線的內容,確保用戶知道內容來自網絡,并且會耗費網絡流量。

在進行音頻內容播放的時候,Carplay 會顯示「正在播放」的界面,并且會使用如下界面:

想做好車載設計?先掌握這份 Carplay 設計規范(上)

在設計這個相關的界面功能的時候,需要注意以下幾點:

  • 播放音頻時,提供有用的、準確的信息,并且可以進行明確的控制。
  • 不要重新定義播放控件的含義。
  • 在中斷播放一段時間之后,適時恢復并繼續音頻播放。

1.2、汽車廠商應用

Carplay 能夠內嵌到不同廠商的車中,自然也可以控制車內的硬件。這一部分的硬件驅動支持通常是由廠商提供,并且借由 Carplay 內的界面,提供統一的交互體驗。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

  • 將控件和內容限制在與汽車本身相關的范疇以內,不要加入無關的功能
  • 首選標準UI控件,包括按鈕、標簽、導航、表單等控件,具體可參閱系統元素
  • 不要重新設計標準控件,確保整體的視覺和體驗的一致性
  • 切勿模仿汽車本身的UI 界面設計,確保 Carplay 內的統一性

1.3、信息傳遞和 VoIP應用

VoIP 也就是基于 IP 的語音傳輸功能,而在 Carplay 中,VoIP 應用主要借助 Siri 服務,并且全由 Siri 操控,它并不為用戶提供直接的交互界面,因此無需專門設計 UI 界面。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

它支持閱讀信息和編寫/回復消息,不過需要用戶授予權限

想做好車載設計?先掌握這份 Carplay 設計規范(上)

2.1、信息標識

當你的 APP 有推送信息未讀的時候,通常會在 APP 的右上角增加一個紅色的小紅點標識,并且其中會有一個白色數字用來標識未讀信息的數量。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

  • 盡量讓信息標識足夠直觀。讓用戶打開APP之后能夠看到推送信息。
  • 保持克制。不要讓推送信息大量而頻繁,在這個場景下會讓用戶感到迷惑。
  • 注意重要信息的呈現。在標簽欄和APP內的重點位置凸顯重要信息,不要僅靠信息標識來凸顯關鍵信息推送。
  • 避免使用警報提示來作為信息標識的補充。即使有重要的信息,用戶也不希望你在打開APP的時候出現警報彈出框來推送信息。這些信息應當是可見,顯著,但是用戶選擇是否要打開和點擊的。
  • 始終保持信息標識是最新的。

2.2、錯誤推送

對于錯誤信息,應當妥善處理,并且絕對是要在必要的時候才推送報錯信息。

  • 通過 Carplay 推送錯誤信息,而不是推送到連接的 iPhone 上去。
  • 優先以非侵入性的狀態推送來推送報錯信息,而不是直接彈出警報。

2.3、加載狀態

在加載內容的時候,使用黑屏或者靜態的界面,可能會讓它整體上看起來像是死機了一樣,者可能會導致用戶離開。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

  • 進行加載的時候,盡量明確顯示加載狀態
  • 加載時,盡快顯示主要內容,使用文本和圖片占位符來呈現內容布局,并且在完成之后替換,如果可能,盡量預加載已有內容,再更新。

2.4、導航模式

在 Carplay 當中,有2種常見的導航模式:

橫向導航。通常使用標簽欄來進行導航,不同內容橫向排布,用戶可以快速點擊不同標簽切換。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

分層導航。用戶在屏幕上點選不同選項,通往不同的子界面。其中地圖應用采用的是這種結構。

想做好車載設計?先掌握這份 Carplay 設計規范(上)

音樂類應用可以使用橫向導航,也可以使用分層導航,在設計導航的過程中,應當注意:

  • 盡可能讓用戶快速而輕松地獲取內容。結構化信息,讓用戶以最少點擊、滑動來找到他們想要的東西。
  • 用戶在進行返回操作的時候,請保留之前的界面,防止用戶迷失。避免音頻自動播放,除非它是主要功能。
  • 為每一個界面分配一個固定清晰的路徑。
  • 盡可能使用標準的導航組件,比如使用選項卡菜單欄和列表視圖。
  • 使用導航欄應該能夠遍歷所有的層次結構。
  • 使用標簽頁選項卡的時候,顯示同一級的內容或者分類。

2.5、測試

全面的測試,是確保應用可用性的重要前提。

  • 請在實際與 Carplay 兼容的顯示器上進行測試,最好是在真實的車上進行測試。
  • 在惡劣的網絡條件下測試,比如穿越隧道或者網絡覆蓋狀況較差的區域。
  • 測試安裝和設置的流程中有沒有問題,并且密切注意涉及到登錄和隱私相關的問題。

3.1、音頻內容

無論音頻是否是你的 APP 的主要內容呈現形式,你都需要了解用戶對于音頻有哪些期待,并且盡量去貼合這些需求。

  • 只有當準備好播放之后,才會切換到「正在播放」的屏幕頁面。
  • 音頻加載完畢之后就可以開始播放,即使描述性的信息依然在加載。
  • 盡量避免自動播放。
  • 如果被別的程序和提示打斷,在暫停之后再繼續恢復音頻播放。
  • 在必要的時候,自動調整當前內容的音量,而不是整體的音量。
  • 在系統發出短提示音的時候,使用系統音量。比如警報。

3.2、汽車數據

在管理汽車功能的頁面當中,廠商提供的功能和數據將會無縫的接入到 Carplay 當中,比如氣候、網絡、GPS 等等。當數據不可用的時候,盡量提供合理的響應方式。

比如當汽車通過隧道,沒有 GPS 信息的時候,盡量以不打擾的方式來告知用戶。

3.3、iPhone

Carplay 是和 iPhone 連接起來使用的,并且在程序數據上也相互兼容互通,只是Carplay 本身提供的是簡化之后的 UI ,并且針對駕駛的場景進行了優化。

  • 當 Carplay 處于活動狀態時,隱去 iPhone 上的 APP 交互。
  • 請不要將 iPhone 和相關用戶置于 Carplay 范疇以外,因為正常使用的時候需要 iPhone 的數據接入。
  • 確保當 iPhone 鎖定或者在后備箱中的時候,你的程序可以正常使用。

3.4、旋鈕和控件

支持 Carplay 的車輛通常會有物理按鈕和旋鈕,它們可以作為 Carplay 交互的輔助。當物理按鍵作為用戶的主要交互介質的時候,通常至少會存在一個 Siri 按鈕,導航控件,選擇控件,以及后退控件。

這些控件和 Carplay 應當高度對應,無論是播放、暫停、上一首/下一首 都應該做出準確的相應。具體可以參閱:MPRemoteCommandCenter

想做好車載設計?先掌握這份 Carplay 設計規范(上)

當 Carplay 投射的屏幕不支持觸摸的時候,還有基于旋鈕的焦點式交互方式,當用戶擰動旋鈕的時候,能夠讓光標從一個元素切換到另一個元素,激活并交互。

文章來源:優設 作者:陳子木

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



Carplay 設計規范(下)

濤濤

3.5、觸摸屏交互

用戶可以通過內置的觸摸屏來與 Carplay 直接進行交互。高保真屏幕可能會比低保真屏幕,在交互效率上更高,更低延遲,支持更多手勢。Carplay 的交互基本采用的都是單指交互,具體可以參考下方列表:

想做好車載設計?先掌握這份 Carplay 設計規范(下)

在設計交互的時候,盡可能少地使用觸摸交互,避免用戶在駕駛過程中分心。

3.6、Siri

Siri 是 Carplay 的基本功能,無干擾的語音讓用戶和程序之間的交互更加自然和安全

即使看不到 Carplay 的屏幕,依然可以使用方向盤上的語音命令按鈕來激活 Siri。激活后,Siri 會針對語言進行處理和分析,并且轉換為可用的指令。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 快速響應,最大程度地減少交互。
  • 使用自定義詞匯表,提升 Siri 的識別準確度。用戶可以通過特定的術語來提升語音識別準確度。

具體可以參與 SiriKit 編程指南。

4.1、動畫

動畫可以讓屏幕上的元素,擁有一層附加的視覺效果。如果方法得當,動畫還能呈現狀態,提供反饋,增加用戶直接操控時候的感覺,并且告知用戶可視化操作的結果。

  • 不要為了使用動畫而使用動畫。過多不必要的動畫會分散用戶注意力。
  • 保持真實感和可靠。當動畫沒有意義且無視物理規律的時候,會讓用戶感到迷惑。
  • 使用一致的動畫效果。自定義動畫應該和內置的動畫保持一致。
  • 將動畫設為可選項。
  • 更多動畫的演示實例參考這里的案例:https://developer.apple.com/design/human-interface-guidelines/carplay/visual-design/animation/

4.2、品牌設計

成功的品牌設計并不只是把 LOGO 塞到 APP 當中,出色的 APP 能夠巧妙地使用字體、配色和圖像來構建獨特的品牌形象。

關于這方面的設計,可以詳細參考 iOS 設計規范中的 配色、版式以及 圖標和圖像 這三個章節。

在品牌設計上,Carplay 要求設計師:

  • 盡可能將品牌設計以精致醒目的方式呈現出來。由于車內的使用場景,人們不會使用 Carplay 來查看廣告,最佳的用戶體驗則是他們最需要的東西。
  • 著重呈現品牌的一致性和功能性。確保你的 Carplay 界面是直觀且易于導航的,并且提供駕駛時真正有用的功能。
  • 遵守 Apple 的品牌設計準則。具體可參考:Apple Trademark List 和 Guidelines for Using Apple Trademarks

4.3、配色

通常,配色可以提供交互性,提供視覺連貫性,并且對界面賦予生命力。

  • 你需要選擇和你的品牌LOGO可以搭配使用的配色方案。
  • 避免讓交互性元素和非交互性元素使用相同的配色。
  • 在實際汽車環境下,對你的配色方案進行測試。
  • 盡量使用深色背景。
  • 注意不同文化對于色彩的理解,以及色盲用戶的需求。
  • UI中采用足夠明顯的色彩對比。

4.4、布局

Carplay 支持不同像素密度不同縱橫比的顯示,但是這也意味著在實際布局設計的時候,要格外小心,盡量讓你的設計在不同的屏幕分辨率和長寬比之下,都顯得足夠正常。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 以整潔的布局提供有用的信息,讓駕駛者可以一目了然地掃視到信息。
  • 在整個 APP 內部保持一致的外觀。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 確保主要內容足夠清晰醒目,并且感覺上是可用的。
  • 使用對齊的方式來保持清晰的層次結構,一目了然。
  • 為交互元素留出足夠的間距和交互空間。
  • 基于駕駛員的位置來排布元素,盡可能順手。
  • 考慮物理控件對于界面的影響。

4.5、字體版式

Carplay 采用的字體是蘋果的 SF 字體。你可以在這里下載到字體

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 最小程度使用文本,使用圖像信息傳遞速度更快。
  • 強調重要信息。通過色彩和字體粗細,來凸顯最重要的信息。
  • 避免使用自定義字體。
  • 盡可能使用內置的文本樣式。
  • 使用正文文本樣式作為主要內容的字體。
  • 使用 SF 字體的時候,Carplay 會根據最佳的文本大小自動適配間距。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

5.1、圖片尺寸和分辨率

和 iOS 類似,在 Carplay 當中,屏幕分辨率也分為 1x 2x 和 3x。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

5.2、APP 圖標

想做好車載設計?先掌握這份 Carplay 設計規范(下)

每個 Carplay APP 都應該有一個顯著突出的圖標,確保在駕駛的時候可以輕松點擊到。

  • 可以直接使用 iPhone 的 應用圖標。
  • 不要使用黑色作為圖標的底色。
  • 設計圖標的時候,圖標應該有視覺焦點。
  • 采用簡單且易于理解的圖標設計。
  • 確保圖標本身是不透明的,并且讓圖標背景足夠簡單。
  • 不要在圖標當中使用照片、截圖或者其他界面元素。
  • 不要在APP的具體界面當中使用 APP 圖標,避免混淆。
  • 設計完成的圖標應該是方形的,系統會使用蒙版將邊緣處理為圓角矩形。
  • Carplay 的圖標尺寸分別為 @1x 60x60px ;@2x 120x120px ;@3x 180x180px

5.3、自定義圖標

如果你設計的 APP 當中,需要的圖標并不存在于系統圖標當中,或者系統圖標與你的 APP 并不匹配,可以自定義圖標設計。

  • 創建簡單的,可識別的圖標設計。不要加入過多的細節,確??勺x性。
  • 設計圖標的時候,使用透明背景、抗鋸齒且無陰影的純色圖標。
  • 保持圖標在風格、尺寸以及各個規格上的高度一致。
  • 在設計選項卡圖標的時候,選擇兩種不同版本的圖標,分別是選中狀態和未選中狀態的。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 不要在標簽欄圖標當中使用文本,如果需要,則在標簽欄下方的標題中說明。
  • 自定義圖標尺寸要求如下:

想做好車載設計?先掌握這份 Carplay 設計規范(下)

5.4、系統圖標

系統本身內置了許多小圖標,服務于日常各種不同的任務,通常這些小圖標會使用在導航欄和標簽欄當中,盡可能使用這些內置的圖標。

  • 按照用戶習慣和預期來使用這些系統圖標。
  • 如果找不到滿足需求的圖標,就請使用自定義圖標。
  • 在導航欄中使用圖標的時候,具體可參閱這份文檔:UIBarButtonItem

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 在標簽欄中使用圖標,請參考這份文檔:UITabBarItem

想做好車載設計?先掌握這份 Carplay 設計規范(下)

6.1、上拉菜單(Action Sheets)

上拉菜單是一種特定的彈出菜單,通常從屏幕底部彈出,并且包含2個以上的選項。不過在 Carplay 當中應該盡量避免使用上拉菜單,在 iPhone 上倒是可以使用它,但是不要在 Carplay 中顯示。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

6.2、活動指示器(Activity Indicators)

在內容加載的過程當中,請勿讓屏幕保持靜止,或者空白,使用活動指示器確保它看起來沒有靜止。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

如果可以的話,可以在加載過程中提供對用戶有幫助的信息。具體可以參考 UIActivityIndicatorView

6.3、警告(Alerts)

警告會用來通知用戶一些關鍵性的信息,警告通常由標題、可選信息以及一個或者多個按鈕組成。除此之外,警報的視覺系統是靜態的,無法自定義。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

警告最小化呈現。由于警告本身會破壞用戶體驗,所以請在重要的情況下使用警報。
相關開發人員可以參考這份文檔:UIAlertController

  • 盡可能編寫足夠簡單的、描述性的文本標題。
  • 請盡量使用簡短完整的句子。
  • 避免讓文本聽起來上指責、評判或者侮辱。
  • 不要對警報按鈕進行解釋。
  • 單鍵警告僅僅具備通知的作用,通常采用有2個選項的兩鍵警告。
  • 給警告按鈕以足夠簡明的邏輯和標題。
  • 在右側放置常用的選項,在左側放置取消按鈕。
  • 對取消按鈕采用正確的文本標簽。
  • 對于涉及刪除的破壞性操作,應該采用特別的樣式標識出來,具體可以參考
  • UIAlertActionStyleDestructive 和 UIAlertAction 這兩份文檔。
  • 允許通過點擊「Home」按鈕來消除警告。

6.4、按鈕(Buttons)

按鈕通??梢杂脕碛|發一些特定的操作,具有可自定義的背景,并且可以包含標題和圖標。和 iOS 不同,Carplay支持的按鈕樣式非常有限。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 在按鈕標簽中使用動詞。
  • 保持標題足夠簡短
  • 僅在必要的時候,添加邊框和背景
  • 更具體的開發參考 UIButtonTypeSystem 和 UIButton

6.5、標簽(Labels)

標簽是推送到屏幕上的一條短消息,這個標簽可以顯示任意數量的靜態文本。在設計標簽的時候,盡量保持標簽清晰易讀。具體開發可參考UILabel。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

6.6、導航欄

導航一般在屏幕的頂部,通常導航欄右側會有返回按鈕,中央是標題。有時右側會有其他的可交互的控件。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 在導航欄中間顯示當前視圖的標題。
  • 避免在導航欄上放過多的控件。
  • 不要包含多段式面包屑導航。
  • 導航欄標題應該給按鈕留下足夠的空間。
  • 使用標準的返回按鈕。
  • 開發請參考 UINavigationBar 這份文檔

6.7、滾動視圖(Scroll Views)

滾動視圖讓用戶可以瀏覽到更多的內容,用戶可以用滑動或者輕拂來進行瀏覽信息。

  • 不要將一個滾動視圖嵌套到另外一個滾動視圖當中。
  • 通常,一次只顯示一個滾動視圖。
  • 開發可以參考文檔:UIScrollView

6.8、標簽欄(Tab Bars)

標簽欄通常出現在屏幕頂端,并且用戶可以借此快速切換。邏輯上標簽欄可以包含無限多的 Tab,但是可見的標簽數量,會根據實際顯示尺寸而有所不同。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 通常標簽欄展現的是平鋪的信息層次結構。
  • 選項卡功能不可用的時候,不要刪除或者禁用該選項卡。
  • 嚴格使用標簽欄來進行導航。
  • 通常使用 3 個到 5 個選項卡。
  • 使用圖標來標示標簽欄,會更加通俗易懂。
  • 具體開發可參考文檔:UITabBar

6.9、表格(Tables)

表單通常會以單列的樣式存在,干凈有效地呈現大量信息。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 考慮表單的寬度,避免難以讀取。
  • 盡可能快速地顯示表單的內容。
  • 在加載的時候,結合活動指示器呈現進度。
  • 具體參考開發文檔:UITableView

在具體的表單條目的設計上,也有詳細的規格要求。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

默認樣式,左側可放置圖片,并且標題也是靠左對齊的。具體參考文檔:UITableViewCellStyleDefault 以及 UITableViewCell

想做好車載設計?先掌握這份 Carplay 設計規范(下)

副標題樣式。這是包含標題和副標題的一種樣式,兩者靠左對齊,上下排布。具體參考文檔:UITableViewCellStyleSubtitle 和 UITableViewCell

想做好車載設計?先掌握這份 Carplay 設計規范(下)

Value1 樣式。標題靠左對齊,副標題靠右對齊。具體參考文檔:UITableViewCellStyleValue1 和 UITableViewCell

想做好車載設計?先掌握這份 Carplay 設計規范(下)

Value2 樣式。標題和副標題文本都靠右對齊,具體參考文檔:UITableViewCellStyleValue2 和 UITableViewCell

  • 保持文本足夠簡介,避免無法完整顯示。
  • 點擊選擇之后,記得顯示反饋。
  • 為非標準表格設置自定義樣式。


文章來源:優設 作者:陳子木

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




值得反復學習的「交互設計5大定律」

濤濤

推導

在介紹重新定義的交互設計定律之前,我們先來回顧一下經典的《交互設計 7 大定律》

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

費茨定律告訴我們要節省操作時間應該怎么做:放大目標對象,減小目標距離。

席克定律告訴我們要節省決策時間應該怎么做:盡可能的減少選項的數量。

米勒定律告訴我們人類記憶的上限,所以要將信息數量控制在 4±1 內。

接近法則告訴我們相鄰≈相關,所以要根據信息親密性組織其位置關系。

泰思勒定律告訴我們復雜性是守恒的,我們要平衡復雜性的天平向誰傾斜,以實現整體效益最大化。

防錯原則告訴我們用戶出錯是不可避免的,我們只能減少并降低其犯錯的可能性。

奧卡姆剃刀原理告訴我們如無必要,勿增實體,設計要盡量的簡約。

不知道你看完以上 7 個定律有什么感受,我的感受是,他們彼此之間有些重合(奧卡姆剃刀原理、席克定律、米勒定律都在傳達信息要精簡),但用其概括交互設計的精髓,又覺得不夠完整(做到這幾點就夠了嗎?),整體交互設計的精髓要義并沒有表達地很清楚(如何用一句話來概括交互設計的目標?)

帶著這幾點疑問,我重新去思考到底什么是交互設計的底層設計目標?到底哪些交互設計定律能更好的體現其本質?以下是我思考的結果:

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

交互設計的終極目標是改變和影響用戶的行為,達到期望的業務結果,比如下單率、搜索率等結果指標,結果指標因產品而異,不具有普適性,不可一言以概之。而在交互設計的過程中,以交互設計定律為指導的過程指標是通用的,幾乎可以說放之四海而皆準,我把這四個過程指標概括為四字箴言:少快好省。怎么理解呢?

  • 所謂少,就是信息功能要精煉,要一目了然,要盡可能減少功能/信息的復雜度。
  • 所謂快,既是性能也是效率,指的是要盡可能快的響應用戶的操作,達成用戶目標。
  • 所謂好,就是產品的設計必須達成行業一流的設計標準,讓用戶用的順手、滿意。
  • 所謂省,就是省心省力省時,能夠幫助用戶節約時間,降低操作和認知負荷。

基于這樣的過程指標,我挑選了 5 個設計定律來進行設計指導,下面我們逐一來看。

奧卡姆剃刀原理

奧卡姆剃刀原理告訴我們:如無必要,勿增實體,即“簡單有效原理”。對于工業產品適用,對于軟件類產品也是如此。因為任何增加的非必要信息和功能,都會帶來生產/維護成本的增加,以及用戶認知/操作成本的增加。在現今這個注意力稀缺的時代,復雜會讓人望而卻步,也容易使人迷失,而精簡的產品更利于人們的理解和操作。

典型案例:

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

小米的電視遙控器設計和傳統遙控器設計相比,對奧卡姆剃刀原理的運用非常極致,相信大家都可以感受到精簡前后的視覺/操作/認知負荷的降低。

我們再來看一個互聯網產品設計的案例:

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

19 年初,外銷瀏覽器做了一次視覺煥新大改版,從交互結構到視覺界面變化都比較大,所以我們就增加了新版本的滑屏引導,告訴用戶有哪些界面及功能的變化,結果新版灰度期間,信息流滲透率下降了 33%,搜索下降了 18%,經過仔細的數據排查,發現都是滑屏引導惹的禍,當把滑屏引導去掉后,搜索和信息流的數據都恢復正向了。

19 年底,我們做的另一個運營活動也經歷了類似的教訓。當時錦鯉很火,我們就做了一個錦鯉大作戰的小活動,畫面精致,獎勵也比較誘人,但是發現活動上線后轉化率效果卻不及預期,我們再次把矛頭對準了蒙層引導,通過去掉蒙層引導,CTA 按鈕場景化,并增加微動效,轉化效果立刻得到了提升。去掉不必要的引導,讓界面自己會說話,這也是奧卡姆剃刀原理的一個體現。

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

米勒定律

米勒定律告訴我們:人們工作記憶平均能記住的元素數量僅為 4±1。所以我們在設計時,首先要運用奧卡姆剃刀原理,盡可能的去做減法,盡量將數量控制在 4±1 的范圍內。如果選項較多,且減無可減時,就需要對信息/選項進行分類和分組,保證類別的數量在 4±1 的范圍內。

典型案例:

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

對于像手機號、銀行卡號、身份證號這種類型的信息,因為其固有的信息長度無法做精簡,所以在信息組織時就會采取分組的方式,保證分組的數量控制在 4±1 的范圍內。

另一個案例也是關于我們的外銷瀏覽器:

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

左一是改版前的頁面,功能有 12 項之多,且產品認為減無可減了。我們的交互設計師通過對頁面功能使用頻度及產品功能的重要程度進行分析,將功能劃分為了三大類:重要功能,常用功能,必備功能。然后通過強化、保持和收納的方式將其進行右圖所示的呈現,界面復雜度迅速降低,功能清晰度和操作便捷度顯著提升。

多爾蒂門檻

多爾蒂門檻告訴我們:系統需要在 400ms 內對使用者的操作做出響應,這樣才能夠讓使用者保持專注,并提高生產效率。

先來看一組模擬的響應效果:

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

△ 圖片來自作者「超人的電話亭」

從這組圖片可以感受到,當圖片在 400ms 內時,是勉強可以接受的,但當時間延長到 600ms 及以上時,人們就會感受到明顯的延遲、等待和卡頓感。

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

多爾蒂門檻對響應時間的上限給出了參考,而后續的研究則給出了更細致的響應標準,比如元素的點擊反饋應控制在 0.1s 左右,盡量不要超過 0.14s,單個元素入場退場時間應控制在 0.2s 左右(入場一般比退場稍慢),而頁面的轉場時長根據頁面大小和轉場動效的復雜度盡量控制在 0.3s-0.4s 之間。只有響應時間符合上述標準,才不會讓用戶對產品的流暢性有所懷疑。

雅各布定律

用戶將大部分時間花在別人家的網站(產品)上,而不是你的。這意味著他們希望你的網站(產品)跟別人的有相同的操作方法和使用模式。雅各布定律告訴我們:作為設計師,我們必須要多研究把玩各種 App,這樣我們才能夠對當下產品的設計趨勢有更直觀的感受。

對于新入行的設計師,我會建議大家好好研究一下 ios 和 android 的 OS 規范,了解平臺的特性,同時再翻翻下面這些書籍,了解各種常見的設計模式,豐富自己的設計組件庫。

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

此外,在做某種特定類型的產品設計時,也非常有必要做行業及競品分析,這樣才能確保我們在做產品設計時,可以延續用戶的主要視覺及行為習慣,減少用戶的學習及使用成本。

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

以視頻 App 為例,行業內的頭部產品在產品框架及元素布局上都具有高度的一致性,這也是雅各布定律的一個體現。

可感知性原則

操作前有預期,操作時有反饋,操作后可撤銷。這是十年前我入行時接觸到的一句話,我不知道是誰提出來的,但卻是這些年我做交互設計最重要的一條參考原則,我將其簡單命名為可感知性原則。

操作前有預期,指的是要符合視覺認知原理,符合行業設計習慣,讓用戶一看就懂。

操作時有反饋,指的是操作時要即時反饋,就近反饋,并且反饋合理。

操作后可撤銷,指的是任何操作都盡量讓其可撤銷,讓用戶無后顧之憂,安心探索。只要存在用戶行為的交互,這個準則都是可以用來檢驗的,以下圖為例。

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

當我們想要刪除某張照片時:

操作前有預期:工具欄位于默認的底部位置,有刪除圖標+文字明確示意的功能按鈕,讓用戶一看就知道應該選擇哪一項操作。

操作時有反饋:點擊刪除按鈕時,刪除按鈕有一個灰色的點擊態,隨后馬上出現一個確認彈窗,而且是就近位置出現,確認彈窗上提示簡單,按鈕用的是 CTA 的形式,操作交互一目了然。

操作后可撤銷:當用戶確認刪除后,照片消失,但是還可以去最近刪除的文件夾中,恢復照片。

結語

到這里,交互設計 5 大定律就全部介紹完成了,圍繞交互設計的過程指標,少、快、好、省依次展開,給大家介紹了奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。

值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

也是為了滿足米勒定律的 4±1 原則,我將交互設計定律濃縮成了 5 條,如果在此基礎上加一條的話,我會在「好」的指標下,增加一條「格式塔原理」,它包含的 7 大設計原則。格式塔原理是做設計排版的基石,絕對值得所有設計師反復學習、研究和運用。

文章來源:優設  作者:VMIC UED.Joyce

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

微信朋友圈被“折疊”,透露出怎樣的產品設計思路?

濤濤

微信作為一個用戶體量龐大的一個熟人社交平臺,在我們日常生活和工作中都會用到;而微信經過不斷地發展也更新了很多新的社交功能,并且具有商業價值,朋友圈也是其中一個;本文作者分享了關于微信朋友圈被“折疊”的產品設計思路,我們一起來看一下。

最近微信朋友圈被“折疊”的設計引起了網友熱議,褒貶不一。

有的人認為每天不用被鋪天蓋地的刷屏廣告“淹沒”了,有動力多刷一會朋友圈,終于有機會在茫茫廣告里找到朋友的動態;但也有反對的聲音,認為微信管的太寬了,如果不需要看,用戶早就主動“屏蔽”了,希望微信團隊可以改回來。

微信背靠10億用戶,每一個小的設計改動,都有可能引起“全民轟動”;面對如此龐大的用戶群體,以及千人千面的需求,微信團隊表示:

“朋友圈是用戶分享和關注朋友們生活點滴的空間,一直以來批量或高頻次發送營銷性信息的行為,存在侵擾用戶安寧、減損用戶朋友圈體驗的問題,(因此)被較多用戶投訴。”另外,團隊還表示:“根據《微信個人帳號使用規范》,此類內容(營銷信息)一經發現,騰訊將根據違規程度對微信帳號采取相應的處理措施,包括但不限于折疊內容、將內容處理為僅發布者自己可見等?!?

當產品面臨質疑時,如何從眾多的聲音中,抽絲剝繭,刪繁就簡,找到與產品定位真正匹配的核心需求?通過下述三方面思路分析,我們一起來看看要如何抓住產品的核心用戶。

一、共情

解讀他人的真情實感,即為共情,又叫做同理心,是體驗他人內心世界的能力。

它包含三個方面的含義:

  • 觀察、收集用戶的言行舉止,深入用戶內心去體驗他們的情感和思維;
  • 透過用戶的經歷和個性,理解他們的本質性需求;
  • 運營設計語言和信息傳達技巧,把對用戶的共情傳達給用戶,并影響用戶取得真實反饋。

最近娃哈哈集團和斗羅大陸熱門IP聯合,推出新版低糖風味酸奶飲品,深度共情年輕消費群體。那么,他們是如何做到的呢?

結合了騰訊視頻熱播國漫《斗羅大陸》最新劇情,女主小舞“獻祭”而死,而廣告恰恰演繹了,喝了酸奶飲品小舞即刻“元氣回歸”。

首先對觀眾遺憾的心情,給予及時“補償”;其次,運用廣告語言,分別讓男女觀眾產生強烈的帶入感,比如:

  • 小舞說:“哥,你真不愧是唐門營養師”。(滿足男性用戶的成就感)
  • 唐三說:“每一種滋味都是為你”。(滿足女性用戶的安全感)

我們在來看看小紅書上面的部分評價內容,提到劇情、口味,低糖、適合誰喝,顏值高,均透露出對飲品的關注和喜愛。

娃哈哈集團借用《斗羅大陸》IP作為橋梁,將用戶渴望找到安全感、成就感的自我體驗,寄托在自己的產品上,叫做“心理投射”式營銷。

所謂“心理投射”說得直白一些,就是“借物傳情”,“借景抒情”,人們把自己內心的感受和內容,通過客觀世界反應出來;因此,常??梢詮囊粋€人對他人對看法、以及自身的興趣愛好,推測這個人的心理特征和意圖,而不僅僅通過語言來解讀他們的需求。

二、不自覺欲望

在訪談的過程中,提問是研究用戶動機的可行性方法之一,但訪談不僅僅是語言交流,還包含肢體語言、微表情以及隱藏在內心深處的沖突和欲望,這些需求屬于用戶的不自覺欲望。

如果說自覺欲望是用戶清晰的知道自己想要什么,那么不自覺欲望,就是連用戶自己也說不清,道不明的欲望;如果把用戶的自覺欲望比喻成冰山表面,不自覺欲望就是冰山深入海平面以下的部分。

比如,明知道吃蛋糕要長胖,但是還是忍不住要吃;明知道熬夜對身體不好,但是還是忍不住刷手機到午夜。

那種“忍不住”的感覺就是人們最深層的需求,吃甜食、刷手機可以讓人心情愉悅,讓人產生放松的感覺;而“控制”需要人們用意志力去規范,而非出于“本性”。

娛樂性產品重在激發人們的不自覺欲望,釋放本性,比如《和平精英》為了讓新手盡快融入游戲,自動匹配“機器人”和玩家戰斗,讓玩家贏得“很爽”,等玩家對游戲產生情感依戀,再逐漸增加和真人匹配的戰斗。

而教育類產品要運用用戶本性,鼓勵用戶形成良好自律性;比如在記單詞第一天,寫下學習計劃并鼓勵分享出去,在為用戶細化目標的同時,“分享”行為形成一種“自我形象壓力”,設計者撬動用戶內心,向往自己變得更好的本性,慢慢讓用戶形成學習習慣。

三、透過數據看本質

以上我們從“釋放-壓抑”的縱向深度上討論了用戶面對自己欲望的處理方式,接著,我們在“自我-適應”的橫向緯度來看看用戶的處理方式;在社會中,人們在歸屬群體和獨立自我之間進行權衡,兩者向來也是此消彼長的關系。

比如,年輕群體在選擇“追求自我”還是“適應環境”方面,也有了新的突破和巧妙的和解,具體體現在95后大多屬于獨生子女;他們是互聯網最原始的居民,童年伴隨著網上社交一起成長,更樂于在互聯網上尋找志同道合的朋友,而非身邊的熟人社交;形成一種“獨而不孤”的社交氛圍,在“獨處”和“融入”環境方面相得益彰。

通過上述縱橫兩個緯度的標尺,我們可以建立消費動機分析模型,來解讀大數據行為標簽背后消費群體的渴望。

以B站為例,通過分析B站用戶的興趣標簽,“順藤摸瓜”式的洞察B站用戶群體的核心需求;數據清洗后,我們收集到以下12個緯度的興趣熱門標簽:

游戲高玩、漫畫達人、生活記錄、音樂家、好奇心學霸、吃貨軍團、時尚潮人、運動健將、鏟屎官、數碼發燒友、愛豆粉絲、汽車科技。

根據對上述興趣的理解,每個標簽可以按照如下表格進行拆分解讀,最后對每種傾向進行統計。

合計出心理動機傾向最明顯的三個象限是:樂享釋放、融合溝通、活力探索。

而這些心理特性,正是符合B站作為24歲以下,年輕用戶最愛的,文化社區的產品定位,把B站打造成用戶釋放自我、融合溝通、活力探索的平臺。

B站的激勵機制,極大鼓勵up主的創作細胞,同時開發了他們探索的內在需求,為B站產出海量內容;而這些內容更好的滿足了廣大用戶樂享釋放、融合溝通的訴求,形成“自產自銷”的良性循環。

2020年,B站彈幕頻率出現最高的詞語是“爺青回”,折射出年輕群體對青春、活力生活的渴望與留念;它頻繁出現在B站彈幕上,也從另一個側面反應出在B站是可以讓這樣的情緒棲息的場所,是B站深根目標用戶,并獲得良好反饋的體現。

四、基于情感共鳴的取舍之路

最后,我們再來看看陪伴我們每個人的微信,產品定位很明確的指出是:“用戶分享和關注朋友們生活點滴的空間”,舊版微信的開屏畫面,暗示著“孤獨”的個人與世界“相連”的深深渴望。

而剛剛升級的8.0版本,開屏動畫簡單的幾句:“我看見你,我看見笑臉,我看見煙花,我看見一首歌,我看見你看見的”迅速讓用戶產生共鳴感,拉近產品和用戶之間的距離,激活用戶的“有你陪伴不孤單”的不自覺欲望;而新功能鼓勵用戶分享情感,情感外化的設計也很快上來熱搜。

朋友圈自動折疊的內容,通常是用戶直接復制、粘貼的內容;對于眾多微信創業者來講,思考如何做出有個人特色IP的朋友圈,想辦法不斷輸出優質內容來打動你的朋友,才是事業成功的制勝法寶。

微信團隊在龐大的用戶群體中,做出與產品定位匹配的“取舍”決策,也將對產品的穩定發展,具有深遠意義。

文章來源:人人都是產品經理  作者:設計師的翻車日記

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


二次確認的設計思路

濤濤

二次確認的主要作用是防止誤操作,以及警示操作帶來的后果,避免用戶無意之間執行了本不想做的操作。從用戶流程圖中我們不難看出,二次確認是一種打斷用戶流程的設計,只是迫不得已的折中方案。所以在是否使用,如何使用上需要有一定的考慮,否則會適得其反。

從這3個方面,幫你掌握二次確認的設計思路

我們可從操作的可逆性,嚴重性,復雜度和操作頻率進行前期分析,即用戶的操作是否可以撤回,是否會造成嚴重或有漣漪效應的后果,是否經常做這樣的操作。下文將操作的危險程度分了三個級別,對不同類型的二次確認模式進行說明。

低危操作

對于低危操作我們可以不設置二次確認,或只在危險程度升高時再和用戶確認。

1. 操作基本無害,不設置二次確認

一些非常常規,很好注意到變化,或者容易回滾的操作無需配置二次確認。例如新建文件夾,復制文件,完成一個代辦事項等。

從這3個方面,幫你掌握二次確認的設計思路

2. 達到危險性后再進行確認

這種場景比較特殊,我們用一個例子說明。比如當用戶處于一個有兩層級別的托盤,第二級的新表單沒有完成填寫,就點擊了表單托盤的關閉按鈕。我們可以讓頁面滾動到用戶沒有完成的地方,通過條幅提示,標紅或閃爍等交互方式提醒用戶。按照此時危險級別,我們僅需采用低強度的溝通方式,讓用戶明白操作的問題即可。

從這3個方面,幫你掌握二次確認的設計思路

然而假如用戶點擊的是瀏覽器的標簽頁關閉按鈕,其危險級別就很高,系統很可能拋棄用戶未完成的表單導致數據丟失。此時我們可以通過前端技術,在用戶點擊瀏覽器的刷新或關閉按鈕時,彈出二次確認對話框。

從這3個方面,幫你掌握二次確認的設計思路

中危操作

日常的一些操作,如提交表單,刪除文件,發送交易等,若被用戶在沒有明確后果的情況下執行,會造成難以補救的不良影響,但后果不至于完全不可挽回。我們可以在此危險范圍內,配置不同形式的二次確認流程。

1. 即時撤銷

撤回提醒一般針對操作頻率高且容易回滾的操作。例如在線上網盤刪除或移動文件后,通常會彈出一個 toast 提示,告知用戶成功執行了操作,并顯示“撤回”按鈕,讓用戶在誤操作時可以快速回滾。

從這3個方面,幫你掌握二次確認的設計思路

2. 提示信息

提示信息是二次確認最常見的一種,適用場景廣泛。系統會在用戶執行操作時打斷,提示后果并詢問是否繼續。其界面表現形式比較豐富,例如購物時的結算賬單頁,轉賬時的確認頁,退出程序時的文件保存彈窗等等。

從這3個方面,幫你掌握二次確認的設計思路

3. 垃圾桶或類似的臨時承接結構

臨時承接結構適用于有不良后果但操作頻次高的場景。如果用戶經常需要做一些有破壞性的操作,我們可以在系統中布置一個用來臨時承接這些操作的結構,而不直接執行破壞性操作。如此設計有兩個優點:用戶不僅可以隨時反悔,而且避免了系統總是打斷用戶的高頻操作。

從這3個方面,幫你掌握二次確認的設計思路

例如大部分操作系統刪除文件時只是將文件移動到垃圾桶,并不會造成實質傷害。二次確認只會出現在用戶需要清空垃圾桶時。這便通過臨時承接結構緩沖了用戶的破壞性操作,同時避免了頻繁打斷用戶。

高危操作

執行后果極其嚴重且無法挽回的操作,例如刪除賬號,刪除虛擬幣錢包,抹除設備數據等時,系統需要用戶仔細想清楚,完全理解即將發生的事情并接受后果,此時可采用攔截性強,步驟多的確認方式。但請務必注意,即將列舉的幾種設計會給用戶帶來一定程度的挫敗感。除非萬不得已,盡可能考慮上文中的設計方式。

1. 按鈕倒計時

在確認按鈕上倒計時,給用戶一段冷靜的時間,倒計時完成后按鈕才變回可用狀態。

從這3個方面,幫你掌握二次確認的設計思路

2. 多次詢問

多次詢問是一種較為粗暴的確認形式,通過不斷地警告讓用戶確認。大家可能依稀記得蘋果手機的重置流程:首先需要輸入蘋果賬號密碼和設備密碼驗證身份,再通過兩層二次確認彈窗,系統才會開始抹除數據。

從這3個方面,幫你掌握二次確認的設計思路

3. 勾選并接受后果

將說明部分拆解成復選框,用戶依次勾選并接受后果之后,執行按鈕才會變成可用狀態。通常用于有嚴重或復雜連帶后果的操作。例如刪除虛擬幣錢包時,軟件會讓用戶接受:未備份密鑰的資產將永久丟失;沒有服務商可以找回資產;軟件方不承擔任何連帶責任。

從這3個方面,幫你掌握二次確認的設計思路

4. 輸入操作對象名稱

常見于底層目錄的刪除等操作。用戶需要正確輸入操作對象的名稱才能執行,步驟較為繁瑣,非常耗費用戶精力,但很大程度上可以規避用戶操作錯誤的對象。

從這3個方面,幫你掌握二次確認的設計思路

5. 冷靜期(非二次確認)

當注銷臉書等賬號后,服務會將賬戶信息繼續保留一段時間,若冷靜期內用戶重新登錄,賬號信息會自動恢復。冷靜期的設計原理和 2.3 節介紹的臨時承接結構有異曲同工之處,其并不屬于二次確認的范疇,但針對高危操作給予了用戶反悔的余地,故補充在這里。

從這3個方面,幫你掌握二次確認的設計思路

注意事項

無論是從人本主義還是功能的角度,二次確認都應讓用戶能夠快速理解彈窗的意圖并作出判斷,減少使用中的挫敗感。下面羅列了一些能夠提升使用體驗的設計點。

1. 文案的編寫

無論是從人本主義還是功能的角度,二次確認都應讓用戶能夠快速理解彈窗的意圖并作出判斷,減少使用中的挫敗感。

標題文案為簡明的疑問句。

用戶映入眼簾的應是一個問題,也就是程序為什么打斷了用戶,需要用戶確認什么操作。同時標題的內容不宜過長,對操作后果的詳細解讀可作為描述信息放到彈窗內容中。

從這3個方面,幫你掌握二次確認的設計思路

不要強加說明語句。

盡可能減少常規型二次確認打斷用戶的時長,如果能夠用一句簡單的標題講清楚,則無需增加說明,讓用戶快速理解,快速決斷。

從這3個方面,幫你掌握二次確認的設計思路

按鈕文案指明操作后果且無歧義。

有些操作比如“取消訂單”中包含了“取消”一類的字眼,為避免歧義,按鈕的文案應盡量不使用“確定/取消”??蓪⒉僮鲙淼暮蠊苯訉懺诎粹o上,減少誤會。

從這3個方面,幫你掌握二次確認的設計思路

2. 避免濫用

在設計時不僅需要從操作的可逆性,嚴重性,復雜度和操作頻率來考慮配置何種形式的二次確認,甚至繞開或不配置二次確認,盡可能減少對用戶的驚擾,否則不僅降低體驗還可能會讓用戶忽略真正的威脅。這里舉三個日常很容易接觸到,通過流程優化避免了二次確認的例子:

免密支付:

用戶可以設置在一定數額范圍內轉賬時不進行密碼確認。在此數額內的交易即便發生異常,損失也比較輕微,而且平臺可以幫助追回。

從這3個方面,幫你掌握二次確認的設計思路

草稿:

當用戶在聊天軟件的對話中輸入了內容,或是在郵件服務上新寫了郵件,但沒有發送就退出了程序,用戶重新啟動后,大部分聊天或郵件服務會以草稿的形式將寫入的內容保留下來。既避免了退出時的二次確認,也沒有造成數據丟失。

從這3個方面,幫你掌握二次確認的設計思路

底層的版本控制功能:

蘋果電腦的操作系統內建了文檔版本控制功能,用戶關閉文檔時系統不再詢問是否需要保存,因為文檔每隔一段時間就會在后臺自動生成一個版本。用戶可以隨時回滾到舊版本,甚至從舊版本中拷貝內容。

從這3個方面,幫你掌握二次確認的設計思路

結語

與任何界面設計的原則相同,二次確認的設計重點仍然是人文關懷。要讓用戶從容使用系統的同時,避免觸發無意的操作。本文的由來在于做項目時發現目前網絡上對二次確認模式的講解大多偏理論,所以后期對該界面模式做了一些梳理并分享出來,希望有幫助到大家!

文章來源:優設  作者:京東設計中心JDC

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


日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
日本精品600av| eeuss影院在线播放| 美女黄视频在线观看| 亚洲欧美国产一区二区| 不卡一卡二卡三乱码免费网站| 精品福利在线观看| 亚洲ai欧洲av| 国产福利一区二区三区在线视频| 成人欧美一区二区三区在线观看| 精品国产中文字幕| 午夜欧美精品久久久久久久| 日韩电影一二三区| 91精品在线观看视频| 日韩欧美第二区在线观看| 国产美女主播视频一区| 精品国产伦一区二区三区免费| 久久www免费人成看片高清| 成人毛片在线| 免费在线观看视频一区| 蜜桃精品久久久久久久免费影院| 亚洲精品一级二级| av午夜在线观看| 日本在线播放一区| 久热这里只精品99re8久| 国产最新精品视频| 91麻豆精品国产91久久久久久久久| 激情欧美一区二区三区中文字幕| 欧美限制电影| 精品国产不卡一区二区| av伦理在线| 亚州av日韩av| 国产精品视频| 午夜精品免费| 奇米四色…亚洲| 欧美插天视频在线播放| 欧美日韩精品免费观看视频| 欧洲亚洲精品| 七七婷婷婷婷精品国产| 亚洲国产精品一区二区久| 国产日韩一区| 美国av一区二区三区| 欧美丝袜丝交足nylons| 亚洲人成在线观看一区二区| 国产极品久久久久久久久波多结野| 亚洲视频一区二区在线| 丁香五月缴情综合网| 国产蜜臀av在线一区二区三区| 精品视频在线免费| 欧美性xxxxx| 精品写真视频在线观看| 一区二区三区四区不卡在线| 成人写真视频| 欧美日韩黄网站| 亚洲免费观看高清完整版在线观看| 亚洲欧洲高清| 精品人伦一区二区三区| 国产98色在线|日韩| 狠狠综合久久av一区二区老牛| 亚洲国产高清在线观看视频| 欧美日韩精品免费| 一本久道综合久久精品| 白白在线精品| 免费99视频| 日韩av系列| 热re99久久精品国99热蜜月| 欧洲美女精品免费观看视频| 国产精品旅馆在线| 中文字幕av一区二区三区高| 国产一区二区导航在线播放| 中国av在线播放| 亚洲三级在线观看| 欧美群妇大交群中文字幕| 久久久综合网站| 国产在线观看精品一区二区三区| 国产一区二区三区av电影| 亚洲美女网站| 国产欧美一区二区三区精品酒店| 国产一区二区三区直播精品电影| 久久久久青草大香线综合精品| 色婷婷亚洲精品| 欧美美女视频在线观看| 乱人伦精品视频在线观看| 欧美军同video69gay| 久久久国产精彩视频美女艺术照福利| 亚洲第一天堂无码专区| 亚洲春色综合另类校园电影| 国产乱码精品一区二区三区忘忧草| 亚洲影视在线播放| 欧美性猛交xxxx黑人| 亚洲欧美制服第一页| 亚洲va在线va天堂| 亚洲欧美中文字幕在线一区| 欧美日韩精品福利| 欧美日韩一区在线观看| 国产成人精品一区二区免费看京| 宅男在线观看免费高清网站| 625成人欧美午夜电影| 美女诱惑黄网站一区| 久久国产精品露脸对白| 91精品视频网| 欧美日韩一本到| 久久久久久有精品国产| 精品一区日韩成人| 国产精品国产| 9191精品国产综合久久久久久| 国产精一区二区| 神马电影网我不卡| 国产亚洲精品精华液| 国产三级精品三级| 久久久亚洲人| 久久久美女艺术照精彩视频福利播放| 日精品一区二区| 6080yy午夜一二三区久久| 国产欧美日韩综合精品| 欧美一区久久久| 国内一区二区三区在线视频| 床上的激情91.| 亚洲国产精品久久精品怡红院| 国产一区二区三区成人欧美日韩在线观看| 日韩国产在线一| 国产丝袜一区二区| 久久国产人妖系列| 蜜桃视频动漫在线播放| 亚洲精品日韩在线观看| h视频在线免费| 国产91精品黑色丝袜高跟鞋| 国产精品久久久久影院| 欧美精品久久99久久在免费线| 欧美一卡在线观看| 欧美精品入口| 成人一区二区在线| 在线视频中文亚洲| 成人午夜短视频| caopen在线视频| 亚洲美女色禁图| 欧美亚洲综合在线| 欧美日本不卡| 亚洲动漫精品| 国产成人午夜精品5599| 91中文在线观看| 欧美最猛性xxxxx亚洲精品| 制服丝袜激情欧洲亚洲| 8x8ⅹ拨牐拨牐拨牐在线观看| 性日韩欧美在线视频| 免费日韩一区二区三区| 亚洲图片制服诱惑| 男女啪啪在线观看| 久久99视频免费| 99久久免费精品高清特色大片| 日韩av中文字幕在线| 欧美一区二区三区白人| 日韩av有码在线| chinese偷拍一区二区三区| 91网站在线播放| 色综合色综合久久综合频道88| 欧美va亚洲va国产综合| 亚洲福利一区二区三区| 亚洲区一区二区| 国产欧美日韩精品在线观看| 亚洲精品在线免费看| 激情婷婷亚洲| 成人影院www在线观看| 蜜桃91丨九色丨蝌蚪91桃色| 高清在线视频不卡|