先問一個問題:怎么樣衡量一個設(shè)計好與不好?工作中實踐越多次,越會發(fā)現(xiàn)華麗的設(shè)計稿并不是體現(xiàn)設(shè)計師專業(yè)能力的唯一標準。普通設(shè)計師和高級設(shè)計師區(qū)別在于,設(shè)計方案是否具備完整設(shè)計思路;設(shè)計對于業(yè)務(wù)有沒有真正的價值體現(xiàn);以及設(shè)計方案的推動落地的完整性到底有多少。設(shè)計越往后走,越考驗產(chǎn)品思維,設(shè)計思維,以及設(shè)計推動能力。這是產(chǎn)品設(shè)計師需要關(guān)注的核心三要素。
設(shè)計師在工作中接到設(shè)計需求會不自覺的第一時間想著如何去進行視覺表達,視覺表達確實非常重要,也是公司對于設(shè)計師的核心價值的定位之一,但視覺表達只是其中設(shè)計專業(yè)本職工作中的一個環(huán)節(jié)。設(shè)計師還要應(yīng)該能夠站在產(chǎn)品、設(shè)計、技術(shù)等不同維度去思考設(shè)計方案的可行性。產(chǎn)品打磨-視覺呈現(xiàn)-落地執(zhí)行,在這三個核心點里面設(shè)計師分別有不同的定位和價值所在。
一. 產(chǎn)品“雙標”滿足
產(chǎn)品打磨包含產(chǎn)品規(guī)劃,內(nèi)容組成,界面布局,交互梳理等等…所有環(huán)節(jié)的工作是為了符合產(chǎn)品最終的目標。產(chǎn)品所有的能力會核心圍繞兩個點:1商業(yè)變現(xiàn) 2用戶需求滿足。這兩個目標在產(chǎn)品執(zhí)行的環(huán)節(jié)有時候會有一些沖突,在產(chǎn)品打磨階段設(shè)計師通過怎樣的方式,做到既滿足產(chǎn)品商業(yè)目標又滿足用戶體驗需求?可以按照以下幾個步驟進行分析尋求切入點:
這里用騰訊動漫付費模塊舉例說明: 項目背景是騰訊動漫產(chǎn)品要做付費體系升級設(shè)計,接到需求先有由產(chǎn)品源頭一步步深入,逐步展開設(shè)計方案的規(guī)劃。
01 產(chǎn)品目標確認
通過對項目背景的解讀和產(chǎn)品方案的深入了解,以及總結(jié)當前存在的一些問題,可以明確得到項目中產(chǎn)品核心目是什么。付費升級核心原因是付費轉(zhuǎn)化低,用戶付費意愿不夠強烈。此次升級的核心目標是促進內(nèi)容消費,提升付費率。
02 分析用戶路徑
確認目標之后從哪個模塊兒開始進行首要需要考慮的。對于現(xiàn)有現(xiàn)有功能的升級,建議核心從產(chǎn)品本身著手,可以根據(jù)用戶行為分析,獲取用戶常規(guī)使用路徑,找到用戶使用場景下的核心目的,從而去挖掘用戶在付費路徑下的訴求點,根據(jù)訴求點找到付費升級的觸點。這里我們羅列了用戶閱讀產(chǎn)品的路徑。
03 觀察用戶核心需求是否被滿足
用戶在每個場景下都會有“痛點”和“癢點”。比如在閱讀前,核心目是想快點看到漫畫內(nèi)容;閱讀過程中,想要及時宣泄對漫畫的故事情節(jié)的感受;閱讀后,希望找到更多相關(guān)內(nèi)容或者能夠和內(nèi)容有更多的互動。目前產(chǎn)品在這三個關(guān)鍵的路徑節(jié)點都存在一些問題,閱讀前對于付費缺乏正向引導,閱讀過程中互相行為較少,閱讀后沒有更多延展內(nèi)容可供消費等。
04 洞察設(shè)計切入點
根據(jù)用戶在閱讀 “前 中 后” 關(guān)鍵路徑的節(jié)點的不同情緒反饋,我們可以做出找到相應(yīng)情感滿足切入點,并且制定解決方案
05 制定設(shè)計方案
將之前找到的設(shè)計情感切入點用交互和視覺的形式呈現(xiàn)出來,盡可能完整的表達清晰。下面展示是關(guān)于付費升級優(yōu)化的完整視頻DEMO。整個方案采用趣味情感化形式為核心設(shè)計思路,逐步去引導用戶付費。讓用戶在趣味互動中完成產(chǎn)品的商業(yè)轉(zhuǎn)化目標。
https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html
二. 設(shè)計呈現(xiàn)的“差異化”
視覺呈現(xiàn)是設(shè)計師們都比較擅長的工作,但不同專業(yè)高度要求下方案最終呈現(xiàn)出的效果是完全不一樣的。好的設(shè)計方案,需要在設(shè)計上做出明顯的“差異化”,這里的差異化是指要區(qū)別于常規(guī)輸出一般的水平。差異化的可以從多個點入手:
優(yōu)質(zhì)的設(shè)計美感:
美感是作為設(shè)計師首先需要培養(yǎng)的技能之一,也是在后續(xù)職業(yè)生涯的一直需要用到的技能。設(shè)計師被神職化的很大一個原因就是因為設(shè)計師的美感比一般人要好,有懂得欣賞美、鑒別美、以及創(chuàng)造美的能力。單一從視覺層面,設(shè)計作品是合格品還是精品,最終取決于畫面的精美程度。項目不分大小,再小的一個項目都可以做出精致品質(zhì),這也是體現(xiàn)設(shè)計師專業(yè)度的核心衡量之一。
完整設(shè)計思路:
設(shè)計方案的完整性也能夠很好的設(shè)計師專業(yè)度的差異化,幾張圖的設(shè)計稿和一個有完整設(shè)計思路的設(shè)計方案在品質(zhì)上自然是明顯差別的。設(shè)計師不光需要將設(shè)計呈現(xiàn)出來,更需要有嚴謹?shù)脑O(shè)計思路并且表達出來讓受眾到你的設(shè)計想法。設(shè)計前期分析、中期執(zhí)行、后期落地以及迭代優(yōu)化,能夠讓設(shè)計師有意識的鍛煉和提升自己的設(shè)計思維,對于設(shè)計師能力提升有必然的幫助。
獨特創(chuàng)意:
設(shè)計差異化呈現(xiàn)上,創(chuàng)意是一個非常好的切入點。行業(yè)大趨勢的前提下,現(xiàn)在同類產(chǎn)品越來越趨于同質(zhì)化,受眾使用產(chǎn)品的時候都會有一些常規(guī)認知,關(guān)于功能的、交互操作的、內(nèi)容組成的等等,淘寶和京東、大眾和美團、甚至QQ音樂和網(wǎng)易音樂在產(chǎn)品使用體驗上都有高度重合的地方,這些已經(jīng)在用戶心智中形成習以為常的認知感受。如果能夠在用戶的常規(guī)認知里,用創(chuàng)意手法呈現(xiàn)出超出他們預期的內(nèi)容使其驚喜,產(chǎn)品設(shè)計就會有明顯差異化體現(xiàn)。
善用情感化:
具備美感的設(shè)計能讓作品看起來有高級感,但更為高級且有效的是能夠引起用戶情感共鳴的設(shè)計。設(shè)計是主觀的,對于設(shè)計每個人都有自己的想法,也正是因為主觀的設(shè)計感受,能讓設(shè)計在情感化打造方面可以有很多的嘗試方向。能夠引起受眾主觀情感上的共鳴和認同的設(shè)計,會形成產(chǎn)品的核心記憶點之一。設(shè)計師對于情感化設(shè)計往往會有一些誤區(qū),認為圖形可愛,色彩羨慕,動效流暢且能夠形成一套視覺體系,就能夠算情感設(shè)計。真正的情感設(shè)計是需要從用戶角度出發(fā),挖掘用戶的認知領(lǐng)域和喜歡,從而去進行符合用戶情感訴求的呈現(xiàn)。
三. 方案推動的效能管理
設(shè)計方案輸出只是整個產(chǎn)品生產(chǎn)流程中的一個核心環(huán)節(jié),產(chǎn)品上線后體驗如何最終取決于落地實現(xiàn)的程度。在方案落地支持過程中,效率協(xié)調(diào)和實現(xiàn)能力是保證設(shè)計方案貫徹一致執(zhí)行的關(guān)鍵因素:
協(xié)作
產(chǎn)品設(shè)計師工作協(xié)調(diào)分為內(nèi)部協(xié)作和外部協(xié)作。內(nèi)部協(xié)作即設(shè)計師之間的溝通協(xié)同,主要內(nèi)容是如何保持設(shè)計語言一致性,除了制定設(shè)計規(guī)范,還可以建立公共控件庫,線上調(diào)用??丶炷軌蚴乖O(shè)計師協(xié)作無學習成本,設(shè)計師輸出設(shè)計稿效率也能夠大大提升,同時保一致性。
外部協(xié)作主要是和下游的技術(shù)同事直接的工作對接,設(shè)計方案的交接方式以及開發(fā)獲取信息的效率很關(guān)鍵。在開發(fā)接收設(shè)計方案的時候,盡能力降低獲取成本以及理解成本。比如設(shè)計稿的標注,在標注上設(shè)計師一般會花很長時間,開發(fā)也需要逐步查看,偶爾還會有標注遺漏的地方。我們團隊會直接采用插件,設(shè)計稿及時同步,并且開發(fā)可以自己隨時查看每個元素的標注信息,便捷。
這里推薦兩款協(xié)調(diào)軟件:一款是InVision可以在sketch里進行控件協(xié)同調(diào)用,所有想用的元素直接源文件調(diào)用,不需要再問同事要源文件!另一款是Zeplin技術(shù)同學可以直接查看元素屬性以及間距等,設(shè)計師解放雙手不再需要標注!
官網(wǎng)鏈接:
https://login.invisionapp.com/auth/sign-in
實現(xiàn)能力
專業(yè)技術(shù)之間的壁壘,也會成為設(shè)計方案實現(xiàn)的阻力。同樣的界面,設(shè)計人員用設(shè)計軟件實現(xiàn),技術(shù)人員用邏輯代碼實現(xiàn),實現(xiàn)的方式和成本存在很大的差異性,所以往往設(shè)計師認為很簡單的需求在開發(fā)層面的確非常難實現(xiàn)。當然,不是所有需求都是無解的,設(shè)計師在技術(shù)實現(xiàn)層面還是可以做一些事情:
01 方案前置溝通
設(shè)計一個新的功能的時候,如果有非常規(guī)的設(shè)計方案,可以提前和技術(shù)人員溝通實現(xiàn)的難易程度,讓技術(shù)人員有前期預判和預演的時間。并且,可以將設(shè)計做成簡易DEMO方便技術(shù)人員快速理解,避免雙方存在信息不對等的情況。
02 搭建開發(fā)控件庫
開發(fā)控件庫和設(shè)計規(guī)范一樣,是最基礎(chǔ)但應(yīng)用最為頻繁的模塊兒。開發(fā)控件庫可以將最基礎(chǔ)的元素形成固有規(guī)范,所有開發(fā)實現(xiàn)都用同一套規(guī)范,以確保實現(xiàn)的高度一致性,同時也能夠提升實現(xiàn)效率和設(shè)計還原。設(shè)計可以輔助開發(fā)一起制定開發(fā)控件庫,確??丶旌驮O(shè)計規(guī)格的一致性。
03 尋求技術(shù)語言共通性
盡量將設(shè)計方案轉(zhuǎn)化為技術(shù)能夠理解和復用的形式進行對接。除了靜態(tài)設(shè)計稿的標注,設(shè)計和技術(shù)實現(xiàn)最大的難點在于動態(tài)交互的實現(xiàn)上,對于動態(tài)設(shè)計,將設(shè)計方案轉(zhuǎn)換為代碼文件交付給技術(shù)實現(xiàn),這樣能確保功能的正常實現(xiàn)同時減少后期設(shè)計還原性的偏差。
以上初步總結(jié)的關(guān)于產(chǎn)品設(shè)計師在設(shè)計過程中從前期產(chǎn)品規(guī)劃到中期設(shè)計執(zhí)行再到后期開發(fā)落地應(yīng)該注意的一些核心點:
第一條,設(shè)計方案既要滿足產(chǎn)品目標又同時要兼顧用戶體驗;
第二條,優(yōu)秀的設(shè)計師,會保持設(shè)計方案的“差異化”;
第三條,設(shè)計師職責除了確保設(shè)計方案完整性,更重要的是推動設(shè)計方案的完整落地。
在產(chǎn)品設(shè)計過程中,設(shè)計師需要關(guān)注還有很多關(guān)鍵點,這里也歡迎大家一起補充交流,正是這些關(guān)鍵點,將設(shè)計師的思維逐步打開,使其成為一個具有全鏈路思維的設(shè)計人才。
文章來源:UI中國
交互手勢是用戶操作的重要部分,交互手勢的設(shè)計好壞非常影響用戶體驗,那么,交互手勢的設(shè)計上對于容錯性和邏輯性需要注意什么?
隨著用戶體驗被愈發(fā)的重視,更多的 APP 偏向于使用多手勢優(yōu)化用戶的操作流程,降低使用阻力。
點擊某個確定的按鈕的手勢操作雖然被普遍使用并被用戶熟知,但是增加更快捷的手勢操作可以大大增大操作熱區(qū),提高操作效率,如下圖。
然而,我們可以發(fā)現(xiàn)由于不同產(chǎn)品的設(shè)計師對于用戶體驗的理解不同、交互層面的思考不同,導致設(shè)計的交互手勢也不同。
有時同一種操作在不同的 APP 中交互手勢也是不統(tǒng)一的,這無疑增加了用戶的學習成本和記憶成本。
舉個例子,iOS 端的得到和有書的播放頁的打開和關(guān)閉方式。
得到有兩種方式打開和關(guān)閉頁面,用戶可以通過點擊控件或上滑控件打開播放頁,通過點擊收起按鈕或下拉頁面關(guān)閉播放頁。但是有書只有一種方式打開和關(guān)閉,用戶只能通過點擊控件打開播放頁,通過點擊返回圖標關(guān)閉播放頁。
這讓習慣了使用得到的我去使用有書時,感覺非常別扭,每次都嘗試用得到的手勢去操作但是都失敗了,失敗后我下一次并沒有記住仍然用手勢去操作,如此反復令我相當沮喪。
容錯性是一個很大的話題,今天我們僅僅在交互手勢層面上討論。
上面的例子中,有書并沒有設(shè)計滑動手勢去打開和關(guān)閉播放頁,那么我以我的經(jīng)驗去進行的滑動滑操作在有書這個產(chǎn)品中就是錯誤的和不被產(chǎn)品識別的。但是這種手勢又廣泛存在于大量的音頻播放 APP 中,如喜馬拉雅、荔枝 FM 等。
一旦用戶從這些 APP 遷移到了有書,本來養(yǎng)成的操作習慣在有書就失效了,用戶就會感覺“這個 APP 很難用,用起來很不舒服”,進而可能放棄有書轉(zhuǎn)而投向其他產(chǎn)品懷抱。
與手勢設(shè)計類似,這也是為什么現(xiàn)在的同種類型的 APP 的信息架構(gòu)設(shè)計越來越同質(zhì)化,當我們打開淘寶、天貓、京東時我們有時感覺就像是同一個 APP ,本質(zhì)上也是為了降低用戶的遷移、記憶和學習成本。
如下圖所示,提高手勢的容錯性對用戶的意義。
很多優(yōu)秀的產(chǎn)品考慮到了上述問題,設(shè)計了多手勢來優(yōu)化用戶體驗。
舉個例子,在 APP Store 的首頁點擊一個推薦卡片后進入詳情頁,由于詳情頁是直接由卡片放大轉(zhuǎn)場的,不同于傳統(tǒng)的新頁面右側(cè)進入和從底部彈出。
在用戶的使用習慣和認知中新頁面如果從右側(cè)進入就可以通過右滑返回,從底部彈出的話就可以下拉返回。因此,當用戶面對卡片放大進入新頁面這種全新交互時可能會疑惑如何返回,對此理解不同的用戶可能會嘗試右滑,也可能嘗試下拉。
APP Store 的設(shè)計在此就有很好的容錯性,用戶可以通過三種方式返回首頁,分別是、右滑返回、下拉返回和點擊叉號返回,這不但降低了用戶的記憶和學習成本,也便于不同習慣的用戶使用。
針對不同的場景,手勢的使用也會有不同。
一個很好的案例是知乎的評論:知乎的評論的關(guān)閉方式有三種,分別是下拉、右滑和點擊叉號。
用戶觀看評論的場景有兩種,第一種是只想看一下精選評論然后關(guān)閉,第二種是被評論吸引后一直往下看。當用戶單手操作不方便點擊叉號時,下拉對應(yīng)的是第一種用戶;右滑對應(yīng)的是第二種用戶,不管用戶看了多少屏的評論,隨時可以通過右滑關(guān)閉評論(因為用戶翻閱了很多屏評論后需要下拉到第一條評論時,下拉關(guān)閉評論手勢才會生效,所以第二種用戶一般不使用下拉去關(guān)閉評論)。
可能你會心生疑惑:“第一種用戶也可以使用右滑來關(guān)閉評論呀”,確實可以,但是對于人的操作習慣來說,上下滑動會比左右滑動更方便。
還值得討論的是蘋果自 iPhone 6s 開始加入的新交互方式 3D Touch,它允許用戶通過更大力度的重按呼出情景菜單快捷地使用高頻功能而不用先打開 APP,對于追求效率的用戶來說簡直不要更方便,但是對于不支持 3D Touch 的機型則無法使用情景菜單。
因此,在生活中我發(fā)現(xiàn)這樣的現(xiàn)象,很多使用慣了3D Touch 的用戶換到無 3D Touch 的蘋果機型后很不習慣,總是嘗試去重按但是是無效的。
其實在很多安卓手機上也有情景菜單這一功能,它巧妙地將卸載也加到了情景菜單中,因此用戶只需要通過長按就可以獲得所有需要的功能,而不是像蘋果那樣長按是卸載而重按是情景菜單。
我猜測蘋果為了適配所有機型,提高容錯性,從今年的發(fā)布會的 iPhone 11 和iPhone 11 pro 開始,取消了 3D Touch,轉(zhuǎn)而使用 Haptic Touch (有震動反饋的長按)代替。當你長按某個圖標時,感受到震動后松開,即可呼出二級菜單;如果震動后仍不松開,則進入到卸載 APP 時的抖動狀態(tài),使得之后的即使不支持 3D Touch的機型可以使用便捷的情景菜單了。
對于不支持 3D Touch 的老款機型會不會在 iOS 13 更新后也可以使用 Haptic Touch 呢?
如果一致統(tǒng)一的話,容錯性將大大提高,我們將拭目以待。
不僅僅是 iOS ,Android 的版本 Android 10經(jīng)歷了 6 個測試版迭代后正式發(fā)布,我們發(fā)現(xiàn)交互手勢是 Android 10 的一個巨大亮點。Android 10 在第三版內(nèi)測系統(tǒng)開始引入全局手勢操作,用戶啟用后,屏幕底部便不會再出現(xiàn)虛擬按鍵和導航欄,只會剩下一個指示條,上滑返回主屏、側(cè)滑返回上一層的操作邏輯也均和 iOS 保持一致。
這可能標志著安卓手機一直以來在國內(nèi)各家廠商的各種創(chuàng)新手勢的割裂生態(tài)中即將重歸統(tǒng)一,并和 iOS 保持一致。
這種妥協(xié)將大大提高在用戶使用一款新安卓手機時的容錯性,同時降低了今后用戶在兩大系統(tǒng)之間的遷移成本。
再談?wù)勥壿嬓?,在交互手勢的層面上,如果用戶能夠通過某個手勢進行某個操作后,按照邏輯,用戶也可以通過反向的手勢或?qū)?yīng)的手勢進行逆向操作。
比如,在微信首頁下拉調(diào)出小程序頁面,之后可以通過上拉返回首頁。點擊加號呼出更多操作,再次點擊加號收起更多操作。
如果違背了用戶的心理模型和邏輯性,用戶就會感覺到混亂和不適。
這里舉一個反例, Uki 的個人主頁可以通過點擊或下拉底部的固定底板收起更多信息,但是收起后只能通過點擊展開更多個人信息而不能上拉,不符合邏輯與用戶的心理模型。
如下圖所示,邏輯性對用戶的意義。
有的時候,我們會發(fā)現(xiàn)為了提高容錯性,我們會犧牲一部分邏輯性。
就像上文提到的知乎關(guān)閉評論彈出框,邏輯上它是從底部彈出的,但是不但能夠下拉關(guān)閉還可以右滑關(guān)閉。盡管右滑關(guān)閉有些違背用戶的心理模型,但是確實給用戶帶來了很多操作上的便捷。
我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。
1)考慮不同平臺的硬件系統(tǒng)和操作系統(tǒng)特性
由于硬件與操作系統(tǒng)差異,iOS 系統(tǒng)支持很多手勢,但是安卓系統(tǒng)在手勢支持方面就不如 iOS 豐富。
安卓硬件設(shè)備的差異比較大,不同安卓手機廠商會在安卓系統(tǒng)的基礎(chǔ)上自定義系統(tǒng)的手勢操作,因此對于手勢的支持也有較大的差異。對于這種情況我們需要熟悉相應(yīng)平臺的規(guī)范,做到心中有數(shù)。
2)考慮所選的手勢的學習成本和記憶成本,用戶是否已經(jīng)被教育
如下圖所示,盡管設(shè)備支持的手勢數(shù)量多不勝數(shù),但是日常使用 APP 時,大部分用戶習慣使用的手勢很少,比如單擊、雙擊、滑動、上拉、下拉、雙指擴張和收縮等。除此之外的手勢教育成本和學習成本很高。
一般比較通用的功能是沒有必要在此處創(chuàng)新的,但是如果一些特殊的操作確實需要加入時,我們就需要考慮下面的問題。
a. 如果沒有教育成熟,考慮加入教學或搭配簡易的操作方式
對于我們需要加入的手勢操作當前用戶并未被教育成熟時,我們需要考慮加入手勢教學,具體的手勢教學類型下一部分會詳細討論。
然而,大部分情況下用戶的記憶是短期的,教學內(nèi)容可能會被快速遺忘,下次用戶使用 APP 時仍然不會使用特殊手勢。此時我們應(yīng)該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。
比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設(shè)計,其考慮到了有些用戶在現(xiàn)實生活中并未見過擬物繩燈,并不知道是要進行下拉才能觸發(fā)操作。因此,QQ 閱讀貼心地搭配了一個簡單的點擊操作,用戶通過點擊繩燈也可以切換夜間模式,如下圖。
b. 考慮所選手勢是否可能導致沖突和誤操作,如果導致了,考慮如何避免和折中
最常見的手勢沖突情況就是 APP 的手勢與操作系統(tǒng)的全局手勢沖突。
解決方案有兩個,一是避免設(shè)計與全局手勢一致的手勢操作,例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應(yīng)用等全局手勢操作;二是仍然設(shè)計與全局手勢沖突的操作,但是將全局手勢部分禁用或以其他的方式區(qū)分開。
如下圖有書播放頁的案例,由于進度條滑動控件過于靠左,導致使用 iOS 全局右滑返回手勢時有時會產(chǎn)生誤操作,即本來想要右滑返回卻不小心滑動了進度條。
這種情況下我們可以標注一個右滑手勢禁用區(qū)域給開發(fā)工程師說明情況,將此情況避免掉即可。
誤操作指的是,我們設(shè)計的手勢操作與 APP 內(nèi)的其他操作或系統(tǒng)全局手勢操作接近導致用戶觸發(fā)了非預期的操作。比如 iOS 端的知乎被吐槽的一個右滑返回手勢操作,經(jīng)過研究發(fā)現(xiàn),由于 iOS 端的知乎在瀏覽回答的頁面設(shè)計的右滑返回的熱區(qū)過大,導致用戶上滑瀏覽的時候如果手指的滑動角度變化幅度過大一不小心就觸發(fā)了右滑返回,再次進入回答后又需要翻頁很久才能找到之前離開的地方,很影響體驗。
我覺得知乎可以減少熱區(qū),將熱區(qū)調(diào)整為 iOS 全局的右滑返回區(qū)域即可,如下圖所示。
當然,產(chǎn)品設(shè)計需要平衡與取舍,如果減少了熱區(qū)是否會影響其他用戶的體驗還需要考慮和調(diào)研,兩者并無絕對的對錯
當新手勢無法直接讓用戶感知時,我們需要加入一些手勢教學幫助用戶快速上手使用。
1)手勢教學方式
a. 浮層和動畫引導使用靜態(tài)或動態(tài)的手勢圖片或氣泡示例告訴用戶使用哪種手勢進行操作
相比于靜態(tài),動態(tài)比靜態(tài)更為直觀和易學。
b. 內(nèi)容隱喻通過微妙的視覺線索暗示用戶此處可以通過某種手勢進行操作
由于教學內(nèi)容難免具有干擾性,對于高級用戶來說是不必要的,但是對于初級用戶又是必要的,因此以這種內(nèi)容暗示的方式使教學極為輕量化,在低干擾的情況下使得用戶學習了手勢操作。
如下圖,嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架,暗示用戶可以通過左右滑動切換文章。
再比如陌陌在打開點點功能時,會在用戶進入頁面的時候播放一個動畫,暗示有很多卡片疊加在了一起,用戶可以通過滑動切換卡片。
2)教學的出現(xiàn)時機
a. 操作前當產(chǎn)品中設(shè)計了不容易感知的新手勢,在用戶操作前,通過教學讓用戶了解和學習新的手勢。
b. 錯誤操作后對于一些與用戶的心理模型和習慣不一致的手勢,提前預測用戶可能輸入的錯誤手勢,在用戶錯誤操作后進行提示,規(guī)范用戶的操作方式。
如下圖,由于知乎舊版本是通過左右滑動切換回答的,新版本調(diào)整為上下滑動后,需要糾正用戶使用習慣。因此,當用戶仍然使用左右滑動時,會出現(xiàn)浮層提示用戶正確的手勢進行教學。
以上是日常思考和總結(jié),有不恰當之處歡迎指出。希望本文在大家進行手勢設(shè)計的過程中能夠幫助做出合理的決策。
文章來源:人人都是產(chǎn)品經(jīng)理
本期嘉賓
(按發(fā)言順序)
商業(yè)行為的本質(zhì)就是榨取剩余價值。
文章來源:UI中國
寫在前面
過去幾年中,我們的積極反應(yīng)促使我們繼續(xù)探索和分析主要設(shè)計領(lǐng)域的新趨勢。盡管大多數(shù)趨勢都是去年發(fā)生的變化,但到2020年,我們?nèi)杂幸恍┬纶厔葜档米非蟆W钪匾内厔菔桥c技術(shù)有關(guān)的趨勢,以及它們的發(fā)展趨勢,以及它們?nèi)绾斡绊懺O(shè)計領(lǐng)域。
總體趨勢
2020年的主要趨勢動作設(shè)計與動畫, 對于2020年,我們認為運動設(shè)計是主要趨勢,因為我們在所有設(shè)計領(lǐng)域都遇到動畫,從小的交互到徽標和UI,一切都在變化。動畫內(nèi)容正在進入現(xiàn)代世界,在現(xiàn)代世界中,書面內(nèi)容沒有以前那么吸引人。 動作設(shè)計正確實施后,可使廣告系列的信息更快,更正確地傳達給受眾。
01. theQoos品牌插圖由 閔慶 02 軍團賽季 3由 尼克Scarcella 03. 溶劑-使大麻銀行公開賽由 BluBlu工作室 04 云服務(wù)(動畫圖標)由 亞歷山大Baleev 05. 病毒性肝炎由 昂布爾集體 , 蒂博ZELLER , 喬納森Plesel 06 。 UXC_Design2020_Project研究通過 Donerzozo
目錄
1. UI / UX
2.插圖
3.動態(tài)圖形
4.平面設(shè)計
5.基于技術(shù)的趨勢
6.包裝
7.版式
8.趨勢工具
1. UI / UX
1.1暗模式(Android Q和iOS 13)
暗模式是2020年的新趨勢,Android引入了兩種類型的暗模式,分別稱為“強制暗模式”和“系統(tǒng)暗模式”。微軟通過在其電子郵件應(yīng)用程序中展示其暗模式擊敗了谷歌,但谷歌迅速推出了自己的針對Android 10的Gmail應(yīng)用程序的暗版本模式。
有了介紹此更新的大公司,許多設(shè)計師將選擇在他們的應(yīng)用程序或站點中使用暗模式,因此希望在來年看到越來越多的暗模式。
1.2粗體顏色
在過去的兩年(到2020年)中,強烈的色彩已成為重要的趨勢。大膽的色彩豐富,明亮,甚至極富活力。它們可以是主要或次要顏色。
01. EMART UX / UI可再生的通過 加X, 李寶藍 , Sabum卞 , 熙榮, 尤金全度妍 , ? ? ?, Bongho彩 02 NSH通過 索菲婭費多托娃 03. 埃爾多拉多賭場-移動Web UI,應(yīng)用程序ü用 的Loredana PAPP-Dinea , Mihai Baldean , Milo主題 04. mmcité+網(wǎng)站由 工作室9 茲林,帕維爾Valek 05. 自動哈克系列#21-25由 安德烈福 06. Flipd應(yīng)用程序通過 ESTUDIO PUM
1.3 UI中的插圖
多年來,插圖一直是設(shè)計中最強勁的趨勢之一。插圖是對概念的直觀解釋,可以使用戶更好地理解產(chǎn)品背后的思想。除了一些精美的插圖使這一概念獨具匠心外,它們還可以更快地傳達信息。
01. 海妖重新設(shè)計,以 西爾Theyssens , 安東尼科拉德 02 浮雕-醫(yī)療項目由 馬丁Pankiewicz 葛爾若, 米沃什Po?arkowski 03. abuk:圖書封面設(shè)計有聲書商店到 謝爾蓋Valiukh, Tubik工作室 04.我llustration系統(tǒng)GOL到 ESTUDIO PUM 05 。 智能家居的應(yīng)用程序- IOS到 瑪麗亞Osadcha 06.斯基林貿(mào)易(skilling.com) - Loredana酒店P(guān)APP-Dinea , 米哈伊Baldean
1.4講故事
設(shè)計中的講故事是關(guān)于幫助用戶在平臺上的旅程,從而使他的體驗盡可能輕松和流暢(在UX設(shè)計中)。一個好的故事可以幫助用戶更輕松地了解產(chǎn)品。為了講述一個故事,我們可以使用一個特別創(chuàng)建的角色,將這個角色賦予他個性,我們創(chuàng)建一個故事和一個沖突,最終由我們的產(chǎn)品(UI設(shè)計)解決。這是產(chǎn)品設(shè)計中講故事的基礎(chǔ)。講故事在UI和UX中都使用,并且基于相同的原理,但實現(xiàn)方式有所不同。
01. 余吳-旅行計劃應(yīng)用由 朱莉張庭 02. UX / UI | 食品外賣應(yīng)用由 康斯坦丁Seredkin 03. COOC通過 cuneyt仙
1.5動畫圖形和微交互
正如我們所說,動態(tài)圖形是今年的趨勢,它在UI設(shè)計中也有很強的表現(xiàn),它為插圖增添了力量,使創(chuàng)意更易于吸收并保留在用戶的記憶中。
微交互在2018年成為第一流,但這一趨勢值得在2020年關(guān)注。它們是UI設(shè)計中極其重要的趨勢,這使基本應(yīng)用程序/網(wǎng)站與非凡的應(yīng)用程序/網(wǎng)站有所不同。微交互在使用戶了解系統(tǒng)的工作原理并引導其獲得更好的體驗方面起著至關(guān)重要的作用。
如果您是UI設(shè)計師,但尚未在工作中使用微交互,建議您這樣做,因為到2020年,沒有UI的任何UI設(shè)計都將是非?;镜摹?nbsp;
01. UI / UX | 智能藥房應(yīng)用的 阿納斯塔西婭中號, 謝爾蓋Nikonenko UX 02. 氣候與動物:滅絕危機網(wǎng)站UI / UX 由 丹尼爾·譚, 達芙妮龍 03 飛素食者由 帕特里夏賴納斯 04. UKRPOSHTA。烏克蘭國家郵政局的移動應(yīng)用程序,伊洛娜·金( Ilona Kim) 05 . Tagir Tikeev 的聾人報警應(yīng)用程序
1.6用戶界面中的視頻
到2020年,信息必須非??斓氐竭_用戶手中,最好通過視頻內(nèi)容來完成。您選擇通過動畫或經(jīng)典電影來解釋產(chǎn)品,視頻內(nèi)容對于任何網(wǎng)站或應(yīng)用程序都是必不可少的。
1.7功能
UI設(shè)計中的一個重要部分是功能,即,根據(jù)其目的和功能選擇每個元素。許多人認為您必須在設(shè)計和功能之間進行選擇,但是在新技術(shù)的幫助下,這兩種技術(shù)可以很好地融合在一起并相互補充。設(shè)計負責引起對站點或應(yīng)用程序的注意,其功能使體驗變得更輕松。它使用戶可以更快地找到信息。
01.斯基林貿(mào)易(skilling.com) - Loredana酒店帕普用餐 , 邁克爾Baldean
1.8注意細節(jié)
在UI設(shè)計中,對細節(jié)的更多關(guān)注非常重要。從按鈕,圖標,加載到導航到細微的細節(jié),都可以打造出非凡的設(shè)計。隨著新技術(shù)的出現(xiàn),我們在UI中必須注意的細節(jié)始終在變化。
在明年,我們將看到越來越少的按鈕,以及更多基于手勢的導航。例如,后退按鈕(Android的導航常用)在Android 10中正式消失。
01. FLYR的視覺形象和營銷網(wǎng)站的 Ramotion
02. 鬧鐘應(yīng)用聾人通過 Tagir Tikeev
1.8漸變
幾年來,我們一直在談?wù)撛O(shè)計中的漸變,這種趨勢在2020年將繼續(xù)保持強勁,因此值得一提。新鮮的色彩是成功漸變的完美選擇。它們可以用于按鈕,圖標,插圖,甚至用于排版。
01. Wavecut - IOS應(yīng)用程序通過 Eleken局 02. 抗憂郁癥的應(yīng)用程序-產(chǎn)品設(shè)計(UX / UI)由 安娜Arutiunian
03. 保羅回腸-電影音樂作曲家,制作人,DJ,Perfomer 通過 的Loredana PAPP-Dinea , 米哈伊Baldean , 米洛主題 04. ITEXIA通過 下一頁局 , 亞歷克斯海鷗 , Jegor Walowski
2.插圖
2.1角色設(shè)計
角色設(shè)計包括定義一個支持整個概念的角色。最重要的是,通過繪圖,設(shè)計師向角色灌輸了強烈的個性。您在應(yīng)用程序或網(wǎng)站中遇到的虛擬助手是角色設(shè)計的一個很好的例子。
01. 新微小的事情?兒童圖畫書由 Vuon插圖 , 榮阮 , 榮范 02 的Adobe X Createfulness由 邁特弗蘭基, 馬蒂厄Tarwane 03。 3D人物V2由 安東尼奧·佩蒂特Cwirko 04. Malayali由 丹尼·何塞
2.2紋理
插圖和紋理很好地結(jié)合在一起,可以創(chuàng)造出令人難忘的構(gòu)圖。從粒狀紋理到預制的筆觸,您可以找到許多想法來為插圖添加紋理,也可以手動創(chuàng)建它們。瀏覽網(wǎng)絡(luò)時,您可以找到許多可以在插圖中使用的紋理,預制筆刷和工具。
01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 飯 太稀
2.3平面插圖
在過去的幾年中,我們到處都可以看到平面插圖。它們?nèi)匀惶幱谮厔葜?,但現(xiàn)在有了一個新的組成部分:對每個元素應(yīng)用細線。大多數(shù)藝術(shù)家都選擇使用細的黑色筆觸,但也可以將其上色,使其陰影比所涉及的對象暗。
01. BILLY KENNY -剛剛為音樂通過 桑戈BANG 02 Babelia - Lecturas對維拉諾由 米格爾·安赫爾Camprubí 03. 拳擊貓-第一滴血由 Felms 04. COUSCOUS STUDIO | 解釋器VIDEO 由 哈立德abdelazi ?
2.4等軸測圖
是的,等軸測圖仍然在這里。它們主要可以在UI設(shè)計中找到。隨著人們對加密貨幣的興趣不斷增加,這種趨勢似乎已經(jīng)生效,但是在2019年它已經(jīng)發(fā)展了,現(xiàn)在我們在其他業(yè)務(wù)領(lǐng)域中發(fā)現(xiàn)了這一趨勢。
01. 龐克市由 溫祚_ 02 FastCompany -等距號由 阿圖爾Tenczynski 03和05. 抗體亞型由 馬里奧·德?梅耶爾 04. 松弛插圖由 京張
2.5 3D
隨著效率越來越高的軟件和工具的出現(xiàn),3d渲染已逐漸發(fā)生變化。3D插圖非常受歡迎,因為與2D插圖不同,它提供了更逼真的圖像。
01. 游戲巴伊亞之家由 Miagui 02 天平 由 卡韋薩Patata工作室 03. 城堡毀滅者由 穆罕默德Chahin 04. Eyoo家庭3D插圖由 Baianat 05. 個人插圖第1卷由 巴勃羅·馬林 06. 一個人旅行通過 亂伊萊恩
2.6超大膽的色彩
大膽的顏色非常適合插圖。它們營造出歡樂的氛圍,使角色脫穎而出,并在圖像背后展現(xiàn)故事。
01. 瑪莎·希肖娃(Masha Shishova)攝于莫斯科的 STRTFD咖啡壁畫 02. 作家- 利奧·夏目( Leo Natsume)的移動互聯(lián)網(wǎng)思想 03. 可口可樂圓罐插圖由塔尼亞·雅庫諾娃( Tania Yakunova)
3.動態(tài)圖形
3.1 3D視頻
在2020年,無法想象沒有3D設(shè)計的運動。設(shè)計的這個分支打開了一個世界的大門,在這個世界中,只有想象力是極限。我們可以在廣告,電影,游戲,廣告活動等中找到3d。
01. 龐克市由 溫祚_ , 視覺設(shè)計藝術(shù)的影響
3.2視頻+動畫插圖(混合媒體)
拍攝的視頻,動畫插圖以及有時是靜止的照片的結(jié)合可以產(chǎn)生非凡的效果。2d或3d插圖可創(chuàng)建令人難忘的視頻,從幾行運動到3D真實人物甚至是現(xiàn)實生活中不存在的復雜視覺效果。
01. Coppel /回到學校通過 大量工作室 02 PWR 由安娜·霍查, Edvina元
3.3 2D動畫-說明性視頻
2D動畫專注于創(chuàng)建故事和角色,并在創(chuàng)作過程中使用矢量。當您想要廣告系列或產(chǎn)品的說明性視頻時,2D可能是理想的選擇。在一個總是忙碌而又沒有時間閱讀的世界中,說明性視頻對于任何網(wǎng)站都是必不可少的。
01. Freelive 由 工作室Infografika , 謝爾蓋·薩多斯基 , 阿納斯塔西婭Alterka , Arsentiy Lesnik賓館 , 尤里·阿姆斯特朗 , 阿林好, 喬治VALD ,馬克西姆Tleubaev
3.4動畫徽標
您已經(jīng)了解到動畫是2020年的“必備”,為了保持競爭力,我們還必須將它們集成到徽標設(shè)計中。許多公司已開始對其徽標進行動畫處理,以引起人們的注意。這也是徽標設(shè)計的主要趨勢。
01. 杯茶由 維多利亞伍 02 - 07. 運動野獸?Logomachine。動畫標志的 運動設(shè)計學院, 維克托Villamarin的, 波格丹·杜米特留, Logomachine .NET , 亞歷山大·庫茲涅佐夫, 扎克李, 丹尼斯Siurin , 斯坦尼斯拉夫·馬爾琴科, 莉扎薇塔Tsareva , Supremus Levenus , 安東·福明, 埃米爾Khafizov , 膽堿哈達
3.5混合動畫2D和3D集成
這一趨勢不是一個新趨勢,但絕對值得一提。混合動畫就是使用為此創(chuàng)建的特定軟件將2D與3D結(jié)合在一起。
4.平面設(shè)計
4.1平面設(shè)計中的3D
盡管2d壟斷了設(shè)計的這一分支,但3d可以為最終概念添加額外的內(nèi)容。3d渲染可以采用插圖,動畫或字體的形式。
01. 畫像由 費爾南多·多明格斯Cózar 02. NASA | 太空時代的 工作室-JQΔ 03. 美國宇航局X BBC | 不自然世界的 工作室,JQΔ
4.2雙色
精益求精的概念可以完美描述這一趨勢,設(shè)計師在其中創(chuàng)造出大膽的元素,并帶有優(yōu)雅的手感和強烈的對比。這種趨勢是創(chuàng)建更易于訪問的打印的理想選擇,因為某些打印技術(shù)如果顏色更多,則價格會更高。
01. 冬季公開賽'18由 Kinoto Studio, Romina Rios, Luc Geoffroy 02 Synticate©由 斯捷潘索洛德科夫 03. TIGER在博物館由 de_form工作室, 諾拉demeczky , 的Eniko DERI 04. 刻字系列IX由 拉斐爾·塞拉
4.3光學感知藝術(shù)
歐普藝術(shù)作品是抽象的,有許多知名的黑白作品。通常,它們給觀看者留下動感,隱藏的圖像,閃爍和振動的圖案或腫脹或翹曲的印象。(來源:wikipedia.org)。
這種趨勢給人以動靜的印象,但是以一種靜態(tài)的方式。如果要實現(xiàn)在印刷海報中移動圖形的想法,這是最合適的方法。
01 02 東京電影節(jié)共混物由 梅賽德斯巴桑 , 的Adobe住 03. 海報-第一卷由 Xtian米勒
4.4平面設(shè)計中的插圖
插圖在設(shè)計的所有領(lǐng)域都非常重要,因此我們在圖形設(shè)計中也可以找到它們。2D插圖在現(xiàn)在已經(jīng)非常流行了幾年,并且即使在2020年,也將繼續(xù)成為設(shè)計師的最愛。
01. GOOSE赫爾-海報由 Ewelina鵝 02 CAT酒吧和舞廳/ 2019至 kissmiklos, Eszter薩拉
4.5動畫海報
動畫無處不在,我們在設(shè)計的各個領(lǐng)域都可以找到它們,當然它們也存在于數(shù)字海報中。動畫可以將2D與3D混合在一起,效果令人著迷。
01 節(jié)地鐵地鐵由 Bzoing, 維吉尼貝達德 02. 失敗的Windows由 皮埃爾Kleinhouse, 轄Zivony
4.6復古合成波
復古合成波是一種在80年代出現(xiàn)的趨勢,但一旦好萊塢開始發(fā)行該十年的電影后便開始重新出現(xiàn)。隨著《陌生人事物》系列的成功,這一潮流再次開始流行。
01. 雞尾酒和夢想通過 Gjorgji Despodov 02. CINEMAX由 杰森巴爾巴 03.奇怪的事情(Netflix.com)
4.7瑞士設(shè)計,達達主義,包豪斯
20世紀最重要的圖形設(shè)計運動始終是最好的設(shè)計師的靈感來源。這些樣式值得一提,因為它們始終是的,遵循它們所施加的規(guī)則幾乎不可能在設(shè)計中犯錯誤。總的來說,這些運動強調(diào)版式,無襯線字體(Helvetica于1957年在包豪斯舞臺上創(chuàng)建),幾何形狀,簡單的線條,體積和顏色。
01. 瑞士海報01(版式方面)由 Mehman Mammedov 02. 黃視VOL.3通過 維奧萊納齊名
4.8大的不間斷彩色空間
大型,不間斷的色彩空間將在明年成為非常流行的趨勢。它們與大膽的字體搭配使用,可以在圖形設(shè)計,產(chǎn)品設(shè)計以及ui中找到。
01. Synticate©由 斯捷潘索洛德科夫 02 Havaianas人字品牌內(nèi)容由 約翰Vernizzi 03. Kekkil?-BVB的 Kurppa Hosk
4.9超極簡主義
極簡主義的設(shè)計僅使用必需品,非常有限的調(diào)色板和簡單的形狀來打造令人難忘的身份。放棄多余的元素,使所有設(shè)計項目都有目的。要創(chuàng)建超極簡主義的設(shè)計,您需要使用盡可能多的白色/負空間,簡單的配色方案和一些基本的幾何形狀。
01. Heim雜志,第3頁, Sasha Yaguza撰寫 02. Andrei Gheorghe- DADA-通過 moodley品牌標識發(fā)布
5.基于技術(shù)的趨勢
技術(shù)通過智能設(shè)備和嶄新的理念正在徹底改變我們的生活。這些新技術(shù)使設(shè)計師已經(jīng)開發(fā)出進入當前趨勢的新功能。人工智能,機器學習,虛擬現(xiàn)實和增強現(xiàn)實正在影響設(shè)計師的思維方式和創(chuàng)作方式。
5.1增強現(xiàn)實的移動應(yīng)用
隨著蘋果和谷歌推出自己的AR開發(fā)平臺ARKit和ARCore,很明顯,整個世界將面向增強現(xiàn)實技術(shù)。
許多大品牌已經(jīng)在其應(yīng)用程序中采用了這項技術(shù),而那些尚未采用這種技術(shù)的公司必須認真考慮如何使用戶在這種新現(xiàn)實中與之交互。
有一些AR交互可用于創(chuàng)建直觀的應(yīng)用程序。第一個是將應(yīng)用程序固定在手機屏幕上時。另一個是AR UI與用戶周圍的環(huán)境相關(guān)聯(lián)時。最常用的互動方式之一
是當UI與對象相關(guān)并通過掃描特定項目觸發(fā)時。該動作將數(shù)字動畫連接到特殊的“標記”。
有關(guān)更具體的AI規(guī)則,請閱讀Apple指南,以提供“將真實的虛擬對象與現(xiàn)實世界無縫融合的沉浸式,引人入勝的體驗”。
5.2 AI,ML,聊天機器人和虛擬助手
聊天機器人是一種 通過聽覺或文本方法 進行 對話的 軟件。[1] 此類程序通常旨在令人信服地模擬人類作為對話伴侶的行為,盡管截至2019年,它們?nèi)赃h遠不能通過 圖靈測試。[2] 資料來源:維基百科
人們還不習慣與AI對話,因此設(shè)計師(和開發(fā)人員)的工作很大一部分是使流程簡單并建立信任。他們需要幫助人們了解系統(tǒng)可以做什么以及如何使用它。
使用AIML(人工智能標記語言)設(shè)計和編寫腳本聊天機器人,是出色的UX設(shè)計人員的魔力可以發(fā)揮作用的地方。
大多數(shù)使用聊天機器人的公司都選擇說明助手來為AI做鬼臉。以下是一些在其UI設(shè)計中使用聊天機器人的品牌:Spotify,星巴克,萬事達卡,絲芙蘭,Lyft,必勝客。
5.3 VR
大多數(shù)人將VR與游戲行業(yè)聯(lián)系在一起是有充分理由的,但是隨著所有大型科技公司開發(fā)VR套件和應(yīng)用程序,我們可以肯定地說,我們將發(fā)現(xiàn)使用和享受這項技術(shù)的新方法。VR已經(jīng)用于教育,醫(yī)療保健,旅游,房地產(chǎn)或建筑。
5.4語音用戶界面(VUI)
語音用戶界面(VUI)使用語音識別 來理解語音命令和問題,通常是文本到語音以播放答復,從而 使語音與計算機的人機交互成為可能 。語音命令設(shè)備(VCD)是受語音用戶界面控制的設(shè)備。資料來源:維基百科
去年,使用互聯(lián)網(wǎng)連接的設(shè)備的人中有40%每月至少使用一次語音助手,與去年相比,這一數(shù)字增加了10%。
6.產(chǎn)品設(shè)計
6.1包裝中的圖案
在過飽和的包裝市場中,很難創(chuàng)造出可以脫穎而出的新產(chǎn)品,因此設(shè)計師要回到根源并創(chuàng)造出使產(chǎn)品在擁擠的零售貨架上脫穎而出的樣式。幾何,花卉,浪漫或單色圖案是任何產(chǎn)品包裝的大膽選擇。
01. 飛行山羊咖啡由 妮可LaFave 02. VITA SPA皮膚 由 DWYW 03. 巧克力包裝設(shè)計由 算術(shù) 04. 100手繪無縫的圖案和形狀 的 Arseny Samolevsky
6.2包裝插圖
插圖一直是包裝設(shè)計中的重要元素。通過他們,我們可以講述一個故事,使目標受眾可以更好地理解該概念背后的歷史。平面插圖已經(jīng)存在了數(shù)十年,并且很可能會一直處于流行趨勢。
01. 布里格斯原件由 熙宰金 02 天鵝絨咖啡杯 由 安東Malishev, 呵呵卡羅拉 03. 廢物不包括廚房-品牌打造的 嘗試和真正的DESIG ň04 家,甜蜜的壽司兒童 通過 精明的機構(gòu), 馬里亞納星火 05. Cerveza塔Maleante通過 Antonay
6.3留白
極簡主義是設(shè)計的基本原則,而今天它又是新事物。它放棄了設(shè)計中不需要的所有內(nèi)容,并用負空間代替了它。這種趨勢將功能帶到了最前沿,并專注于簡潔的設(shè)計,使版式脫穎而出。
01. 香味精油 由Y u型簡林, 黃惡嗯-祥 , 智泰蓮 02. 重塑品牌理念,為BodriPincészet由 克里斯托夫Gáthi
6.4單色和兩種顏色
首先,在調(diào)色板中僅使用1或2個色調(diào)似乎有些限制,但它們可以創(chuàng)建非常強烈的視覺識別感。僅使用一種或兩種顏色,就可以保持簡約的外觀,放棄所有多余的東西。結(jié)果是精美,高雅的產(chǎn)品令人賞心悅目。
01. Zerbet冰糕由 才林賈爾斯 02. 貝利啤酒 由 埃德大廳 悉尼, 葉卡捷琳娜Leontyeva , 波阿斯孫
6.5大膽的顏色
大膽的顏色和漸變?nèi)匀皇欠浅娏业内厔?,這種趨勢將在2020年持續(xù)。使用這些顏色,您可以創(chuàng)建令人難忘的產(chǎn)品。
01. 極簡主義和享樂主義:Fabula Branding 重新設(shè)計了 千年品牌
02 紋身商城 通過 Openmint工作室, 葉卡捷琳娜Teterkino , 煙, 葉戈爾Kumachov
03. Organic by Larissa Kendrik 和 加布里埃爾· 沙茨曼
04. VIZOU -老花眼鏡 的 工作室開頭語, 阿克塞爾杜馬克
05. 包裝的調(diào)味開心果由 米拉Katagarova
6.6注意細節(jié)(受新藝術(shù)風格啟發(fā))
注重細節(jié)的包裝比以往任何時候都更受歡迎。設(shè)計師選擇這種趨勢是因為它賦予了產(chǎn)品真實性。這種趨勢使我們以現(xiàn)代方式思考經(jīng)典。
01. HYWILDE由 查德·邁克爾·工作室 02 AMSTEL KARGO IPA通過 卡帕羅設(shè)計船員
03. 大島咖啡烘焙-咖啡咬傷的 農(nóng)場設(shè)計
6.7包裝中的講故事
到2020年,品牌將不得不重新考慮其產(chǎn)品和包裝。品牌必須講述一個故事,以幫助客戶體驗產(chǎn)品的本質(zhì)。這可以通過為包裝創(chuàng)建視覺和敘述身份來實現(xiàn)。
01. 喙接通過 骨干品牌推廣 02. Colorea用t 骨干品牌
7.版式
7.1粗體印刷
粗體印刷術(shù)是設(shè)計中的重要趨勢,它取代了圖像作為主要元素。勇敢的排版可以在網(wǎng)頁設(shè)計和圖形設(shè)計中發(fā)揮作用。
01. 埃里克·林格(Eirik Lyng),作者: 埃里克· 赫斯特雷(ErikHerrstr?m); 02. 包豪斯(Bauhaus_100)(x3),作者: BunkerType(JesúsMorentin)
03. UCCA當代藝術(shù)中心北京由 布魯斯·莫設(shè)計(BMD) ,耶勒馬雷夏爾
7.2小寫
越來越多的應(yīng)用程序使用完全小寫的文本,非常易于閱讀,并且完美地融入了簡約和現(xiàn)代的設(shè)計中。在明年,我們絕對必須關(guān)注這一趨勢。
01. Autea品牌和網(wǎng)頁設(shè)計由 米哈爾Markiewicz 02 山大食品公司 CI由 臣藤田/ tegusu公司 03. Aquality品牌的 哈坎Fidan的
7.3自定義字體
盡管自定義字體沒有什么新意,但我們將看到這種趨勢越來越多地出現(xiàn)在設(shè)計中,尤其是在徽標和海報中。這種做法在大品牌中更常見,因為生產(chǎn)專用字體可能會非常昂貴,但是設(shè)計人員可以對現(xiàn)有字體進行少量調(diào)整,結(jié)果可能會非常獨特。
01. Think8全球研究院通過 勃洛克設(shè)計 02 ZINEZ?//設(shè)計周期由 芭芭拉·卡托納 , 媒體與設(shè)計系埃格爾 03. 式設(shè)計'19通過 TRüF創(chuàng)意 04. Cako字體由 維奧萊納齊名
7.4動力學排版
就像我們說的那樣,動畫在設(shè)計中無處不在,因此在排版中也很常見。動態(tài)字體使用小的和簡單的交互作用來移動和移動屏幕上的字體。這種簡單的技術(shù)可以處理文本并創(chuàng)建最終產(chǎn)品,該產(chǎn)品保留在查看器的內(nèi)存中。
01和02. Grafika , Gimmick Studio設(shè)計 。03&04. 增強現(xiàn)實與動作排版,作者: Alex Slobzheninov
7.5堆疊字體
堆疊文本可能是一種現(xiàn)代化的解決方案,可以吸引您注意基本信息。我們可以在網(wǎng)頁設(shè)計,應(yīng)用程序設(shè)計和圖形設(shè)計中看到這種趨勢。
01. L'嗡通過 Atipus巴塞羅那 02 期刊由 杰瑪馬奧尼 03. 海報收藏| VOL.8由 羅馬發(fā)表 04. SMLXL由 梅麗莎Baillache, 墊新郎, 杰森·利特爾
8.趨勢工具
8.1 Adobe Spark
Adobe Spark是Adobe Systems 開發(fā)的 用于移動和Web的媒體創(chuàng)建應(yīng)用程序的集成套件 。[1] 它包含三個獨立的設(shè)計應(yīng)用程序: Spark Page, Spark Post和 Spark Video。(來源:WIkipedia)
他的免費Adobe Spark Web應(yīng)用程序可與Spark Page,Spark Post和Spark Video iOS移動應(yīng)用程序同步 ,從而使用戶可以從任何設(shè)備創(chuàng)建,編輯和共享其視覺故事。
[3] 這三個設(shè)計應(yīng)用程序允許用戶創(chuàng)建和設(shè)計可用于企業(yè),教育,社交媒體營銷人員等的視覺內(nèi)容。[4] Spark Gallery突出顯示了使用該應(yīng)用程序的人們所做的不同項目。使用這三個應(yīng)用程序時,用戶可以導入圖片或搜索圖片。
8.2繁殖
Procreate是 由Savage Interactive針對iOS開發(fā)和發(fā)布的 用于 數(shù)字繪畫的 光柵圖形編輯器 應(yīng)用程序。針對iPad的藝術(shù)可能性而設(shè)計 ,并且適合從初學者到專業(yè)人士的藝術(shù)家。
它提供130多種逼真的畫筆,多層, 混合模式, 蒙版, 過程視頻的4K分辨率導出 , 自動保存以及許多其他經(jīng)典和原始的 數(shù)字藝術(shù) 工具。除光柵圖形外,該軟件的編輯和渲染文本和矢量圖形能力有限 。(來源:Wikipedia)Procreate是2018年App Store上最暢銷的應(yīng)用程序。
8.3 Adobe XD
Adobe XD是 由Adobe Inc開發(fā)和發(fā)布的 用于 Web應(yīng)用程序 和 移動應(yīng)用程序的基于矢量的 用戶體驗設(shè)計工具。它適用于 macOS 和 Windows,盡管有適用于iOS 和 Android的版本 可幫助直接在移動設(shè)備上預覽工作結(jié)果。XD支持 網(wǎng)站線框圖,并創(chuàng)建簡單的交互式點擊型原型。(來源:維基百科)
作者授權(quán)
總結(jié)
每一年每一個時間段都會有新的趨勢,學會的辯證的眼光去看待便是最大的智慧。世界一直都在變,趨勢也是。保持學習和探索的心不變就是對自己熱愛的事情最好的回應(yīng),念念不忘,必有回響。共勉!
文章來源:站酷-木七翻譯整理
作為交互設(shè)計師,你一定經(jīng)??鄲滥愕慕缑嬖撛趺催_到「簡約而不簡單」,該通過什么樣的形式、功能、才能讓用戶獲取「更好的體驗」。
真正的簡單并不意味著最少化,樸素的設(shè)計仍然具有自身的特征和個性。簡單的特征和個性應(yīng)該是源自你使用的方式,所要表現(xiàn)的產(chǎn)品,以及用戶執(zhí)行的任務(wù)。交互式設(shè)計 4 策略告訴你如何通過簡化設(shè)計獲得更好的用戶體驗。
交互式設(shè)計的簡約 4 策略:刪除、組織、隱藏、轉(zhuǎn)移。
上述4策略既適用于簡化功能,也適用于簡化內(nèi)容。而且無論項目大小,是整個網(wǎng)站還是一個頁面,這4個策略都同樣適用。你可以根據(jù)要解決的問題從中選擇正確的策略。
刪除雜亂的特性可以讓設(shè)計師專注于把有限的重要問題解決好,而且也有助于用戶心無旁騖的完成自己的目標。
組織往往是簡化設(shè)計最快捷的方式。
隱藏部分功能是一種低成本的簡約方案,但是,哪些功能該隱藏呢?
把合適的功能轉(zhuǎn)移到合適的設(shè)備上。
用一句話來總結(jié)交互式 4 策略:
刪除不必要的,組織要提供的,隱藏非核心的,轉(zhuǎn)移可轉(zhuǎn)移的。
運用恰當了一定可以使你的設(shè)計更出彩。
對于以上內(nèi)容想了解更詳細的讀者可以閱讀
在手機app應(yīng)用中各種格式的彈窗效果相信大家都看過,也可能反感過某些彈窗,本文就來談?wù)勱P(guān)于app彈窗設(shè)計以及彈窗的適用情景。
1. 彈窗作用
彈窗是為了讓用戶回應(yīng),需要用戶與之交互的窗口。
非模態(tài)彈窗一般被設(shè)計成用來告訴用戶信息內(nèi)容,而模態(tài)彈窗除了告訴用戶信息內(nèi)容外還需要用戶進行功能操作。
2. 模態(tài)彈窗
會打斷用戶的操作行為,強制用戶必須進行操作,否則不可以進行其他操作。
(Alerts/dialog,Actionbar,Popover)
3. 非模態(tài)彈窗
不會影響用戶操作,用戶可以不與回應(yīng),通常有時間限制,出現(xiàn)一段時間就會自動消失。
(Toast/HUD,Snackbar)
以下將以各類彈窗的含義、作用、適用來進行淺析。
1. Alerts/Dialog:警告框與對話框
含義:英文意為警告、對話,跟彈窗屬性非常吻合,就是緊急狀況,打擾用戶的行為。
剖析:iOS中警告框稱之為Alerts,作用是用來傳達重要信息,并伴隨著需要用戶進行操作。
iOS規(guī)范中,警告框包含的元素如下:標題(必選)、描述信息(可選)、輸入框(可選)、按鈕(必選)。
必須包含標題、包含一個或多個按鈕。
Android規(guī)范中,彈窗交互按鈕需結(jié)合實際情況,不用「是/否」原則進行設(shè)計。
作用:告知用戶當前發(fā)生的狀況,讓用戶主動選擇回應(yīng)。
適用:重要性較高的操作時,如退出、刪除、清空等。
2. Actionbar(Sheets、Acitivity View):操作欄、操作列表、活動視圖
含義:英譯為工具欄、操作欄。
剖析:當用戶激發(fā)一個操作的時候,出現(xiàn)此窗口。
一般會給用戶提供更多的功能選擇,一般可采用官方控件。
一般都設(shè)計有一個默認的「取消」按鈕,點擊取消可以關(guān)閉彈窗。
Aciton Sheets和Activity Views是iOS上特有的交互形式。
特性是用戶觸發(fā)、包含兩個或以上的按鈕。
△ 以上為今日頭條、iOS系統(tǒng)相冊
作用:操作列表提供一系列在當前情景下可以完成當前任務(wù)的操作,而這樣的形式不會永久占用頁面UI的空間。
適用:如分享功能。
3. Popover/Popup:浮出框/浮層彈窗
含義:英意為彈出窗口,浮動于頂層窗口,氣泡。
△ 以上為微博、qq、微信
剖析:當用戶點擊某個控件或者某個區(qū)域時浮出的半透明或者不透明的彈窗窗口。
不會對用戶所在位置進行跳轉(zhuǎn)。
作用:可以在當前頁面進行更多的操作行為,顯示/隱藏頁面中的折疊信息。
適用:首頁位置呈現(xiàn)一些常用操作的快捷入口。
4. Toast/HUD:提示框(iOS沒有Toast,只有HUD)
含義:Toast也被稱為吐司提示,Toast是安卓系統(tǒng)的一個控件名詞,現(xiàn)也應(yīng)用于iOS系統(tǒng)中。
剖析:提示框?qū)儆谝环N輕量級的彈窗反饋形式,常以小彈框的形式出現(xiàn),持續(xù)1-2秒自動消失,可以出現(xiàn)在屏幕任意位置,但是建議同一款產(chǎn)品盡量使用相同位置,讓用戶產(chǎn)生統(tǒng)一認知,成為習慣。
提示信息能給予用戶及時反饋,確保用戶知曉自己所處的狀態(tài),并可以做出相應(yīng)的措施。
iOS用戶更習慣于在頂部感知反饋信息,不干擾用戶瀏覽主體內(nèi)容。Toast出現(xiàn)在屏幕頂部不會遮擋主體內(nèi)容。(如花瓣、有道云筆記)
Android正統(tǒng)的規(guī)范中Toast:
△ 以上為今日頭條、微博、即刻
HUD與Toast的區(qū)別:
△ iOS音量調(diào)節(jié)
優(yōu)點:
缺點:
適用:提示不需要的反饋信息,如刷新后的成功狀態(tài)。
5. Snackbar:底部彈窗
Android特有的交互形式,在Google的MD規(guī)范中,將Toast和Snackbars歸為一類。有些時候也有應(yīng)用在iOS系統(tǒng)中,也可以理解為加強版的Toast。
含義:英譯為快餐、小吃。
剖析:Snackbars與toast一樣是從屏幕底部向上出現(xiàn),但是Snackbar不同的是可以經(jīng)過用戶進行其他操作而消失。
適用:較多適用于撤銷操作。
通過分析和了解彈窗的類別、適用范圍,才能更好的在設(shè)計中進行優(yōu)化與改變。用戶體驗設(shè)計的重點,是一步步了解用戶,然后設(shè)計出適合用戶體驗,滿足用戶心理需求的產(chǎn)品。把握好彈框設(shè)計規(guī)范,避免彈框設(shè)計的誤區(qū),能更好的幫助你完善產(chǎn)品。
但是,沒有十全十美的產(chǎn)品,所以要根據(jù)設(shè)計趨勢與用戶需求不斷地進行更新迭代,通過用戶反饋,不斷地改良產(chǎn)品體驗,才是做出優(yōu)秀產(chǎn)品的前提。
Sandy現(xiàn)任阿里影業(yè)—淘票票體驗設(shè)計專家,2015年加入阿里巴巴,深耕B端行業(yè)產(chǎn)品,服務(wù)于電影產(chǎn)業(yè)鏈中的投資、宣發(fā)等角色。2017年起接觸C端用戶產(chǎn)品,推行價值導向和問題導向。2019年開始實踐線上線下全鏈路設(shè)計。
阿里影業(yè)的服務(wù)涉及的面很廣,涉及到b端與c端全流程的體驗服務(wù),包括面對片方的制作和宣發(fā)、發(fā)行、乃至面向用戶的售賣與放映,在每個節(jié)點都有涉及。而淘票票,經(jīng)歷了四年的產(chǎn)品迭代,以一年一個版本的速度的進行優(yōu)化。15年的理念是做一個好用的購票工具,16年新增了營銷,17年加強營銷,18年新賽道探索。到了2019年,改版應(yīng)該進行新的思考:怎樣做?做什么?怎么做?做對了嗎?
此次淘票票9.0版本是根據(jù)用戶現(xiàn)有的習慣與市場的變化,由設(shè)計師發(fā)起的一次自下而上推進的改版。以下是淘票票9.0的設(shè)計策略與設(shè)計目標:
接下來將對三點設(shè)計策略進行逐一的講解。
根據(jù)內(nèi)容類型和場景進行劃分,結(jié)合內(nèi)容特點和用戶喜好,打造全場景運營,例如提供影訊、通稿、片單、榜單、熱點、解讀、文章和活動等等多元化內(nèi)容。通過提供不同的內(nèi)容展現(xiàn)給用戶,將內(nèi)容進行解構(gòu)、把觸達的場景進行細化、優(yōu)化設(shè)計的表達,從而達到幫助用戶可以更好的理解電影的目的。
設(shè)計前,首先應(yīng)當熟知兩種設(shè)計思維導向:
而這次9.0淘票票改版采用的是以問題為導向,期間經(jīng)歷了五個流程:
2.1 找問題
首先出去找問題,找問題的方法有很多,如:用戶研究、定性、定量、業(yè)務(wù)數(shù)據(jù)和體驗走查,收集業(yè)務(wù)、用戶、客滿不同視角的疑似問題。
2.2 看現(xiàn)象
找完問題之后,基于數(shù)據(jù)的支撐,去看用戶有哪些習慣的變化,看到目前的現(xiàn)象后再進行數(shù)據(jù)解讀。
2.3 定位問題
基于使用場景和使用效率,進一步定位問題所在。
2.4 分析原因
分析出癥結(jié),以便推進最終的解題環(huán)節(jié)。
2.5 解題
解題1:場景化探索。
以解決問題為目標,達到優(yōu)化用戶體驗的目的,對場景進行預判、探索,把場景分為三個典型的場景:
解決:針對第一種場景,選坐頁可以快速找到選場次的功能,淘票票提供常去影院、附近影院的選擇,減少用戶決策時間。針對第二種場景,部分觀影者不知道價格更高的IMAX廳、杜比廳的觀影效果,價格比普通廳貴了50塊錢,那么這個錢值在哪?淘票票使用視覺映射和科普的手段,例如當點擊進入杜比廳后,下拉可以呼出信息,了解相關(guān)的影廳,給予科普;而且界面設(shè)計不同,更貴的影廳視覺效果好,界面上也提供用戶更強的視覺沖擊。
解題2:用戶視角信息重構(gòu),進行信息降噪,減少認知負擔
認知負擔=信息呈現(xiàn)類型x信息量
以上公式可以看出,假設(shè)設(shè)認知負擔為定值,當信息量增多的時候,需要減少信息呈現(xiàn)類型,適當進行信息降噪與信息結(jié)構(gòu)化。降噪是把想要突出的信息更加突出;信息結(jié)構(gòu)化是把同類型的信息以結(jié)構(gòu)化的呈現(xiàn)出來,讓用戶自然對信息產(chǎn)生親密性。
對于信息傳達,改變之前比較打擾的提示彈窗,現(xiàn)在淘票票會把所有信息都放在頁面中,用一種更輕量的方式提示用戶,不再打擾用戶。信息重構(gòu)則是把需要用戶確認的信息放在最頭部,例如退票、改票,其次界面羅列的是優(yōu)惠信息,最后才是影城卡營銷和賣小食的信息區(qū)域。新舊改版對比圖很好呈現(xiàn)出淘票票有效減少認知負擔所做的優(yōu)化。
基于調(diào)研,淘票票的用戶群體趨近年輕化。改版中所制作情緒版、圖標、元素、字號、空間結(jié)構(gòu)等視覺語言,注重和品牌元素的結(jié)合,產(chǎn)生出新的視覺語言與品牌形象,從而更加貼近年輕人的心理與喜好。
根據(jù)heart模型進行設(shè)置,選出適合9.0版本的衡量維度:S,T,A。以體驗目標出發(fā),符合業(yè)務(wù)目標進行探索。不一樣的體驗目標使用不一樣的度量方法。對于內(nèi)容而言,需要衡量的是用戶的接受度,用戶需要看到它,接受它,并且需要知道用戶是否覺得有用。而對于核心購票流程,該流程則是比較偏向工具,度量方式則是任務(wù)完成度、完成任務(wù)時所花費的時長、信息有沒有被有效的傳達給用戶等來衡量的。最后對于視覺方向,用戶的想法會比較主觀,通過滿意度和推薦度來衡量。
提問者1:觀影者通常會在朋友圈、豆瓣和推薦來決定要看的影片,基本不會在淘票票上尋找值得看的影片,為什么淘票票會做這方面的探索?為什么要做內(nèi)容決策這件事?
回答:從想看電影到下單的過程哪個地方淘票票是沒有做好的、做到的,根據(jù)定性調(diào)研,發(fā)現(xiàn)一半以上用戶都不會在淘票票上進行決策。但是淘票票還是希望嘗試一下,希望用戶可以在淘票票上完成完整的購票觀影體驗。從數(shù)據(jù)顯示,用戶心智還是不好但是有一些提升。而且豆瓣經(jīng)歷了10年從pc到app,保留了用戶的歷史等數(shù)據(jù),沒有辦法讓用戶直接轉(zhuǎn)到淘票票進行觀影決策,這也不是淘票票希望看到的。淘票票也希望可以和競品和合作方去提升觀影決策,達到共贏的目的。
提問者2:淘票票改版之后,有一個衡量它的改版效果S、T、A的度,有沒有考慮要做NPS?
回答:淘票票一直有在做,從這次改版之后來,淘票票所有用戶群指標提升了應(yīng)該有五個百分點,然后年輕用戶的百分點在八個以上。NPS是一個非常關(guān)鍵的衡量用戶滿意度的指標。
追問:NPS是不是適合淘票票這個產(chǎn)品?還是適合于所以互聯(lián)網(wǎng)產(chǎn)品?
回答:NPS在集團內(nèi)它的重視度是很高,基本上阿里系所有的產(chǎn)品都會有指標。
提問者3:我之前是淘票票的用戶,曾經(jīng)用過淘票票做觀影決策,看下面的電影評價,結(jié)果發(fā)現(xiàn)電影評價是虛高的,就是說其實電影沒有那么好,但是評論會傾向性的選擇一個好的評論放在下面,經(jīng)過這次經(jīng)驗之后,就再也不用淘票票作為觀影決策了。想了解現(xiàn)在淘票票的評論機制,它是怎么個呈現(xiàn)的方式?是不是會優(yōu)先選擇就是比較好的評論放在首評?或者是有一些什么樣的計算方式?另一方面對于現(xiàn)在的評論失真的這種情況,有沒有想到一些改進的措施?是最近有沒有做過一些改版之類的,就是關(guān)于這種內(nèi)容方面的?除了剛才講的那些界面,視覺方面的,想了解內(nèi)容方面有沒有一些提升?
回答:第一點,用戶群的不同。對于影評這個來決策,淘票票可能跟豆瓣用戶群有非常大的差異,豆瓣是影迷聚集地,愛電影這幫人的一個粉絲聚集地,圈子比較小,想要進入這個圈子有一定的成本。但是像淘票票它服務(wù)的是大眾場景,服務(wù)的有外賣小哥,也有大城市去打工的用戶,也有三四線在國企里那種的員工,淘票票服務(wù)的用戶是大眾的,所以對于評分虛高這件事,不是說它好或者不好,也就是不能單純的絕對說好還是不好,可能大眾的心智就是這樣的。用戶不像一個資深影迷,看到速度與激情會認為是大爛片,可能反而覺得好,非常值得去看。第二點,關(guān)于這種影評的一個分發(fā)策略涉及到產(chǎn)品策略,不是很方便講。但是淘票票在這方面一直有優(yōu)化的,并且現(xiàn)在也是在持續(xù)優(yōu)化,希望影評可以真正為用戶去提供這個觀影決策。第三點,淘票票的用戶其實不只是c端用戶,它還有還有影院還有片方,但是水軍應(yīng)該不會有,至少淘票票平臺是非常不鼓勵這種情況,而且會有一定的反作弊、返水的機制。
提問者4:因為是以設(shè)計推動的一次改版,想了解一下推動的過程?第一就是因為平時改版都是產(chǎn)品的來做的,那這一次由設(shè)計來去推動的話,那設(shè)計跟產(chǎn)品之間的這個協(xié)作關(guān)系是什么樣的?然后改版歷時半年,是淘票票的設(shè)計歷程中是常態(tài)嗎?如果不是的話,平常的這個改版的節(jié)奏是什么樣的?
回答:第一點,設(shè)計要不斷的去跟產(chǎn)品、運營溝通,去跟不同角色溝通,溝通可能是最重要的一點。當所有人都達成共識了,確實有這樣的問題需要改,那全部門所有人就會去團結(jié),去把這個事情搞出來。搞出來之后再去向上一層一層的去向上匯報。匯報的可能要經(jīng)過很多輪,不斷有反饋的意見下來,因為本身視角輸入的也不夠全,接受到的聲音也沒有上游接觸的多,所以團隊會去接受意見,然后重新的進行。一輪review下來大概三四個月的時間,然后再去跟開發(fā)團隊溝通為什么要去升級設(shè)計語言,怎么樣去幫開發(fā)提效?怎么在下一次10.0改版的時候更容易。第二點,團隊第一次歷時半年進行改版,之前沒有停下腳步來去深耕用戶體驗,所以有一些坑或者一些彎路。平常的改版中基本上是兩周發(fā)一個版本,非常小步快跑的。對于設(shè)計如何跟產(chǎn)品團隊去協(xié)作?剛剛也有講過,達成共識之后,然后把這個事兒做起來,提需求、進版本,從需求池里評估需求優(yōu)先級進版本。交互設(shè)計跟產(chǎn)品經(jīng)理這個角色沒有絕對的一個邊界,可能都是去不斷的去觸碰,只要去配合合作的好,把這個產(chǎn)品去做出來,不用管處在一個什么樣的一個崗位。
提問者5:最開始的時候有問到淘票票和貓眼之間的一些對比,想了解在改版完之后和平時的工作中,是怎么會去了解和競品?怎么去比較?有沒有一些關(guān)注的量化的一些指標?
回答:不管服務(wù)于什么樣的產(chǎn)品,都會做競品調(diào)研。會關(guān)注市場的變化、競品的變化。對于設(shè)計團隊來說,其實主要的是關(guān)注的是用戶行為、功能和視覺界面。包括上了哪些個新的功能?在不同的渠道是怎么樣去運作的?運營思維是什么樣子的?淘票票團隊有在研究競品,有在做競品的一個分析,衡量的指標也主要是滿意度、推薦度,因為沒有辦法去看競品的數(shù)據(jù),只能通過用戶反饋去看競品跟淘票票的差距。
文章來源:uxren
有些產(chǎn)品經(jīng)理會陷入這種誤區(qū)——需求評審做完了,自己就可以放羊不管了。而本文則認為需求評審完,產(chǎn)品經(jīng)理還要做這六件事。
1. 確認需求評審的遺留問題并同步各方
2. 制定詳細&責任到人的項目計劃
3. 完成文案設(shè)計
4. 按照項目計劃,協(xié)同各方,往前推進,關(guān)鍵環(huán)節(jié)必須與各方確認。關(guān)鍵環(huán)節(jié)包括:
5. 準備項目review
6. 開始下個需求的方案設(shè)計和需求文檔準備
產(chǎn)品經(jīng)理A:需求終于評審完了。有種放飛的感覺,可以休假,去浪了!
產(chǎn)品經(jīng)理B:你說真的嗎?為什么我評審完,還一直在被開發(fā)、測試、法務(wù)、財務(wù)窮追不舍?
產(chǎn)品經(jīng)理C:你說真的嗎?為什么我評審完,從來都是我在窮追不舍開發(fā)、測試、法務(wù)、財務(wù)?
產(chǎn)品經(jīng)理D:你們開玩笑的吧?就我這么慘!我不但要緊追不舍開發(fā)、法務(wù)、測試、法務(wù)、財務(wù),還要被老板、被客戶窮追不舍。
產(chǎn)品經(jīng)理A、B、C:哥們,來講講,最喜歡聽慘兮兮的故事了。你的傷痛最能撫平我的內(nèi)心。
產(chǎn)品經(jīng)理D:好吧。需求評審只講清楚了產(chǎn)品的骨架、細節(jié),讓各方開始投資源。評審完,產(chǎn)品經(jīng)理還有一堆事要推進,沒法放羊。
要跟的事情主要有下面6件:
需求評審總有一些遺留問題要進一步確認,而后同步給各方。我不是圣人,有時候有些問題或者細節(jié)沒想到,評審的時候,大家提出來了,得趕快明確。
有時候需求評審中還有很大的bug沒想到,必須快速解決,要在開發(fā)沒動工前,都捋順。要不然變成需求變更,或者上線后被推倒重來,欲哭無淚。
我這種求生欲這么強,也沒人罩著的,必須狠命把需求做到95分以上。100分也不太敢說,畢竟眾口難調(diào)。
產(chǎn)品經(jīng)理還得身兼項目管理,項目管理從來都是事有輕重、事無巨細,難以假手他人。雖然我會盡可能調(diào)動大家的積極性,讓大家自驅(qū)管理項目,但還得牽扯不少精力。
項目管理的關(guān)鍵點:明確項目計劃、關(guān)鍵節(jié)點、每個關(guān)鍵節(jié)點的負責人、驗收方案。
比如什么時候交互評審、視覺評審、聯(lián)調(diào)、showcase、發(fā)布?分別是誰主要牽頭負責,哪些人需要參與。
為了防止項目延期,每個節(jié)點都還得提前趕。真是操碎了心。
文案從來不是隨便寫寫。文案是和客戶交流的重要途徑,整幾個客戶看不懂的文案上去,后面客戶咨詢搞死人!
文案設(shè)計除了客戶視角之外,也不是自己想怎么寫就怎么寫,還要和法務(wù)、客服團隊溝通。因為文案被客戶投訴的案例,又不是沒有。
還有啊,我的產(chǎn)品有3種語言,簡體中文、繁體中文、英文,雖然每種語言有專門的文案設(shè)計師,但得跟他們說清楚,也要花不少時間、精力。
當然,也有很多產(chǎn)品經(jīng)理,不管文案這種小事。可我覺得文案體現(xiàn)了產(chǎn)品經(jīng)理最基本的素養(yǎng),是產(chǎn)品的底子。
關(guān)鍵環(huán)節(jié)有6個:
1)交互評審
一般來說會由交互設(shè)計師發(fā)起,開發(fā)、測試、法務(wù)、財務(wù)都要參與。
這樣能保證大家在說同一件事情,避免我要的是頭牛,結(jié)果開發(fā)給了頭驢。
如果設(shè)計師項目參與度低,交互評審還得我自己上。哪里缺人,我就得到哪補坑。
2)視覺評審
一般來說,交互和視覺評審會一起。
有時候項目很復雜,或者交互、視覺分工明確,那就得分開了。
通常由視覺設(shè)計師發(fā)起。同樣,如果視覺設(shè)計師參與度低的話,我還是得補坑。
3)推進聯(lián)調(diào)進度
聯(lián)調(diào)是很容易扯皮的環(huán)節(jié),大家來自不同域、不同職能團隊,各有各的小九九,所以得盯著,避免聯(lián)調(diào)成為坑王。
4)推進測試進度
進入到測試就意味著開發(fā)的七七八八了,當然有時候為了壓縮項目周期,開發(fā)、測試會階段性并行。
除了測試進度,還得關(guān)注測試發(fā)現(xiàn)的問題,可能開發(fā)還得返工,也可能會發(fā)現(xiàn)需求評審中大家都沒有注意到的問題,得及時補救。
5)showcase
Showcase,說白了就是項目驗收。
驗收前,得先列出來要驗收哪些內(nèi)容,主流程、分支流程、逆向流程、重大關(guān)鍵節(jié)點。Showcase,也有可能發(fā)現(xiàn)新的問題,但基本上要避免在showcase環(huán)節(jié)發(fā)現(xiàn)重大問題,不然就得重大需求變更了。
showcase有時候由測試主導,有時候沒資源,我得自己上。
6)項目發(fā)布
如果一路順利,就該發(fā)布項目了。
項目發(fā)布計劃雖然也是之前就定好的,但要考慮的方方面面也還挺多的,可以看之前的文章《項目發(fā)布要考慮的因素》。
總而言之,要和各方溝通好,要保證項目順利發(fā)布呦。
項目終于上線了,可我得天天得看客戶反饋,看數(shù)據(jù),跟客戶聊,跟業(yè)務(wù)聊,準備復盤review。
產(chǎn)品狗似乎永遠都在準備復盤、復盤中、復盤后反思的路上。
項目通常是并行的。在需求評審完后,我已經(jīng)開始下一個需求的研究、設(shè)計了。
開發(fā)資源從上一個需求釋放出來的時候,產(chǎn)品經(jīng)理肯定得把下一個需求方案設(shè)計好,開始新的需求評審,妥妥的做好資源銜接。資源一旦釋放出來,下次想要資源,難上加難啊。
產(chǎn)品也需要持續(xù)迭代,讓客戶感受到,我們的產(chǎn)品在成長、進步,給人希望。
文章來源:人人都是產(chǎn)品經(jīng)理
目錄頁主要出現(xiàn)在一些篇幅比較長的書籍(畫冊)中,其位置一般被安排在扉頁之后,目錄雖然不是正文,卻概括了一本書的所有內(nèi)容,具有便于讀者快速了解及查閱書本內(nèi)容的作用,所以,即使說目錄頁是一本書中最重要的頁面也不為過。
既然如此,那么目錄頁的設(shè)計自然也是十分重要,于是乎,蔥爺整理了 8 個很不錯的目錄設(shè)計技巧分享給大家。
直線在目錄設(shè)計中的作用主要有以下三個。
1. 連接
即把每節(jié)內(nèi)容的標題與其對應(yīng)的頁碼連起來,這是比較常規(guī)的一種做法,可以使目錄更加清晰,重復排列的線條會形成統(tǒng)一、規(guī)整的美感。采用這種排版方式時,標題與頁碼一般會設(shè)置成兩端對齊,這樣的效果更加整潔、清晰。
2. 創(chuàng)造形式
對于一些文字內(nèi)容比較少的目錄頁,如果像上面的例子一樣排列會顯得比較單調(diào)和小氣,所以可以借助直線來增加其趣味性和張力。由于內(nèi)容不多,所以即使不嚴格對齊也不會影響閱讀。
3. 信息區(qū)隔
比如在下圖的例子中,直線起到了兩個信息區(qū)隔的作用,一是區(qū)隔頁碼與大標題;二是使七個大章節(jié)的內(nèi)容獨立開來。
這種形式也適合內(nèi)容比較少的目錄頁,當有了圖片后,目錄頁似乎也變成了一個內(nèi)頁版面,更加豐富、飽滿。圖片在目錄設(shè)計中主要有兩個用法。
1. 概括章節(jié)的主要內(nèi)容
其功能與標題一樣,所以如果要使用這種方式,那么就需要為目錄中的每個大標題都搭配對應(yīng)的圖片。
2. 裝飾
這里的圖片不是與標題一一對應(yīng)的,其目的是為了消除純文字目錄的單調(diào)感,使版面更豐富、更好看。
即將目錄中的元素(頁碼、標題、圖片)用表格的形式來排列,這么做也可以使信息更加清晰,更有秩序。由于這種做法在目錄設(shè)計中并不常見,所以顯得很特別。
頁碼或者序號是目錄頁必不可少的元素,章節(jié)細分比較多的目錄都會標明頁碼,而分類比較少的目錄一般會采用序列號,用來區(qū)分幾個大板塊。把頁碼或序號拉大并使用筆畫比較粗的字體,除了可以使其更明了、醒目以外,還可以增加版面的大小對比,提升設(shè)計感。
把頁碼裁切一下,會更有設(shè)計感。
即把文字信息豎向等分成兩份或兩份以上,適用于文字比較多的版面,所以如果目錄頁的內(nèi)容比較多時也適合分欄排版。由于每一欄的內(nèi)容都嚴格對齊,且頁碼比較大,所以欄與欄之間即使錯位排列也不會影響閱讀。
除了文字還可以用圖片來分欄。
即把目錄信息沿著某條軸排列,這種形式在目錄設(shè)計中也比較少見,適用于內(nèi)容比較少的目錄頁。軸的形式一般為豎軸和橫軸,排列的形式通常為錯位排版。
上圖并不是以線為軸,而是以圖片和色塊為軸。
我們都知道網(wǎng)格系統(tǒng)是畫冊設(shè)計的常用工具,可以有效組織版面信息,使其更有序、更整潔,所以內(nèi)容比較多的目錄頁也可以用網(wǎng)格系統(tǒng)來排版,為了避免單調(diào)和無趣,通常會加入圖片元素。
如果目錄的文字比較少,版面就容易顯得很空、很單調(diào),常見的做法是增加圖片或者把文字拉大,其實主動保留大量空白也是一種解決辦法,比如把內(nèi)容集中排列在版面的頂部、底部、左下角、右下角等位置,留出其他位置的空白。這么處理的版面雖然有一種不平衡感,但動感和設(shè)計感更強,大面積的留白還可以適當緩解眼睛的疲勞。
無論做什么設(shè)計我們都要以它的最終目的為設(shè)計準則,由于目錄是為了方便瀏覽和查閱書本內(nèi)容,所以設(shè)計時一定要注意視覺的整潔與信息的清晰,所以可以發(fā)現(xiàn)對齊和統(tǒng)一是最常被用到的兩個技巧。
如果經(jīng)常聽評片會,許多朋友會聽過這樣一句話:「這樣拍會顯得畫面更有張力……」就攝影而言,我們認為張力,是讓一幅攝影作品在視覺上出效果的重要「內(nèi)力」。此外「張力」還被廣泛應(yīng)用在點評一段演唱,一幅畫,一次表演……我們都似乎能感受「張力」的意境,卻又似乎不能參透它的意思。
如何理解「張力」?如何借此來提高我們的攝影感悟?下面我就試著做個粗淺的分析吧。
關(guān)于「張力」有很多略顯深奧的解釋。我認為下面這種解釋較為通俗,同時與攝影有一些關(guān)聯(lián):
互補物、相反物和對立物之間的沖突或摩擦?!话愣摚彩谴嬖谥鴮α⒍窒嗷ヂ?lián)系的力量、沖動或意義的地方,都存在著張力。(轉(zhuǎn)引自楊果〈隱藏的視點:中西「張力」范疇再辨〉,《江漢學術(shù)》,2013年10月)
盡管這段話不是針對攝影,甚至不是針對視覺藝術(shù)而寫的,但是卻很好的解釋了張力一詞?!笍埩Α梗╰ension)由「內(nèi)涵」(intension)和「外延」(extension)二詞而來。其實它在物理學上的意思便是其在美學上的意義的絕佳比喻。
那么我們便可以粗淺感受一下「張力」在一張照片(或者說任何一種視覺藝術(shù))中表達的是什么了:它通常表示了一幅照片對立而又統(tǒng)一的相互作用,這種作用通常產(chǎn)生緊張感、拉扯感,產(chǎn)生一種繁復的韻味。力的暗示、不平衡、斷裂、突發(fā)等效果都屬于張力范疇。
舉個極其通俗的例子,如果我要用圖片表達「跨欄」。
這張「沒有張力」,因為常規(guī)、平衡、穩(wěn)定:
這張「有張力」,因為夸張,不平衡:
當我們說一張照片的「張力」的時候,更多表達的是照片給我們帶來的主觀感受。通常情況下,一張「有張力」的照片背后蘊含著以下的特質(zhì)。
1. 拉扯感
即我們可以感覺到「力量的存在」,似乎被某種力量拉扯著。哇,這是再直白不過的張力了。
以拍街頭行人為例,「奔跑」「轉(zhuǎn)向」或其他肢體較為夸張的動作和表情通常能讓我們體會到力量。人的潛意識總是會傾向于,試著讓一些看起來沒有達到穩(wěn)態(tài)的東西趨向于達到穩(wěn)態(tài),夸張的動作同時也暗示著那些行人「將要跨出下一步」「將要轉(zhuǎn)過去」「將會拉扯肌肉」等等。
△ 韓松 / 攝 iPhone 7p, 莫斯科。奔跑的人。
△ 韓松 / 攝 iPhone 6, 馬爾丁,孩子的表情較為夸張,能感受到肌肉的拉扯,畫面感染力較強。
△ 韓松 / 攝 iPhone 6, 馬爾丁。同樣是人物照,這張就畫面張力略顯單薄。
而另一種拉扯感來自所拍攝的元素的形態(tài)本身。例如夕陽下被拉長的影子,具有縱深感的空間,夸張尖銳的幾何形態(tài)等。它們都會讓我們有被拖拽、被虹吸、被纏繞等感覺。
△ 韓松 / 攝 iPhone 7p, 布達佩斯。影子。
2. 沖突
制造各種對比與沖突。
例如強烈的色相對比,陰影和高光的高調(diào)對比等等。這無疑用畫面的色彩擊中我們的眼球。
再如一切能造成沖擊力的題材沖突:如抽象和具象,虛幻和真實,細膩與粗糙,動態(tài)與靜態(tài)等等。
△ 韓松 / 攝 iPhone 6, 香港。紅衣人物和綠色墻面的「撞色」。
△ 韓松 / 攝 iPhone 6, 里斯本。行人和影子。
3. 構(gòu)圖
夸張的構(gòu)圖也能產(chǎn)生張力。
斜線的構(gòu)圖通常更有張力,因為它夸張而強烈。但斜線的構(gòu)圖是需要磨練的,有時候「為了斜線而斜線」會顯得矯揉造作(之前的文章我建議大家先從擺正,拍平開始)。
△ 譚凌飛 / 攝 iPhone 6, 薩爾茨堡。斜射的影子讓不起眼的場景有了張力。
極度不遵從「三分法」「對稱」「平衡」等原則,而又在某種意義上很精妙地構(gòu)圖,有時候也能造成張力。這種構(gòu)圖的本質(zhì)是打破了平衡感,擾動了我們潛意識里的平衡球。元素的極大和極小的對比,大量留白和極度撐滿,以及一些「莫名其妙」的夸張形式,都有可能成為視覺張力的發(fā)力點。
△ 韓松 / 攝 iPhone 6s, 北京。
△ 韓松 / 攝 iPhone 7p, 日本高松?!笜O大」的場景和「極小」的人物,拉開了比例。
△ 韓松 / 攝 iPhone 7p, 巴黎。雕塑和觀眾的比例和顏色對比形成張力,然而他們的動作又有一些聯(lián)系。
1. 手機外置廣角或魚眼鏡頭
手機定焦鏡頭較為平和,如果加上外置的廣角或魚眼鏡頭能夠拍一些較有沖擊力的照片。廣角顧名思義是有很寬廣的視角,能夠近距離將比較寬的場景元素都拉扯在一起,讓斜線、曲線都更為夸張。
2. 勇敢面對那些「不舒服」的素材吧
其實本質(zhì)還是在于不平衡。擁擠、窺視、抖動、不穩(wěn)定的、轉(zhuǎn)瞬即逝,這些東西都不太舒服,但又常常因此形成視覺上的動感。擁擠人群中的一瞥,從奇特角度的窺探人物的活動、快速運動的騎車的人,匆匆而過的行人汽車等等,讓我們感到有「絲毫不安」,卻也預示著「這不是穩(wěn)態(tài)」,是矛盾而拉扯著的。
△ 韓松 / 攝 iPhone 7p, 布拉格。擁擠的人群。
△ 韓松 / 攝 iPhone 7p, 日本奈良。透過吃草的鹿看后面的鹿。
△ 譚凌飛/ 攝 iPhone 6s, 巴黎。差點被遮住的鐵塔。
3. 不平衡的構(gòu)圖
自不多說。對角線、夸張的引導線,螺旋線,撐滿畫面的構(gòu)圖。那些找不到幾何中心而又精妙的構(gòu)圖。
△ 韓松 / 攝 iPhone 7p, 日本。螺旋線。
4. 拍攝運動物體
跑步的人,快走的人,跳躍的人,快速通過的車。
△ 韓松 / 攝 iPhone 6s, 伊斯坦布爾。撐傘的人走過。
△ 韓松 / 攝 iPhone 7p, 莫斯科。拉手風琴的人與匆匆而過的行人。
5. 后期
通過調(diào)高飽和度等參數(shù)強化色相的對比等等。
△ 韓松 / 攝 iPhone 7p, 日本。后期調(diào)高了些飽和度,強化了人物和背景的顏色對比。
不得不承認,張力還是一個比較抽象的概念,我們從來不會以「張力」為目的去拍一張照片,更多的時候,我們是無意識地被「有張力」的場景所吸引,也具有從一堆原片中甄選出「有張力的照片」的能力。重要的是會在取景框中通過構(gòu)圖的運用來制造張力的可能性。
文章來源:優(yōu)設(shè)
藍藍設(shè)計的小編 http://www.yvirxh.cn