先問一個問題:怎么樣衡量一個設計好與不好?工作中實踐越多次,越會發現華麗的設計稿并不是體現設計師專業能力的唯一標準。普通設計師和高級設計師區別在于,設計方案是否具備完整設計思路;設計對于業務有沒有真正的價值體現;以及設計方案的推動落地的完整性到底有多少。設計越往后走,越考驗產品思維,設計思維,以及設計推動能力。這是產品設計師需要關注的核心三要素。
設計師在工作中接到設計需求會不自覺的第一時間想著如何去進行視覺表達,視覺表達確實非常重要,也是公司對于設計師的核心價值的定位之一,但視覺表達只是其中設計專業本職工作中的一個環節。設計師還要應該能夠站在產品、設計、技術等不同維度去思考設計方案的可行性。產品打磨-視覺呈現-落地執行,在這三個核心點里面設計師分別有不同的定位和價值所在。
一. 產品“雙標”滿足
產品打磨包含產品規劃,內容組成,界面布局,交互梳理等等…所有環節的工作是為了符合產品最終的目標。產品所有的能力會核心圍繞兩個點:1商業變現 2用戶需求滿足。這兩個目標在產品執行的環節有時候會有一些沖突,在產品打磨階段設計師通過怎樣的方式,做到既滿足產品商業目標又滿足用戶體驗需求?可以按照以下幾個步驟進行分析尋求切入點:
這里用騰訊動漫付費模塊舉例說明: 項目背景是騰訊動漫產品要做付費體系升級設計,接到需求先有由產品源頭一步步深入,逐步展開設計方案的規劃。
01 產品目標確認
通過對項目背景的解讀和產品方案的深入了解,以及總結當前存在的一些問題,可以明確得到項目中產品核心目是什么。付費升級核心原因是付費轉化低,用戶付費意愿不夠強烈。此次升級的核心目標是促進內容消費,提升付費率。
02 分析用戶路徑
確認目標之后從哪個模塊兒開始進行首要需要考慮的。對于現有現有功能的升級,建議核心從產品本身著手,可以根據用戶行為分析,獲取用戶常規使用路徑,找到用戶使用場景下的核心目的,從而去挖掘用戶在付費路徑下的訴求點,根據訴求點找到付費升級的觸點。這里我們羅列了用戶閱讀產品的路徑。
03 觀察用戶核心需求是否被滿足
用戶在每個場景下都會有“痛點”和“癢點”。比如在閱讀前,核心目是想快點看到漫畫內容;閱讀過程中,想要及時宣泄對漫畫的故事情節的感受;閱讀后,希望找到更多相關內容或者能夠和內容有更多的互動。目前產品在這三個關鍵的路徑節點都存在一些問題,閱讀前對于付費缺乏正向引導,閱讀過程中互相行為較少,閱讀后沒有更多延展內容可供消費等。
04 洞察設計切入點
根據用戶在閱讀 “前 中 后” 關鍵路徑的節點的不同情緒反饋,我們可以做出找到相應情感滿足切入點,并且制定解決方案
05 制定設計方案
將之前找到的設計情感切入點用交互和視覺的形式呈現出來,盡可能完整的表達清晰。下面展示是關于付費升級優化的完整視頻DEMO。整個方案采用趣味情感化形式為核心設計思路,逐步去引導用戶付費。讓用戶在趣味互動中完成產品的商業轉化目標。
https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html
二. 設計呈現的“差異化”
視覺呈現是設計師們都比較擅長的工作,但不同專業高度要求下方案最終呈現出的效果是完全不一樣的。好的設計方案,需要在設計上做出明顯的“差異化”,這里的差異化是指要區別于常規輸出一般的水平。差異化的可以從多個點入手:
優質的設計美感:
美感是作為設計師首先需要培養的技能之一,也是在后續職業生涯的一直需要用到的技能。設計師被神職化的很大一個原因就是因為設計師的美感比一般人要好,有懂得欣賞美、鑒別美、以及創造美的能力。單一從視覺層面,設計作品是合格品還是精品,最終取決于畫面的精美程度。項目不分大小,再小的一個項目都可以做出精致品質,這也是體現設計師專業度的核心衡量之一。
完整設計思路:
設計方案的完整性也能夠很好的設計師專業度的差異化,幾張圖的設計稿和一個有完整設計思路的設計方案在品質上自然是明顯差別的。設計師不光需要將設計呈現出來,更需要有嚴謹的設計思路并且表達出來讓受眾到你的設計想法。設計前期分析、中期執行、后期落地以及迭代優化,能夠讓設計師有意識的鍛煉和提升自己的設計思維,對于設計師能力提升有必然的幫助。
獨特創意:
設計差異化呈現上,創意是一個非常好的切入點。行業大趨勢的前提下,現在同類產品越來越趨于同質化,受眾使用產品的時候都會有一些常規認知,關于功能的、交互操作的、內容組成的等等,淘寶和京東、大眾和美團、甚至QQ音樂和網易音樂在產品使用體驗上都有高度重合的地方,這些已經在用戶心智中形成習以為常的認知感受。如果能夠在用戶的常規認知里,用創意手法呈現出超出他們預期的內容使其驚喜,產品設計就會有明顯差異化體現。
善用情感化:
具備美感的設計能讓作品看起來有高級感,但更為高級且有效的是能夠引起用戶情感共鳴的設計。設計是主觀的,對于設計每個人都有自己的想法,也正是因為主觀的設計感受,能讓設計在情感化打造方面可以有很多的嘗試方向。能夠引起受眾主觀情感上的共鳴和認同的設計,會形成產品的核心記憶點之一。設計師對于情感化設計往往會有一些誤區,認為圖形可愛,色彩羨慕,動效流暢且能夠形成一套視覺體系,就能夠算情感設計。真正的情感設計是需要從用戶角度出發,挖掘用戶的認知領域和喜歡,從而去進行符合用戶情感訴求的呈現。
三. 方案推動的效能管理
設計方案輸出只是整個產品生產流程中的一個核心環節,產品上線后體驗如何最終取決于落地實現的程度。在方案落地支持過程中,效率協調和實現能力是保證設計方案貫徹一致執行的關鍵因素:
協作
產品設計師工作協調分為內部協作和外部協作。內部協作即設計師之間的溝通協同,主要內容是如何保持設計語言一致性,除了制定設計規范,還可以建立公共控件庫,線上調用。控件庫能夠使設計師協作無學習成本,設計師輸出設計稿效率也能夠大大提升,同時保一致性。
外部協作主要是和下游的技術同事直接的工作對接,設計方案的交接方式以及開發獲取信息的效率很關鍵。在開發接收設計方案的時候,盡能力降低獲取成本以及理解成本。比如設計稿的標注,在標注上設計師一般會花很長時間,開發也需要逐步查看,偶爾還會有標注遺漏的地方。我們團隊會直接采用插件,設計稿及時同步,并且開發可以自己隨時查看每個元素的標注信息,便捷。
這里推薦兩款協調軟件:一款是InVision可以在sketch里進行控件協同調用,所有想用的元素直接源文件調用,不需要再問同事要源文件!另一款是Zeplin技術同學可以直接查看元素屬性以及間距等,設計師解放雙手不再需要標注!
官網鏈接:
https://login.invisionapp.com/auth/sign-in
實現能力
專業技術之間的壁壘,也會成為設計方案實現的阻力。同樣的界面,設計人員用設計軟件實現,技術人員用邏輯代碼實現,實現的方式和成本存在很大的差異性,所以往往設計師認為很簡單的需求在開發層面的確非常難實現。當然,不是所有需求都是無解的,設計師在技術實現層面還是可以做一些事情:
01 方案前置溝通
設計一個新的功能的時候,如果有非常規的設計方案,可以提前和技術人員溝通實現的難易程度,讓技術人員有前期預判和預演的時間。并且,可以將設計做成簡易DEMO方便技術人員快速理解,避免雙方存在信息不對等的情況。
02 搭建開發控件庫
開發控件庫和設計規范一樣,是最基礎但應用最為頻繁的模塊兒。開發控件庫可以將最基礎的元素形成固有規范,所有開發實現都用同一套規范,以確保實現的高度一致性,同時也能夠提升實現效率和設計還原。設計可以輔助開發一起制定開發控件庫,確??丶旌驮O計規格的一致性。
03 尋求技術語言共通性
盡量將設計方案轉化為技術能夠理解和復用的形式進行對接。除了靜態設計稿的標注,設計和技術實現最大的難點在于動態交互的實現上,對于動態設計,將設計方案轉換為代碼文件交付給技術實現,這樣能確保功能的正常實現同時減少后期設計還原性的偏差。
以上初步總結的關于產品設計師在設計過程中從前期產品規劃到中期設計執行再到后期開發落地應該注意的一些核心點:
第一條,設計方案既要滿足產品目標又同時要兼顧用戶體驗;
第二條,優秀的設計師,會保持設計方案的“差異化”;
第三條,設計師職責除了確保設計方案完整性,更重要的是推動設計方案的完整落地。
在產品設計過程中,設計師需要關注還有很多關鍵點,這里也歡迎大家一起補充交流,正是這些關鍵點,將設計師的思維逐步打開,使其成為一個具有全鏈路思維的設計人才。
文章來源:UI中國
交互手勢是用戶操作的重要部分,交互手勢的設計好壞非常影響用戶體驗,那么,交互手勢的設計上對于容錯性和邏輯性需要注意什么?
隨著用戶體驗被愈發的重視,更多的 APP 偏向于使用多手勢優化用戶的操作流程,降低使用阻力。
點擊某個確定的按鈕的手勢操作雖然被普遍使用并被用戶熟知,但是增加更快捷的手勢操作可以大大增大操作熱區,提高操作效率,如下圖。
然而,我們可以發現由于不同產品的設計師對于用戶體驗的理解不同、交互層面的思考不同,導致設計的交互手勢也不同。
有時同一種操作在不同的 APP 中交互手勢也是不統一的,這無疑增加了用戶的學習成本和記憶成本。
舉個例子,iOS 端的得到和有書的播放頁的打開和關閉方式。
得到有兩種方式打開和關閉頁面,用戶可以通過點擊控件或上滑控件打開播放頁,通過點擊收起按鈕或下拉頁面關閉播放頁。但是有書只有一種方式打開和關閉,用戶只能通過點擊控件打開播放頁,通過點擊返回圖標關閉播放頁。
這讓習慣了使用得到的我去使用有書時,感覺非常別扭,每次都嘗試用得到的手勢去操作但是都失敗了,失敗后我下一次并沒有記住仍然用手勢去操作,如此反復令我相當沮喪。
容錯性是一個很大的話題,今天我們僅僅在交互手勢層面上討論。
上面的例子中,有書并沒有設計滑動手勢去打開和關閉播放頁,那么我以我的經驗去進行的滑動滑操作在有書這個產品中就是錯誤的和不被產品識別的。但是這種手勢又廣泛存在于大量的音頻播放 APP 中,如喜馬拉雅、荔枝 FM 等。
一旦用戶從這些 APP 遷移到了有書,本來養成的操作習慣在有書就失效了,用戶就會感覺“這個 APP 很難用,用起來很不舒服”,進而可能放棄有書轉而投向其他產品懷抱。
與手勢設計類似,這也是為什么現在的同種類型的 APP 的信息架構設計越來越同質化,當我們打開淘寶、天貓、京東時我們有時感覺就像是同一個 APP ,本質上也是為了降低用戶的遷移、記憶和學習成本。
如下圖所示,提高手勢的容錯性對用戶的意義。
很多優秀的產品考慮到了上述問題,設計了多手勢來優化用戶體驗。
舉個例子,在 APP Store 的首頁點擊一個推薦卡片后進入詳情頁,由于詳情頁是直接由卡片放大轉場的,不同于傳統的新頁面右側進入和從底部彈出。
在用戶的使用習慣和認知中新頁面如果從右側進入就可以通過右滑返回,從底部彈出的話就可以下拉返回。因此,當用戶面對卡片放大進入新頁面這種全新交互時可能會疑惑如何返回,對此理解不同的用戶可能會嘗試右滑,也可能嘗試下拉。
APP Store 的設計在此就有很好的容錯性,用戶可以通過三種方式返回首頁,分別是、右滑返回、下拉返回和點擊叉號返回,這不但降低了用戶的記憶和學習成本,也便于不同習慣的用戶使用。
針對不同的場景,手勢的使用也會有不同。
一個很好的案例是知乎的評論:知乎的評論的關閉方式有三種,分別是下拉、右滑和點擊叉號。
用戶觀看評論的場景有兩種,第一種是只想看一下精選評論然后關閉,第二種是被評論吸引后一直往下看。當用戶單手操作不方便點擊叉號時,下拉對應的是第一種用戶;右滑對應的是第二種用戶,不管用戶看了多少屏的評論,隨時可以通過右滑關閉評論(因為用戶翻閱了很多屏評論后需要下拉到第一條評論時,下拉關閉評論手勢才會生效,所以第二種用戶一般不使用下拉去關閉評論)。
可能你會心生疑惑:“第一種用戶也可以使用右滑來關閉評論呀”,確實可以,但是對于人的操作習慣來說,上下滑動會比左右滑動更方便。
還值得討論的是蘋果自 iPhone 6s 開始加入的新交互方式 3D Touch,它允許用戶通過更大力度的重按呼出情景菜單快捷地使用高頻功能而不用先打開 APP,對于追求效率的用戶來說簡直不要更方便,但是對于不支持 3D Touch 的機型則無法使用情景菜單。
因此,在生活中我發現這樣的現象,很多使用慣了3D Touch 的用戶換到無 3D Touch 的蘋果機型后很不習慣,總是嘗試去重按但是是無效的。
其實在很多安卓手機上也有情景菜單這一功能,它巧妙地將卸載也加到了情景菜單中,因此用戶只需要通過長按就可以獲得所有需要的功能,而不是像蘋果那樣長按是卸載而重按是情景菜單。
我猜測蘋果為了適配所有機型,提高容錯性,從今年的發布會的 iPhone 11 和iPhone 11 pro 開始,取消了 3D Touch,轉而使用 Haptic Touch (有震動反饋的長按)代替。當你長按某個圖標時,感受到震動后松開,即可呼出二級菜單;如果震動后仍不松開,則進入到卸載 APP 時的抖動狀態,使得之后的即使不支持 3D Touch的機型可以使用便捷的情景菜單了。
對于不支持 3D Touch 的老款機型會不會在 iOS 13 更新后也可以使用 Haptic Touch 呢?
如果一致統一的話,容錯性將大大提高,我們將拭目以待。
不僅僅是 iOS ,Android 的版本 Android 10經歷了 6 個測試版迭代后正式發布,我們發現交互手勢是 Android 10 的一個巨大亮點。Android 10 在第三版內測系統開始引入全局手勢操作,用戶啟用后,屏幕底部便不會再出現虛擬按鍵和導航欄,只會剩下一個指示條,上滑返回主屏、側滑返回上一層的操作邏輯也均和 iOS 保持一致。
這可能標志著安卓手機一直以來在國內各家廠商的各種創新手勢的割裂生態中即將重歸統一,并和 iOS 保持一致。
這種妥協將大大提高在用戶使用一款新安卓手機時的容錯性,同時降低了今后用戶在兩大系統之間的遷移成本。
再談談邏輯性,在交互手勢的層面上,如果用戶能夠通過某個手勢進行某個操作后,按照邏輯,用戶也可以通過反向的手勢或對應的手勢進行逆向操作。
比如,在微信首頁下拉調出小程序頁面,之后可以通過上拉返回首頁。點擊加號呼出更多操作,再次點擊加號收起更多操作。
如果違背了用戶的心理模型和邏輯性,用戶就會感覺到混亂和不適。
這里舉一個反例, Uki 的個人主頁可以通過點擊或下拉底部的固定底板收起更多信息,但是收起后只能通過點擊展開更多個人信息而不能上拉,不符合邏輯與用戶的心理模型。
如下圖所示,邏輯性對用戶的意義。
有的時候,我們會發現為了提高容錯性,我們會犧牲一部分邏輯性。
就像上文提到的知乎關閉評論彈出框,邏輯上它是從底部彈出的,但是不但能夠下拉關閉還可以右滑關閉。盡管右滑關閉有些違背用戶的心理模型,但是確實給用戶帶來了很多操作上的便捷。
我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。
1)考慮不同平臺的硬件系統和操作系統特性
由于硬件與操作系統差異,iOS 系統支持很多手勢,但是安卓系統在手勢支持方面就不如 iOS 豐富。
安卓硬件設備的差異比較大,不同安卓手機廠商會在安卓系統的基礎上自定義系統的手勢操作,因此對于手勢的支持也有較大的差異。對于這種情況我們需要熟悉相應平臺的規范,做到心中有數。
2)考慮所選的手勢的學習成本和記憶成本,用戶是否已經被教育
如下圖所示,盡管設備支持的手勢數量多不勝數,但是日常使用 APP 時,大部分用戶習慣使用的手勢很少,比如單擊、雙擊、滑動、上拉、下拉、雙指擴張和收縮等。除此之外的手勢教育成本和學習成本很高。
一般比較通用的功能是沒有必要在此處創新的,但是如果一些特殊的操作確實需要加入時,我們就需要考慮下面的問題。
a. 如果沒有教育成熟,考慮加入教學或搭配簡易的操作方式
對于我們需要加入的手勢操作當前用戶并未被教育成熟時,我們需要考慮加入手勢教學,具體的手勢教學類型下一部分會詳細討論。
然而,大部分情況下用戶的記憶是短期的,教學內容可能會被快速遺忘,下次用戶使用 APP 時仍然不會使用特殊手勢。此時我們應該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。
比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設計,其考慮到了有些用戶在現實生活中并未見過擬物繩燈,并不知道是要進行下拉才能觸發操作。因此,QQ 閱讀貼心地搭配了一個簡單的點擊操作,用戶通過點擊繩燈也可以切換夜間模式,如下圖。
b. 考慮所選手勢是否可能導致沖突和誤操作,如果導致了,考慮如何避免和折中
最常見的手勢沖突情況就是 APP 的手勢與操作系統的全局手勢沖突。
解決方案有兩個,一是避免設計與全局手勢一致的手勢操作,例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應用等全局手勢操作;二是仍然設計與全局手勢沖突的操作,但是將全局手勢部分禁用或以其他的方式區分開。
如下圖有書播放頁的案例,由于進度條滑動控件過于靠左,導致使用 iOS 全局右滑返回手勢時有時會產生誤操作,即本來想要右滑返回卻不小心滑動了進度條。
這種情況下我們可以標注一個右滑手勢禁用區域給開發工程師說明情況,將此情況避免掉即可。
誤操作指的是,我們設計的手勢操作與 APP 內的其他操作或系統全局手勢操作接近導致用戶觸發了非預期的操作。比如 iOS 端的知乎被吐槽的一個右滑返回手勢操作,經過研究發現,由于 iOS 端的知乎在瀏覽回答的頁面設計的右滑返回的熱區過大,導致用戶上滑瀏覽的時候如果手指的滑動角度變化幅度過大一不小心就觸發了右滑返回,再次進入回答后又需要翻頁很久才能找到之前離開的地方,很影響體驗。
我覺得知乎可以減少熱區,將熱區調整為 iOS 全局的右滑返回區域即可,如下圖所示。
當然,產品設計需要平衡與取舍,如果減少了熱區是否會影響其他用戶的體驗還需要考慮和調研,兩者并無絕對的對錯
當新手勢無法直接讓用戶感知時,我們需要加入一些手勢教學幫助用戶快速上手使用。
1)手勢教學方式
a. 浮層和動畫引導使用靜態或動態的手勢圖片或氣泡示例告訴用戶使用哪種手勢進行操作
相比于靜態,動態比靜態更為直觀和易學。
b. 內容隱喻通過微妙的視覺線索暗示用戶此處可以通過某種手勢進行操作
由于教學內容難免具有干擾性,對于高級用戶來說是不必要的,但是對于初級用戶又是必要的,因此以這種內容暗示的方式使教學極為輕量化,在低干擾的情況下使得用戶學習了手勢操作。
如下圖,嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架,暗示用戶可以通過左右滑動切換文章。
再比如陌陌在打開點點功能時,會在用戶進入頁面的時候播放一個動畫,暗示有很多卡片疊加在了一起,用戶可以通過滑動切換卡片。
2)教學的出現時機
a. 操作前當產品中設計了不容易感知的新手勢,在用戶操作前,通過教學讓用戶了解和學習新的手勢。
b. 錯誤操作后對于一些與用戶的心理模型和習慣不一致的手勢,提前預測用戶可能輸入的錯誤手勢,在用戶錯誤操作后進行提示,規范用戶的操作方式。
如下圖,由于知乎舊版本是通過左右滑動切換回答的,新版本調整為上下滑動后,需要糾正用戶使用習慣。因此,當用戶仍然使用左右滑動時,會出現浮層提示用戶正確的手勢進行教學。
以上是日常思考和總結,有不恰當之處歡迎指出。希望本文在大家進行手勢設計的過程中能夠幫助做出合理的決策。
文章來源:人人都是產品經理
Sandy現任阿里影業—淘票票體驗設計專家,2015年加入阿里巴巴,深耕B端行業產品,服務于電影產業鏈中的投資、宣發等角色。2017年起接觸C端用戶產品,推行價值導向和問題導向。2019年開始實踐線上線下全鏈路設計。
阿里影業的服務涉及的面很廣,涉及到b端與c端全流程的體驗服務,包括面對片方的制作和宣發、發行、乃至面向用戶的售賣與放映,在每個節點都有涉及。而淘票票,經歷了四年的產品迭代,以一年一個版本的速度的進行優化。15年的理念是做一個好用的購票工具,16年新增了營銷,17年加強營銷,18年新賽道探索。到了2019年,改版應該進行新的思考:怎樣做?做什么?怎么做?做對了嗎?
此次淘票票9.0版本是根據用戶現有的習慣與市場的變化,由設計師發起的一次自下而上推進的改版。以下是淘票票9.0的設計策略與設計目標:
接下來將對三點設計策略進行逐一的講解。
根據內容類型和場景進行劃分,結合內容特點和用戶喜好,打造全場景運營,例如提供影訊、通稿、片單、榜單、熱點、解讀、文章和活動等等多元化內容。通過提供不同的內容展現給用戶,將內容進行解構、把觸達的場景進行細化、優化設計的表達,從而達到幫助用戶可以更好的理解電影的目的。
設計前,首先應當熟知兩種設計思維導向:
而這次9.0淘票票改版采用的是以問題為導向,期間經歷了五個流程:
2.1 找問題
首先出去找問題,找問題的方法有很多,如:用戶研究、定性、定量、業務數據和體驗走查,收集業務、用戶、客滿不同視角的疑似問題。
2.2 看現象
找完問題之后,基于數據的支撐,去看用戶有哪些習慣的變化,看到目前的現象后再進行數據解讀。
2.3 定位問題
基于使用場景和使用效率,進一步定位問題所在。
2.4 分析原因
分析出癥結,以便推進最終的解題環節。
2.5 解題
解題1:場景化探索。
以解決問題為目標,達到優化用戶體驗的目的,對場景進行預判、探索,把場景分為三個典型的場景:
解決:針對第一種場景,選坐頁可以快速找到選場次的功能,淘票票提供常去影院、附近影院的選擇,減少用戶決策時間。針對第二種場景,部分觀影者不知道價格更高的IMAX廳、杜比廳的觀影效果,價格比普通廳貴了50塊錢,那么這個錢值在哪?淘票票使用視覺映射和科普的手段,例如當點擊進入杜比廳后,下拉可以呼出信息,了解相關的影廳,給予科普;而且界面設計不同,更貴的影廳視覺效果好,界面上也提供用戶更強的視覺沖擊。
解題2:用戶視角信息重構,進行信息降噪,減少認知負擔
認知負擔=信息呈現類型x信息量
以上公式可以看出,假設設認知負擔為定值,當信息量增多的時候,需要減少信息呈現類型,適當進行信息降噪與信息結構化。降噪是把想要突出的信息更加突出;信息結構化是把同類型的信息以結構化的呈現出來,讓用戶自然對信息產生親密性。
對于信息傳達,改變之前比較打擾的提示彈窗,現在淘票票會把所有信息都放在頁面中,用一種更輕量的方式提示用戶,不再打擾用戶。信息重構則是把需要用戶確認的信息放在最頭部,例如退票、改票,其次界面羅列的是優惠信息,最后才是影城卡營銷和賣小食的信息區域。新舊改版對比圖很好呈現出淘票票有效減少認知負擔所做的優化。
基于調研,淘票票的用戶群體趨近年輕化。改版中所制作情緒版、圖標、元素、字號、空間結構等視覺語言,注重和品牌元素的結合,產生出新的視覺語言與品牌形象,從而更加貼近年輕人的心理與喜好。
根據heart模型進行設置,選出適合9.0版本的衡量維度:S,T,A。以體驗目標出發,符合業務目標進行探索。不一樣的體驗目標使用不一樣的度量方法。對于內容而言,需要衡量的是用戶的接受度,用戶需要看到它,接受它,并且需要知道用戶是否覺得有用。而對于核心購票流程,該流程則是比較偏向工具,度量方式則是任務完成度、完成任務時所花費的時長、信息有沒有被有效的傳達給用戶等來衡量的。最后對于視覺方向,用戶的想法會比較主觀,通過滿意度和推薦度來衡量。
提問者1:觀影者通常會在朋友圈、豆瓣和推薦來決定要看的影片,基本不會在淘票票上尋找值得看的影片,為什么淘票票會做這方面的探索?為什么要做內容決策這件事?
回答:從想看電影到下單的過程哪個地方淘票票是沒有做好的、做到的,根據定性調研,發現一半以上用戶都不會在淘票票上進行決策。但是淘票票還是希望嘗試一下,希望用戶可以在淘票票上完成完整的購票觀影體驗。從數據顯示,用戶心智還是不好但是有一些提升。而且豆瓣經歷了10年從pc到app,保留了用戶的歷史等數據,沒有辦法讓用戶直接轉到淘票票進行觀影決策,這也不是淘票票希望看到的。淘票票也希望可以和競品和合作方去提升觀影決策,達到共贏的目的。
提問者2:淘票票改版之后,有一個衡量它的改版效果S、T、A的度,有沒有考慮要做NPS?
回答:淘票票一直有在做,從這次改版之后來,淘票票所有用戶群指標提升了應該有五個百分點,然后年輕用戶的百分點在八個以上。NPS是一個非常關鍵的衡量用戶滿意度的指標。
追問:NPS是不是適合淘票票這個產品?還是適合于所以互聯網產品?
回答:NPS在集團內它的重視度是很高,基本上阿里系所有的產品都會有指標。
提問者3:我之前是淘票票的用戶,曾經用過淘票票做觀影決策,看下面的電影評價,結果發現電影評價是虛高的,就是說其實電影沒有那么好,但是評論會傾向性的選擇一個好的評論放在下面,經過這次經驗之后,就再也不用淘票票作為觀影決策了。想了解現在淘票票的評論機制,它是怎么個呈現的方式?是不是會優先選擇就是比較好的評論放在首評?或者是有一些什么樣的計算方式?另一方面對于現在的評論失真的這種情況,有沒有想到一些改進的措施?是最近有沒有做過一些改版之類的,就是關于這種內容方面的?除了剛才講的那些界面,視覺方面的,想了解內容方面有沒有一些提升?
回答:第一點,用戶群的不同。對于影評這個來決策,淘票票可能跟豆瓣用戶群有非常大的差異,豆瓣是影迷聚集地,愛電影這幫人的一個粉絲聚集地,圈子比較小,想要進入這個圈子有一定的成本。但是像淘票票它服務的是大眾場景,服務的有外賣小哥,也有大城市去打工的用戶,也有三四線在國企里那種的員工,淘票票服務的用戶是大眾的,所以對于評分虛高這件事,不是說它好或者不好,也就是不能單純的絕對說好還是不好,可能大眾的心智就是這樣的。用戶不像一個資深影迷,看到速度與激情會認為是大爛片,可能反而覺得好,非常值得去看。第二點,關于這種影評的一個分發策略涉及到產品策略,不是很方便講。但是淘票票在這方面一直有優化的,并且現在也是在持續優化,希望影評可以真正為用戶去提供這個觀影決策。第三點,淘票票的用戶其實不只是c端用戶,它還有還有影院還有片方,但是水軍應該不會有,至少淘票票平臺是非常不鼓勵這種情況,而且會有一定的反作弊、返水的機制。
提問者4:因為是以設計推動的一次改版,想了解一下推動的過程?第一就是因為平時改版都是產品的來做的,那這一次由設計來去推動的話,那設計跟產品之間的這個協作關系是什么樣的?然后改版歷時半年,是淘票票的設計歷程中是常態嗎?如果不是的話,平常的這個改版的節奏是什么樣的?
回答:第一點,設計要不斷的去跟產品、運營溝通,去跟不同角色溝通,溝通可能是最重要的一點。當所有人都達成共識了,確實有這樣的問題需要改,那全部門所有人就會去團結,去把這個事情搞出來。搞出來之后再去向上一層一層的去向上匯報。匯報的可能要經過很多輪,不斷有反饋的意見下來,因為本身視角輸入的也不夠全,接受到的聲音也沒有上游接觸的多,所以團隊會去接受意見,然后重新的進行。一輪review下來大概三四個月的時間,然后再去跟開發團隊溝通為什么要去升級設計語言,怎么樣去幫開發提效?怎么在下一次10.0改版的時候更容易。第二點,團隊第一次歷時半年進行改版,之前沒有停下腳步來去深耕用戶體驗,所以有一些坑或者一些彎路。平常的改版中基本上是兩周發一個版本,非常小步快跑的。對于設計如何跟產品團隊去協作?剛剛也有講過,達成共識之后,然后把這個事兒做起來,提需求、進版本,從需求池里評估需求優先級進版本。交互設計跟產品經理這個角色沒有絕對的一個邊界,可能都是去不斷的去觸碰,只要去配合合作的好,把這個產品去做出來,不用管處在一個什么樣的一個崗位。
提問者5:最開始的時候有問到淘票票和貓眼之間的一些對比,想了解在改版完之后和平時的工作中,是怎么會去了解和競品?怎么去比較?有沒有一些關注的量化的一些指標?
回答:不管服務于什么樣的產品,都會做競品調研。會關注市場的變化、競品的變化。對于設計團隊來說,其實主要的是關注的是用戶行為、功能和視覺界面。包括上了哪些個新的功能?在不同的渠道是怎么樣去運作的?運營思維是什么樣子的?淘票票團隊有在研究競品,有在做競品的一個分析,衡量的指標也主要是滿意度、推薦度,因為沒有辦法去看競品的數據,只能通過用戶反饋去看競品跟淘票票的差距。
文章來源:uxren
有些產品經理會陷入這種誤區——需求評審做完了,自己就可以放羊不管了。而本文則認為需求評審完,產品經理還要做這六件事。
1. 確認需求評審的遺留問題并同步各方
2. 制定詳細&責任到人的項目計劃
3. 完成文案設計
4. 按照項目計劃,協同各方,往前推進,關鍵環節必須與各方確認。關鍵環節包括:
5. 準備項目review
6. 開始下個需求的方案設計和需求文檔準備
產品經理A:需求終于評審完了。有種放飛的感覺,可以休假,去浪了!
產品經理B:你說真的嗎?為什么我評審完,還一直在被開發、測試、法務、財務窮追不舍?
產品經理C:你說真的嗎?為什么我評審完,從來都是我在窮追不舍開發、測試、法務、財務?
產品經理D:你們開玩笑的吧?就我這么慘!我不但要緊追不舍開發、法務、測試、法務、財務,還要被老板、被客戶窮追不舍。
產品經理A、B、C:哥們,來講講,最喜歡聽慘兮兮的故事了。你的傷痛最能撫平我的內心。
產品經理D:好吧。需求評審只講清楚了產品的骨架、細節,讓各方開始投資源。評審完,產品經理還有一堆事要推進,沒法放羊。
要跟的事情主要有下面6件:
需求評審總有一些遺留問題要進一步確認,而后同步給各方。我不是圣人,有時候有些問題或者細節沒想到,評審的時候,大家提出來了,得趕快明確。
有時候需求評審中還有很大的bug沒想到,必須快速解決,要在開發沒動工前,都捋順。要不然變成需求變更,或者上線后被推倒重來,欲哭無淚。
我這種求生欲這么強,也沒人罩著的,必須狠命把需求做到95分以上。100分也不太敢說,畢竟眾口難調。
產品經理還得身兼項目管理,項目管理從來都是事有輕重、事無巨細,難以假手他人。雖然我會盡可能調動大家的積極性,讓大家自驅管理項目,但還得牽扯不少精力。
項目管理的關鍵點:明確項目計劃、關鍵節點、每個關鍵節點的負責人、驗收方案。
比如什么時候交互評審、視覺評審、聯調、showcase、發布?分別是誰主要牽頭負責,哪些人需要參與。
為了防止項目延期,每個節點都還得提前趕。真是操碎了心。
文案從來不是隨便寫寫。文案是和客戶交流的重要途徑,整幾個客戶看不懂的文案上去,后面客戶咨詢搞死人!
文案設計除了客戶視角之外,也不是自己想怎么寫就怎么寫,還要和法務、客服團隊溝通。因為文案被客戶投訴的案例,又不是沒有。
還有啊,我的產品有3種語言,簡體中文、繁體中文、英文,雖然每種語言有專門的文案設計師,但得跟他們說清楚,也要花不少時間、精力。
當然,也有很多產品經理,不管文案這種小事??晌矣X得文案體現了產品經理最基本的素養,是產品的底子。
關鍵環節有6個:
1)交互評審
一般來說會由交互設計師發起,開發、測試、法務、財務都要參與。
這樣能保證大家在說同一件事情,避免我要的是頭牛,結果開發給了頭驢。
如果設計師項目參與度低,交互評審還得我自己上。哪里缺人,我就得到哪補坑。
2)視覺評審
一般來說,交互和視覺評審會一起。
有時候項目很復雜,或者交互、視覺分工明確,那就得分開了。
通常由視覺設計師發起。同樣,如果視覺設計師參與度低的話,我還是得補坑。
3)推進聯調進度
聯調是很容易扯皮的環節,大家來自不同域、不同職能團隊,各有各的小九九,所以得盯著,避免聯調成為坑王。
4)推進測試進度
進入到測試就意味著開發的七七八八了,當然有時候為了壓縮項目周期,開發、測試會階段性并行。
除了測試進度,還得關注測試發現的問題,可能開發還得返工,也可能會發現需求評審中大家都沒有注意到的問題,得及時補救。
5)showcase
Showcase,說白了就是項目驗收。
驗收前,得先列出來要驗收哪些內容,主流程、分支流程、逆向流程、重大關鍵節點。Showcase,也有可能發現新的問題,但基本上要避免在showcase環節發現重大問題,不然就得重大需求變更了。
showcase有時候由測試主導,有時候沒資源,我得自己上。
6)項目發布
如果一路順利,就該發布項目了。
項目發布計劃雖然也是之前就定好的,但要考慮的方方面面也還挺多的,可以看之前的文章《項目發布要考慮的因素》。
總而言之,要和各方溝通好,要保證項目順利發布呦。
項目終于上線了,可我得天天得看客戶反饋,看數據,跟客戶聊,跟業務聊,準備復盤review。
產品狗似乎永遠都在準備復盤、復盤中、復盤后反思的路上。
項目通常是并行的。在需求評審完后,我已經開始下一個需求的研究、設計了。
開發資源從上一個需求釋放出來的時候,產品經理肯定得把下一個需求方案設計好,開始新的需求評審,妥妥的做好資源銜接。資源一旦釋放出來,下次想要資源,難上加難啊。
產品也需要持續迭代,讓客戶感受到,我們的產品在成長、進步,給人希望。
文章來源:人人都是產品經理
區分取消與關閉,可以很大程度上避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改,使用文本標簽而不是「X」圖標,并在破壞性操作之前提供確認對話框。
很久以前,「X」這個符號是用在地圖上,標記「寶藏的藏身地」。但在今天的數字化界面中,「X」符號不再用來標記位置,而是被用來取消進程,或者關閉某個臨時頁面/彈框。但是如何確定「X」代表的是「取消」 還是「關閉」?有的時候可以確定,有時卻模糊不清難以界定。
其實,主要的問題在于「X」圖標缺少了文本標簽。當同一個圖標在不同的界面,卻代表不同的含義,該圖標的可用性就會受到影響,因為用戶判斷不了到底是什么含義。
當用戶單擊/點擊「X」按鈕來關閉模態彈框或視圖時,系統會完全取消該過程并清空之前所有操作,這讓人沮喪,甚至抓狂。因為用戶通常認為「X」圖標表示取消或者關閉,所以區分這兩種可能性對于交互的成功至關重要。
在某些情況下,區分取消 or 關閉并不重要。當一個彈窗占據你的大部分屏幕時,點擊「X」按鈕(盡可能快地),既可以關閉該模態,也可以取消它可能觸發的任何進程。
但是,如果頁面中包含正在運行的計時器,正在播放的音頻,正在選擇多個選項標簽,或其他類型未保存的內容,那就很有必要說明「X」圖標所代表的意義。因為用戶可能打算讓計時器或音頻繼續運行,或者希望立刻應用這些選好的選項標簽,或保存正在進行的工作,同時希望關閉該視圖繼續其他操作。
例如:絲芙蘭在結賬過程中,使用模態窗口來展示用戶可以添加到購物車的免費商品。在以下示例中,單擊「 ADD(添加)」按鈕選擇商品后, 該按鈕直接被變成了「 Remove(移除)」,看起來似乎商品已經被添加到購物車中了。但是,實際上當用戶單擊右上角的「X」圖標后,該商品并不在購物車中。他需要再重復這個步驟,最后點擊「Done(完成)」按鈕,商品才會被加入購物車。
Sephora:單擊右上角的「X」會取消選擇這些試用商品整個過程。用戶必須先單擊「ADD」,再單擊「Done」才能將商品添加到購物車。
要避免丟失用戶正在操作的內容,首先需要確定用戶的意圖,是取消還是關閉,并提供明確的選項。有以下幾種方法:
1. 要求確認
如果用戶在已經執行操作的模態彈框或頁面視圖中,點擊「X」圖標,app 則可以在關閉視圖之前,直接詢問用戶是否應用該操作,來確認其意圖。此解決方案非常適合會破壞用戶工作的破壞性取消操作。例如,過濾器視圖可能會被意外關閉,并且關閉會導致用戶丟失其選定的選項。
這個問題在移動端界面上很常見,因為過濾器視圖占用了很大的屏幕空間,這使用戶很難或不能判斷是否已經應用了那些選擇。為了防止這種潛在的錯誤,在關閉過濾器視圖之前,跟用戶確認是否要應用這些選擇并關閉視圖,抑或是清除這些選擇。例如:下圖中,當用戶選擇后,點擊「X」圖標時,Lowes 會出現如下確認彈框。
左 :點擊「X」圖標或返回箭頭,所有的選項都會被取消,并將用戶帶回上一個頁面。右:點擊「X」后,出現一個確認對話框,確認用戶是應用還是取消篩選,然后再返回結果列表頁。
同樣,當用戶關閉正在進行的課程時,語言學習應用Duolingo 會顯示一個確認對話框,課程進行中不能中途離開,除非確認「退出」。至少,該 APP 向用戶傳達了這一限制,同時他們也可以選擇「取消」來繼續課程。點擊「X」按鈕將結束當前課程。為了防止出錯,結束前會出現一個確認對話框。
缺點:
2. 使用文本標簽
不要完全依賴對話框來讓用戶確認模糊的「X」圖標,而是使用明確的文本標簽。文本可以消除歧義,并清楚地傳達將發生的操作:取消與關閉。
Yelp 的篩選頁面在屏幕頂部提供了標有「Cancel(取消)」和「Reset(重制)」的按鈕,在底部提供了一個大大的「Apply(應用)」按鈕。類似地,Etsy 中的 Filters 視圖提供了「Clear(清除)」和「Done(完成)」兩個按鈕。
注意:Etsy 使用「Done」而不是「Apply」,因為過濾器一經選擇就可以被應用,而這里是關于開關切換與否的建議。
(左)Yelp:Cancel、Reset 和 Apply 這三個文本標簽既直接又清晰,這樣用戶就不太可能不小心關閉視圖而丟失他們過濾器中的選擇。(右)Etsy:Clear 為用戶取消提供了一種清晰的方式,而點擊 Done 則返回到「產品列表」頁,其中的選擇已經應用。
3. 關閉并保存
如果必須使用「X」圖標而不是文本標簽(比如為了以節省空間,或者正在遵循團隊的設計語言),請謹慎使用,并在用戶完成前保存操作/內容。另外,可以提供一個單獨的「取消」按鈕,讓用戶在進程之外有一個緊急出口,并消除「X」在兩種含義之間的歧義。
例如:Gmail 會自動保存在非模態窗口中填寫的郵件信息到草稿(Drafts)。這樣的好處是,用戶在需要折疊或關閉該窗口時,仍然保存原來的內容以便于下次繼續編輯。將鼠標懸停在消息窗口右上角的「X」圖標上時,會顯示一段提示:Save & Close(保存到草稿并關閉)。此外,點擊窗口右下角的「垃圾桶」圖標可以刪除該郵件,這個圖標離頂部的「保存和關閉」選項很遠,可以防止用戶誤點。
Gmail:Hover 透露,「X」圖標是用于關閉窗口而不是刪除草稿,它允許用戶保存并關閉消息窗口而不會丟失剛剛正在編輯的郵件。
對于長進程或傾向于在后臺運行的進程(如計時器),默認自動保存也是一種很好的解決方案。
例如,Glow Baby 中,后臺運行喂食或睡眠計時器時,用戶還可以瀏覽 APP 的其他區域。因為這些計時器一般會運行很長一段時間。此功能還能讓用戶在 APP 中做其他的任務操作,例如記錄之前換尿布的時間、瀏覽文章、逛論壇等。點擊計時器視圖中的「X」圖標也只是關閉窗口并不會取消正在運行的計時器。
Glow Baby:(左)點擊運行計時器視圖中的「X」圖標,在不停止計時器的情況下取消視圖,從而允許用戶繼續使用 APP 記錄其他類型的事件、參與社區討論、閱讀文章等。(中)運行計時器的狀態顯示在屏幕頂部的狀態欄中。(右)在計時器暫停時點擊「X」圖標,彈出「放棄」或「取消」按鈕以確認用戶的真正意圖。
請注意:在關閉前保存中間工作或維護正在進行的過程是主動的,但有時可能會與用戶的意圖相反。如果用戶打算通過單擊「X」按鈕取消其選擇,那自動應用這些選擇可能會令人困惑和沮喪。
這就是為什么還必須有一個單獨的「取消」按鈕,給用戶一個出口,而不是強迫他們必須關閉時自動保存。
雖然「X」圖標會造成模棱兩可,而且經常導致可用性問題,但它不太可能馬上從所有接口中消失。設計人員應該注意「X」圖標的多重含義,消除「關閉」和「取消」之間的歧義,并提供確認對話框或自動保存等保護性措施,避免丟失任何用戶正在操作的內容。
若存在疑問,請記?。合缺4?,再退出。
為什么手機驗證碼登錄微信/淘寶時,驗證碼輸入錯誤,二者都是用的模態對話框提示用戶,而不是用 Toast 呢?
補充:Toast 這一控件,原是 Android 系統的控件。但自 Android 5.0 推出原質化設計后,Toast 就被弱化,而是將 Snackbar 作為官方推薦的控件。如今在 Material Design 中更是找不到 Toast 的蹤影。主要原因還是 Snackbar 在交互友好性方面比 Toast 要好,例如:支持手勢交互、支持與 CoordinatorLayout 聯動等。
因為現在大多數的PM/交互/UI設計師,在設計產品的時候都是以iOS為基準 思考產品上的各種功能邏輯、交互狀態,而很容易忽略了某些功能在Android里并不能“一稿適應兩端”,部分產品差異在安卓上是不一樣的。
所以本文就講下Android和iOS 10大產品/交互差異,希望你在日后的產品設計時,可以考慮到更多層面的知識點(可能在某些安卓高級機型里并不通用).
對在于一些虛擬商品的支付上,如vip會員、xx幣,xx豆。iOS和Android就存在不同的支付規則:Android基本無限制,無抽成。而iOS限制比較多,而且要抽成大約30%的手續費。
舉個例子:同樣充值30元,Android端會得到300金幣,而在iOS中,只有210金幣。正因這個抽成規則的不同(沒辦法,這是蘋果硬性規定的),才會出現各種平臺的虛擬貨幣,在Android和iOS中的充值比例是不一樣的,如快手:
所以對于虛擬商品在iOS端的抽成規則,在產品設計時一定得考慮清楚,因為這關系產品的商業和盈利模式。通常有2種解決思路:
A. 讓用戶承擔30%的抽成
a. 同樣的價格,iOS用戶得到的商品少些
如同樣充值30元,Android端會得到300金幣,而在iOS中,只有210金幣。像快抖音、陌陌等各種貨幣充值。
b. 同樣的商品,iOS用戶支付更高的費用
如3個月的vip會員,Android端定價是58元,iOS端則可以設為68元。如優酷、騰訊視頻的vip會員價格。
B. 公司自己承擔30%的抽成
如iOS端充值30元,公司實收21元,但iOS用戶能得到和Android一樣的300個金幣(理論上是有這個解決思路,但現實中很少有公司去實現,畢竟抽成成本就擺在那里).
另外還需要注意的是:因為抽成規則的不同,對于同一個ID的賬戶余額,在Android和iOS端中是不能通用的。因此在產品設計時需要將這個點告知用戶,預防用戶犯錯、以及惡意刷幣。
Android由于開源的特性,因此對接的都是第三方支付平臺,如微信支付、支付寶、銀聯卡等。
而iOS出于系統的封閉性和安全性考慮,只能調用蘋果自己的支付系統:登錄APPle ID,然后用授權的支付方式(支付寶、銀聯卡)進行付款。
“狀態欄”也就是我們手機界面最頂部的電池欄,它除了可以在不同背景里切換顏色外,在交互的觸發上,Android和iOS中也各不相同。
雖然這一交互差異是iOS專有的,但它卻啟發我們一個新的設計思路:在必要的時候,狀態欄可以為產品承載新的交互狀態。如網易的LOFTER(iOS端),用戶離開音樂播放界面時,狀態欄就用于顯示音樂信息和操作入口,方便用戶在瀏覽其他內容時可以快速關閉音樂時,極大提升了用戶的操作效率。
這種大多應用于運營的“拉新”場景,為了能新用戶得到好處(紅包、優惠券、更好看的內容等)。通常會讓新用戶下載產品APP領取。而由于Android與iOS的下載方式不同,會帶來不同的交互狀態和產品邏輯。
可以在當前頁面(后臺)下載,也可以在應用商店下載;過程中可以顯示進度,且允許用戶暫停下載;下載完成后調起安裝頁面,用戶可以取消安裝,也可以自動安裝…
正因為Android下載軟件的各種便捷性,所以才會帶來各種交互狀態:未下載、下載中、暫停中、已下載但未安裝、已安裝。這些都是交互設計師需要特別注意的,每個不同的狀態背后都會不同的產品邏輯。
只能跳轉到App Store里下載,所有下載流程和狀態都是在那完成的,可以脫離開活動頁面,相比于Android的下載方式就簡單很多。跳轉的方式可以是全屏幕,也可以是半屏。
由于安卓的開源特性,當有新版本時都會提示用戶更新,且每個產品內部都帶有“版本更新”入口。而更新的方式可分2種:
而iOS端出于對用戶體驗的考慮,是禁止向用戶提示版本更新信息的。這也是為什么絕大部分的iOS產品,都是沒有“版本更新”入口的原因(像QQ、支付寶、百度網盤等大廠產品)。即使有,點擊了也直接跳轉到App Store查看版本情況。
且下載渠道都固定在App Store里。理所應當的,軟件的更新方式也只能在App Store里進行,無法做到與Android的一樣做到后臺下載、后臺更新。
在手機鍵盤里輸入文字時,iOS由于系統的限制,對文字的發送指令只能在鍵盤上來完成,因此iOS用戶的交互操作都全部集中在鍵盤右下角。
而Android端就靈活很多,不僅可以在鍵盤上執行發送指令,也可以在輸入欄/搜索欄周邊新增操作入口。
長按一張圖片后,都會彈出一個列表浮層,因為iOS手機只有一個“Home鍵”而已,為方便用戶退出浮層才增加了“取消”入口。
而Android手機本來就有“返回”虛擬鍵,安卓用戶的退出/返回行為都習慣于通過虛擬鍵觸發,所以多做一個“取消”的意義性不大。
iOS端一直教育著用戶使用“左滑”刪除列表信息,所有的刪除功能都是支持“左滑”來實現的。
而Android系統大部分只能通過“長按”來觸發編輯狀態,其中就包括了刪除功能。不過現在也有極少數的產品,正在逐漸打破這兩端間的“刪減”界限,比如網易郵箱(Android)就做到了左滑刪除信息。
當我們第一次打開產品、允許了獲取消息通知的權限后,所有的信息傳輸都會基于服務器進行推送。而兩端在這塊的推送機制又有所不同:
所有新信息都會實時推送到你的手機里,即使你關閉了軟件,還是一樣會收到提示。就算使你處于斷網狀態,信息也會先儲存于蘋果服務器,等你聯網時再一次性把收到的信息推送給你。既釋放手機內存,又不會讓用戶遺漏有新消息。
而安卓則不同,你若退出了產品,數據的推送只有等你再次打開產品時,才會通知你有多少新信息。雖然減少了對用戶的干擾性,但也增加了服務器數據儲存的壓力,還容易耽誤用戶接收新消息。
也就是我們手機的輸入法鍵盤,在微信聊天內、手機短信里復制了一段內容后,由于Android與iOS的平臺特性差異,會給兩端用戶帶來了不同的交互差異。
復制完文字后,打開輸入法鍵盤會顯示來自剪切板的文字內容。用戶只需點擊,即可將文字復制在搜索欄、輸入欄等需要文字填寫的操作區域里,無需觸發“粘貼”操作。
而有些安卓機(如小米/錘子/樂視等),無論你復制了什么信息(文字、數字、網址等),都很難實現輸入法里的“剪切板”功能。用戶需要觸發“粘貼”功能,才能輸入將剛剛的復制內容。
而對于特定的信息類型:如網址。用戶復制網址往往都帶有極強的目標性、搜索性,一些瀏覽器產品會預判用戶這一操作行為,將復制的網址前置展示出來,以抵消Android端對于復制文字帶來的系統限制。如QQ瀏覽器(安卓端)就有2種解法方法:
而UC和百度也有類似的解決辦法:將復制后的廣泛信息(文字/數字/網址/郵箱地址等等)嵌入在搜索框下方,用戶點擊就能搜索。
這也是一種妥當的解決方法,因為用戶可復制的信息類型特別廣泛、目標不是很清晰。無法準確判斷出用戶一定會有搜索訴求。所以才將復制后的信息放在搜索框下面,而不是自動粘貼到搜索框中,既考慮了用戶目標,又兼顧了操作效率。
以上就是Android與iOS的差異總結,若有描述得不當請多指教!下面是總結文件。
文章來源:人人都是產品經理
有理有據,有面有料,是一個設計作品的專業體現。之前花了四篇小文(鏈接在文末),講述如何提升設計師設計作品的內在含金量和外在形式感,今天,我們將用最后的篇幅,聊聊如何給設計作品創造一個盡可能完美的終局——交互文檔的細節。
千里之堤毀于蟻穴,再專業的交互設計,如果在后期交付時頻繁出現細節的缺失和補充,其實還是很容易遭受研發和測試同學diss的。甚至有可能因為一個細節的疏忽,導致整體交互方案的崩盤,不得不從頭再來。
如果研發過程中發生這樣的設計事故,其實是非常影響團隊士氣和個人專業影響力的。
設計細節篇,分兩個維度來闡述,一個是文檔外,一個是文檔內。
文檔外,其實是要回歸設計的初衷,很多設計師包括我自己,設計久了,總愿意把自己當作是用戶的代言人,盡可能的為用戶體驗著想,絞盡腦汁的尋求最佳體驗的設計,并以此為傲。
這如果是在產品發展的成熟期,功能相對穩定,體驗同質化嚴重,這個時候追求的體驗,尋求體驗的突破是非常有意義的,可以讓產品獲得更多的口碑,從而帶來更多的用戶和收益。
但是如果是在探索期和成長期,過度的追求單一維度的體驗,可能反而會成為一種產品發展的桎梏,阻礙產品的成長,而在衰退期追求的體驗,則完全背離了公司作為商業組織的利益點,會顯得和整個項目組格格不入。
產品生命周期與用戶體驗要求
所以對于探索期和衰退期的產品來說,設計師要盡可能考慮商業性和技術可行性。用最小的設計代價,快速的迭代,完成產品的目標(驗證價值或解決問題)。
如果設計師在這兩個階段太揪細節,可能會因為得不到項目的支持而心灰意冷。
技術可行性和商業收益,不是我們所擅長的領域,通過前面的設計法則和用戶埋點也不能準確推算,所以還需及時向技術及商務同學確認,別人家能做的產品形態,咱們家技術框架不一定支持。別人家能做的精簡,可能會損害咱們家的主營業務。
涉及到這兩點,除非有自上而下的旨意,否則單憑設計之力無異于蚍蜉撼樹,很容易讓自己費力不討好。
文檔內的交互細節,主要在于文檔的完整性和閱讀體驗,既要面面俱到,又要清晰簡潔。
面面俱到是指要盡量包含所有流程、頁面及狀態,避免遺漏。它體現了一個交互設計師設計思維的嚴謹性和設計態度。
網上有很多關于交互走查表的模板,非常的全面,但就是因為太過全面,反而讓很多新人設計師望而生畏,避而遠之,這就失去了交互走查表本身的意義。
我認為,交互走查表其實就是提供給設計師的一份幫助文檔,大家都知道在設計的時候,提示要盡可能的簡短,要適時出現,要清晰簡潔,遺憾的是我看到的交互走查表往往都不滿足這一條。
冗長的交互走查表,就像是冗長的幫助文檔一樣,把責任都推給了設計師,仿佛在說:誰讓你不按照我逐條檢查呢?
如果出現細節的遺漏,就變成了設計師自己的錯。
誰都不想遺漏,但是后期設計時間往往真的就很緊迫,設計師除了細節的補充,可能還有其他很多任務需要做,大家只是想確認一下而已,哪有時間和精力去看那么冗長的“幫助文檔”。
所以發揮一下設計師的同理心,根據二八原則,80%設計師可能遺漏的問題都只是認知走查表里20%的內容,這20%的內容也真正意義上影響我們80%的用戶和體驗,是設計者最為關心的。
那么,我們是不是先把這20%的設計解決好呢?這才是真正急設計師之所急,站在設計師的角度考慮問題。
所以本文精心篩選出最容易被大家所忽略,且大多數設計又必須要考慮的異常分支,為大家整理了一份《設計細節check表》,以確保主體流程的主要設計“面面俱到”。(流程設計、布局設計,以及互動設計,如果大家在前期有遵守對應的設計原則,再加上數據的支持,應該大方向都是正確的。我也希望大家盡量通過前期的理論和數據,去保證流程和整體設計的正確性,而不是要等到最后細節確認的時候,才來審視檢驗整體,讓細節篇,真的是在完善細節。)
設計細節Check表
我把這份《設計細節check表》按照從整體到局部進行了歸類:
最大的單元是指每個任務流程的檢查,然后是頁面單元,因為頁面涉及到加載的異常分支比較多,所以單獨拆出來和頁面狀態并列分別闡述。最后是組塊單元,主要包括輸入類和非輸入類的組件操作及反饋。
下面我們逐一來看:
流程檢查主要包括三點:
秉承一致性原則,同一個產品,能保持一致的地方,要盡可能保持一致。
在實際項目中,同一個產品,往往有多個設計師,每個設計師都負責相對獨立的一大模塊,偶爾就會涉及到相似功能的設計,因為是不同人在進行,所以設計出來的形態就可能不一致;
但對于用戶來說,使用相似功能的人,往往可能是同一撥人,設計的不一致,體驗就會有差異,不僅對于用戶來說學習成本高,而且對于項目組來說同時維系兩套不同的設計,成本也比較高。
如果一個流程的正向流程和逆向流程是完全一致的,一般無需特別說明,但是如果返回時需要跳過某些頁面或者狀態快速返回,則需要進行特殊標注,否則可能會被研發同學遺漏。
當遇到特殊情況,程序崩潰,后臺殺死,斷電等,進度是否能夠能自動保存并恢復,如果需要,就需要考慮恢復的時機和形式。
說完流程,再來說單獨的頁面。談到頁面時,首先要談的是加載狀態,畢竟頁面不是憑空就有的。
加載狀態主要要考慮以下幾點:
預加載的時機是什么時候,預加載的內容有多少?(對于用戶會長時瀏覽的內容,一般建議預加載,預加載的內容一般會結合內容大小、瀏覽時長、甚至網絡狀態綜合決定)
在信息未加載出來前,界面是顯示空白引導,還是默認占位符,還是顯示上一次的緩存內容?(一般有緩存優先顯示緩存,無緩存先顯示默認占位符,等內容加載完成后再進行替換)
是否顯示加載圖標,進度條,是否可以取消加載?(一般情況下等待超過0.1s,就能夠被用戶感知到,就建議顯示加載圖標,以便用戶知道程序已經接收到并在響應用戶的操作指令。如果等待超過1秒,就建議顯示進度條,并提供取消操作,便于用戶自主控制)
是全部加載,還是分布加載顯示?(一般情況下,在2~3屏內的有限內容,或者完全非同類的內容,是可以一次性全部加載的,因為用戶可能就是沖著某一類內容進來的,很可能會快速滑動到目標內容。
而對于同類型的圖文信息,而且是內容比較多時,一般都會采取分布加載的形式,避免浪費多數用戶的流量。
視頻播放機制、廣告圖片加載等,一般還要考慮網絡情況,一般WIFI情況下,因為對流量及網速的要求低,所以采用自動播放視頻,自動顯示圖片、播放廣告等,更容易被用戶所接收)
是否自動重試加載,何時進行超時提示等。(很多產品在設計時,如果不是完全無網絡,僅僅是網絡信息不穩定,會嘗試自動加載,以避免用戶手動操作。如果自動加載超過上限,才會提示讓用戶稍后再試)
頁面加載出來后,就要要考頁面本身的狀態了。
需要考慮的異常頁面狀態主要有以下幾種:
考慮完整體頁面后,最后再來考慮一下頁面內的組件狀態。先來看一下輸入類。
輸入框/文本框要考慮的主要有三點:
最后看一下非輸入類的操作組件。
“文本/圖標按鈕、鏈接、可操作的卡片/列表”要考慮一下幾點:
如果設計完成后,初步檢查以上五項內容,基本上可以確定主題流程的主要設計內容已經面面俱到了。
文章來源:人人都是產品經理
2019年7月20日,UXRen北京舉辦了《如何通過體驗設計賦能產品增長》的沙龍分享,本文基于嘉賓 何曉頔(搜狗高級用戶研究工程師)的現場分享總結而成。
何曉頔2015年開始從事用研工作,2018年加入搜狗,目前在搜狗搜索擔任用戶研究工程師;期間支持搜狗搜索相關產品的用戶研究工作,完成搜狗閱讀app、搜狗搜索app、搜狗圖片搜索改版研究,搜狗醫療搜索系列研究,搜狗翻譯app調研等項目;擅長全局思考問題,綜合考慮各方訴求,通過研究方法的熟練運用,需求的深度解讀,結果的產出,不斷提升用研的影響力及價值。
由于用研資源的緊張,傳統研究模式周期長,使得用研游離在項目邊緣,融入難,導致時效性跟不上整個項目的推進,出現信息不對等的情況,從而造成研究方向的偏差,而且研究結果也會和設計、產品的需求脫節,造成落地難的問題。
敏捷用研可以很好的解決這個問題,它可以很好地融入在項目的各個階段中,能夠在3-5天內地完成調研需求,真正融入到整個項目的流程中,在每個階段都以結果導向的解決問題,形成每個階段的連接器。所以說他以用戶思維為核心,通過用研的驅動性,增加用戶在整個項目中的參與度和體驗感,不僅能夠實現成本的減少,還能提高響應的效率,實現信息層面的對等,還原用戶的真情實感,性價比高的同時還提升了用研的價值。
敏捷用研可以在敏捷項目的各環節中發揮作用,而且在不同階段可以有針對性的解決問題。
2.1 改版前
需求分析
用戶點擊行為研究
書城結構布局研究
2.2 改版中
用戶需求挖掘
搜索行為探索
2.3 改版后:改版效果評估
2.4 項目合作模式
3.1 招募策略——健全流程
招募問卷設計
招募渠道
招募用戶特征及數量
獎勵機制
3.2 研究策略——模板化、透明化
模板化:搭建問題包,分門別類、系統整理,隨時調用、整合
過程透明:邊訪談邊總結,根據需求,隨時調整、直到數據樣本趨于穩定
3.3 溝通策略——循序漸進
結合迭代研究模式,從小范圍調研起步,與客戶及時共享研究進度和成果,循序漸進:
3.4 參與策略
3.5 小結
敏捷調研不是為了快而快,而是快速解決產品需求和設計問題打造好的體驗!
問題1:內部用戶招募。國企,公司logo優化調研, 因為時間和成本的關系,邀約的是公司的內部員工(年齡集中在40-50歲區間段),調研的結果內部員工更偏好原logo的微小變化的版本,與設計方期望差別非常大,想知道是否是不應該找內部員工測試。
回答:就上述問題,不建議找內部員工測試。
內部招募是一種短平快的用戶招聘渠道,但是,
問題2:概念測試。概念型產品可以用電話訪談的形式進行測試么
回答:概念型產品,由于屬于市場上未出現產品,很難在電話中通過語言描述的方式讓用戶理解和想象出來,因此,概念類測試不建議用問卷和電話訪談的方式,建議通過面對面訪談+高保真原型展示的方式進行測試,如果實在滿足不了高保真,哪怕線框的示意圖都比單薄的語言描述更強。
問題3:用研考核機制。用研的輸出建議,有些被采納,有些不被采納,采納的建議到產品成型很多已不是建議的“原型”了,如何衡量用研結果的直接作用。
回答:
在去餐廳用餐之前,我們還有些時間再了解一項基礎設計原理。讓我們回頭看看在「鄰近性」原理當中提到的燈光明暗控制開關。你能僅通過最左側這個開關的樣式看出它所控制的燈光明暗度嗎?
如下圖這樣又如何?
我們之所以能從后者當中進行判斷,所依據的就是映射關系。所謂「映射」,即是指,將被控對象的行為規律體現到控件自身的操作方式中,譬如開關把手的上升和下降,對應著燈光亮度的升高和降低。
映射同樣體現在多個控件的布局當中,它們的次序應該能夠反映出多個被控對象之間的相對位置關系。
我們假設這三個開關用于控制臥室天花板上的三盞燈。依據映射關系而設計的開關位置應該能夠幫助人們快速判斷出它們各自控制著哪一盞燈。映射原理有助于設計師對控件的類型、位置和次序進行決策。
當映射關系不明確時,我們通常需要依靠文本標簽才能理解開關與燈之間的對應關系。這并非完美的解決方案,因為閱讀和理解文字需要花費時間和精力,同時人們也難以依靠記憶進行快速操作。
在界面設計當中,映射關系也體現在控件類型的選擇上。例如通過滑塊(slider)控制文本的橫向字間距就是很符合直覺的交互方式。而相比于滑塊或是步進控件(stepper),旋鈕則更適于旋轉操作。
當然,最直接的映射才是最好的映射。為人們提供直接操作目標對象的能力是最為簡單、精準、符合直覺的解決方案。macOS 上的鼠標指針操作,或 iOS 當中的手勢操作,都可以為人們帶來直接操作的體驗。
不知各位如何,我是很餓了,這就準備下樓去吃飯。我們在大堂見,然后一起去餐廳。
坐在餐桌前,你會看到面前擺放著一個空盤子。我們能用這個盤子做什么?顯然,放些食物在里面。除此之外呢?
盤子很光滑,可以旋轉或是滑來滑去。
盤子有一圈寬邊,可以抓著拎起來。
我們對于如何與這個盤子進行互動的觀點便是可供性的體現。換句話說,盤子的外形特征為我們提供了如何與之進行互動的視覺及觸覺線索,使我們意識到哪些交互行為可行,哪些不可行。我們會意識到要將食物放進去,或是將它滑到其他地方。但我們通常不會想要倒水進去,然后端起來喝。
可供性并非物體自身所具備的屬性,它更多是在代表行為主體與目標對象之間的互動關系??晒┬詴蛐袨橹黧w的差異而有所不同。舉個極端些的例子,對我而言,飛盤可以用來抓住或扔出去,而對我的狗來說,飛盤就是單單用來叼的。不過另一方面,碟子對我和我的狗來說都是用來盛放食物的。
由于可供性所具有的主觀特性,一個人能感知到的交互特性在另一個人看來則未必如此。當可供性所傳達的交互特性與人們的常規行為有著高度關聯時,人們會更加容易感知到。
例如,我其實可以把碟子當作茶托,這會是個不錯的茶托。但我猜我們大家日常很少真的這樣去做,因此我會更樂于將碟子視為盛放食物的容器,而非將水杯放在里面。
我們能從我們所互動過的任何環境及事物當中感知到可達性。當我們走進餐廳時,門的大小及形狀可以傳達出供人穿過的特性,連續的地面使我們意識到可以在上面安穩地行走。
椅子的造型暗示我們可以坐下,桌子的構造令我們明白可以將物品擺放在上面。
人造物品當中都包含有傳達可供性的視覺線索,使人們明白哪些行為可行。清晰的、顯而易見的視覺線索可以幫助人們迅速了解如何與之進行互動。
對于 app 界面設計而言也是同樣的道理?;瑝K控件由把手和滑軌構成,暗示著拖拽的特性。
旋鈕的樣式意味著可以旋轉。
按鈕則一目了然地傳達著可點擊的特征。
在以上每一個例子當中,可供性的傳達效率都是極高的。事實上,隨著時間的推移,我們會越發適應于抽象度不斷提升的可供性傳達形式。我們所熟悉的界面當中的按鈕,無非是現實世界里真實按鈕的高度抽象化版本;那四個圓角足以將虛擬與現實兩個版本的同一種物體關聯起來。
同理,滑塊把手周圍那細微的投影效果也足以讓我們意識到其獨立于滑軌之上的操作特性。
而且,僅有的這一點點視覺線索可能都不是必需的,對于很多人來說,一條直線上的一個實心圓足矣傳達滑動操作的可供性了。
有時候,可供性也可以通過動效進行傳達。在天氣 app 中點擊主體內容,界面整體便會稍稍上升,暗示著可以通過滾屏來查看更多內容。
無論你使用何種方法,都必須確保 app 界面能夠清晰準確地傳達其自身的交互特性,否則,人們將困惑于如何與之互動。他們很可能會以錯誤的方式進行操作,然后發現無果,進而將控件理解成不可交互的元素,app 的可用性也會因此而受損。
原型的不同階段,含義和作用也各不相同,更加認清了原型在工作中的用途,希望對各位也有所幫助~
不知你有沒有這樣的經歷:為了不讓原型看起來丑,會糾結各種細節處理(間距、大小),結果造成工作周期延長,精力損失;為了讓原型接近于真實效果,會思考各種精致布局,結果leader來一句‘你現在做這么好看干嘛,這個功能都沒確定好’....在各種階段畫出了不合適的原型。
所以今天想聊聊‘交互原型’這一話題,也算是對自己成長的一個總結和沉淀。
文章目錄:
·原型的不同階段
·原型與用戶體驗的5個層面
·原型產出的原則
Part1:原型的不同階段
其實我覺得畫原型和做設計的理念是一樣的:沒有好壞,只有是否合適~
當產品經理/交互設計師沒認清當前的需求階段時,無論你畫的好不好看,都會出現一些糟糕的現象:一開始就注重細節處理、在原型需要重點輸出時,又忽略功能與邏輯上的思考、在功能未確定時追求精致頁面效果...
下面是我對‘原型’的理解,所繪制用于表示不同階段下的需求特征。
01.想法階段:
在產品需求的初始階段,功能概念都比較模糊,大部分想法都停留在腦海和口述上(工作中典型的場景,如團隊風暴、需求討論、會議評審)。需要我們不停地理清概念想法,驗證需求的合理性、目標是否正確。
所以這個階段的強調是:產品雛形 - 將我們的想法、概念需求可視化出來,并加以討論驗證。因此,最合適的方式就是用‘草圖’表達,快速產出快速修改,能即時看見產品的雛形。
常用‘草圖’勾勒產品雛形,除了可以表達想法、探索方向外,好處還在于:
a. 能提升你快速思考、驗證假設、優化設計流程的能力。
b. 能展示你思考問題的過程(設計思維),體現專業能力。
02.修改階段:
這階段的產品目標和方向較為清晰,接下來需要優化原有的概念想法,為產品創建一個信息架構、梳理功能邏輯等工作,方便在需求評審會、團隊討論中推動產品功能的進展。
該階段強調:理清目標 - 根據用戶訴求、業務目標、運營需要等不同目標點,逐步梳理出原型上需要展示哪些功能內容(界面布局、信息取舍)。
所以對產品經理/交互設計師來說,只需產出一個大體上看得明白、能理清產品功能的‘中保真原型’即可。方便即時修改,向產品定型/高保真原型過渡。
03.確定階段:
到了這個階段,產品需求的功能布局、信息設計已全部確定,這時一份全面、嚴謹的‘高保真原型’就尤為重要。
一方面可以為視覺同事的UI輸出、開發的落地實現等提供依據。另一方面在各種工作場景中,高保真原型都能發揮很大的作用,如交互評審、領導過稿、A/Btest、demo演示等等。
這一階段強調:細節核對 - 因為關系著UI輸出、界面實現等工作,所以需要注意各種交互細節,以防出現設計、流程上的漏洞。
有2個核對緯度上的檢查:
a. 規范對齊
若團隊內部有設計規范時,一定要對齊字體大小、顏色、布局、間距等視覺元素。且能復用已有樣式就盡量復用,避免出現“一個功能,兩種樣式”的情況,如圖:
b. 交互走查
高保真原型輸出后,需要根據交互自查表,一一梳理原型說明是否存在漏洞,以防出現異常流程和內容狀態。
另外,當你想要獲得用戶反饋、測試你的想法是否為業務/用戶創造價值時,盡量使用高保真原型。原因在于:能夠產生真實的操作效果、給用戶帶來‘身臨其境’的瀏覽體驗。

