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