最后總結一下,不同階段的原型用途:
·草圖:快速表達想法、驗證需求、展示思考過程。
·中保真原型:梳理大體產品框架,繼續優化功能。
·高保真原型:為UI輸出與開發實現提供依據、測試用戶反饋、制作交互demo、向領導過稿等等。
Part2:原型和用戶體驗5個層面
另外我還發現,結合‘用戶體驗5個層面’來看不同階段的原型,兩者是多么地吻合、有理有據。
01.戰略層和范圍層 - 草圖
產品想要做什么?如何去滿足戰略目標?在構思把目標和需求轉變成功能和內容時,用草圖的方式是極為合適的:快速表達、即時驗證,能讓概念想法馬上‘可視化’出來。
02.結構層 - 中保真原型
想法表達后,需要為產品構思一個具體的框架結構,根據業務目標和用戶訴求,不斷地修改產品功能、信息設計,慢慢完成產品的定型。所以這時候只需產出一個大體上看得懂、方便修改的中保真原型即可。
03.框架層 - 高保真原型
這是原型設計的最后階段,產品關系已理清、功能內容已確定。這階段注重原型的界面細節處理,如梳理異常流程、信息的不同狀態、是否對齊規范等等,以便后期的界面實現,所以一份高保真原型就尤為重要了。
04.表現層 - UI效果圖
原型確定后,接下就是UI優化階段了,這時候產品的最終效果也就出來了。產品的下次功能迭代,也是根據此UI效果圖的基礎上進行原型優化、修改。
Part3:交互原型的原則
最后簡單說下,原型產出的幾個原則:‘使用灰色圖’和‘復用已有樣式’,避免在今后工作上踩坑:
01.使用灰色圖
原型就要有原型的樣子,大面積的彩色布局,很容易讓人覺得這是UI效果圖(視覺同事可不背這個鍋),尤其是在交互評審會上,這種細節更應該注意。
02. 復用已有樣式
這個上面已經說了,能復用樣式就復用,避免出現“一個功能 兩種樣式”的情況,否則和視覺、開發同事對接原型時,會造成一定的理解干擾。
總結:
以上對交互原型的一些見解,若有描述得不當請多指教,下面是總結文件(轉發截圖給我可領取)。
文章來源:UI中國
藍藍設計的小編 http://m.skdbbs.com