<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          產品設計核心三要素

          資深UI設計者

          先問一個問題:怎么樣衡量一個設計好與不好?工作中實踐越多次,越會發現華麗的設計稿并不是體現設計師專業能力的唯一標準。普通設計師和高級設計師區別在于,設計方案是否具備完整設計思路;設計對于業務有沒有真正的價值體現;以及設計方案的推動落地的完整性到底有多少。設計越往后走,越考驗產品思維,設計思維,以及設計推動能力。這是產品設計師需要關注的核心三要素。


          設計師在工作中接到設計需求會不自覺的第一時間想著如何去進行視覺表達,視覺表達確實非常重要,也是公司對于設計師的核心價值的定位之一,但視覺表達只是其中設計專業本職工作中的一個環節。設計師還要應該能夠站在產品、設計、技術等不同維度去思考設計方案的可行性。產品打磨-視覺呈現-落地執行,在這三個核心點里面設計師分別有不同的定位和價值所在。 


            一. 產品“雙標”滿足   

          產品打磨包含產品規劃,內容組成,界面布局,交互梳理等等…所有環節的工作是為了符合產品最終的目標。產品所有的能力會核心圍繞兩個點:1商業變現 2用戶需求滿足。這兩個目標在產品執行的環節有時候會有一些沖突,在產品打磨階段設計師通過怎樣的方式,做到既滿足產品商業目標又滿足用戶體驗需求?可以按照以下幾個步驟進行分析尋求切入點: 


          Image title



          這里用騰訊動漫付費模塊舉例說明: 項目背景是騰訊動漫產品要做付費體系升級設計,接到需求先有由產品源頭一步步深入,逐步展開設計方案的規劃。 


           01 產品目標確認  

          通過對項目背景的解讀和產品方案的深入了解,以及總結當前存在的一些問題,可以明確得到項目中產品核心目是什么。付費升級核心原因是付費轉化低,用戶付費意愿不夠強烈。此次升級的核心目標是促進內容消費,提升付費率。 


          Image title



           02 分析用戶路徑  

          確認目標之后從哪個模塊兒開始進行首要需要考慮的。對于現有現有功能的升級,建議核心從產品本身著手,可以根據用戶行為分析,獲取用戶常規使用路徑,找到用戶使用場景下的核心目的,從而去挖掘用戶在付費路徑下的訴求點,根據訴求點找到付費升級的觸點。這里我們羅列了用戶閱讀產品的路徑。 

          Image title



           03 觀察用戶核心需求是否被滿足 

           用戶在每個場景下都會有“痛點”和“癢點”。比如在閱讀前,核心目是想快點看到漫畫內容;閱讀過程中,想要及時宣泄對漫畫的故事情節的感受;閱讀后,希望找到更多相關內容或者能夠和內容有更多的互動。目前產品在這三個關鍵的路徑節點都存在一些問題,閱讀前對于付費缺乏正向引導,閱讀過程中互相行為較少,閱讀后沒有更多延展內容可供消費等。 


          Image title



           04 洞察設計切入點  

          根據用戶在閱讀 “前 中 后” 關鍵路徑的節點的不同情緒反饋,我們可以做出找到相應情感滿足切入點,并且制定解決方案 


          Image title



           05 制定設計方案  

          將之前找到的設計情感切入點用交互和視覺的形式呈現出來,盡可能完整的表達清晰。下面展示是關于付費升級優化的完整視頻DEMO。整個方案采用趣味情感化形式為核心設計思路,逐步去引導用戶付費。讓用戶在趣味互動中完成產品的商業轉化目標。 


          https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html


           二. 設計呈現的“差異化”   

          視覺呈現是設計師們都比較擅長的工作,但不同專業高度要求下方案最終呈現出的效果是完全不一樣的。好的設計方案,需要在設計上做出明顯的“差異化”,這里的差異化是指要區別于常規輸出一般的水平。差異化的可以從多個點入手:


          Image title



          優質的設計美感

          美感是作為設計師首先需要培養的技能之一,也是在后續職業生涯的一直需要用到的技能。設計師被神職化的很大一個原因就是因為設計師的美感比一般人要好,有懂得欣賞美、鑒別美、以及創造美的能力。單一從視覺層面,設計作品是合格品還是精品,最終取決于畫面的精美程度。項目不分大小,再小的一個項目都可以做出精致品質,這也是體現設計師專業度的核心衡量之一。


          Image title



          完整設計思路:

          設計方案的完整性也能夠很好的設計師專業度的差異化,幾張圖的設計稿和一個有完整設計思路的設計方案在品質上自然是明顯差別的。設計師不光需要將設計呈現出來,更需要有嚴謹的設計思路并且表達出來讓受眾到你的設計想法。設計前期分析、中期執行、后期落地以及迭代優化,能夠讓設計師有意識的鍛煉和提升自己的設計思維,對于設計師能力提升有必然的幫助。 


          Image title



          獨特創意:

          設計差異化呈現上,創意是一個非常好的切入點。行業大趨勢的前提下,現在同類產品越來越趨于同質化,受眾使用產品的時候都會有一些常規認知,關于功能的、交互操作的、內容組成的等等,淘寶和京東、大眾和美團、甚至QQ音樂和網易音樂在產品使用體驗上都有高度重合的地方,這些已經在用戶心智中形成習以為常的認知感受。如果能夠在用戶的常規認知里,用創意手法呈現出超出他們預期的內容使其驚喜,產品設計就會有明顯差異化體現。 


          Image title



          善用情感化:

          具備美感的設計能讓作品看起來有高級感,但更為高級且有效的是能夠引起用戶情感共鳴的設計。設計是主觀的,對于設計每個人都有自己的想法,也正是因為主觀的設計感受,能讓設計在情感化打造方面可以有很多的嘗試方向。能夠引起受眾主觀情感上的共鳴和認同的設計,會形成產品的核心記憶點之一。設計師對于情感化設計往往會有一些誤區,認為圖形可愛,色彩羨慕,動效流暢且能夠形成一套視覺體系,就能夠算情感設計。真正的情感設計是需要從用戶角度出發,挖掘用戶的認知領域和喜歡,從而去進行符合用戶情感訴求的呈現。 


          Image title


          三. 方案推動的效能管理 

           

          設計方案輸出只是整個產品生產流程中的一個核心環節,產品上線后體驗如何最終取決于落地實現的程度。在方案落地支持過程中,效率協調和實現能力是保證設計方案貫徹一致執行的關鍵因素:


           協作  

          產品設計師工作協調分為內部協作和外部協作。內部協作即設計師之間的溝通協同,主要內容是如何保持設計語言一致性,除了制定設計規范,還可以建立公共控件庫,線上調用??丶炷軌蚴乖O計師協作無學習成本,設計師輸出設計稿效率也能夠大大提升,同時保一致性。


          外部協作主要是和下游的技術同事直接的工作對接,設計方案的交接方式以及開發獲取信息的效率很關鍵。在開發接收設計方案的時候,盡能力降低獲取成本以及理解成本。比如設計稿的標注,在標注上設計師一般會花很長時間,開發也需要逐步查看,偶爾還會有標注遺漏的地方。我們團隊會直接采用插件,設計稿及時同步,并且開發可以自己隨時查看每個元素的標注信息,便捷。


          這里推薦兩款協調軟件:一款是InVision可以在sketch里進行控件協同調用,所有想用的元素直接源文件調用,不需要再問同事要源文件!另一款是Zeplin技術同學可以直接查看元素屬性以及間距等,設計師解放雙手不再需要標注!


          Image title



          官網鏈接: 

          https://login.invisionapp.com/auth/sign-in   

          https://zeplin.io/


          實現能力   

          專業技術之間的壁壘,也會成為設計方案實現的阻力。同樣的界面,設計人員用設計軟件實現,技術人員用邏輯代碼實現,實現的方式和成本存在很大的差異性,所以往往設計師認為很簡單的需求在開發層面的確非常難實現。當然,不是所有需求都是無解的,設計師在技術實現層面還是可以做一些事情:


          01 方案前置溝通

          設計一個新的功能的時候,如果有非常規的設計方案,可以提前和技術人員溝通實現的難易程度,讓技術人員有前期預判和預演的時間。并且,可以將設計做成簡易DEMO方便技術人員快速理解,避免雙方存在信息不對等的情況。


          02 搭建開發控件庫

          開發控件庫和設計規范一樣,是最基礎但應用最為頻繁的模塊兒。開發控件庫可以將最基礎的元素形成固有規范,所有開發實現都用同一套規范,以確保實現的高度一致性,同時也能夠提升實現效率和設計還原。設計可以輔助開發一起制定開發控件庫,確??丶旌驮O計規格的一致性。


          03 尋求技術語言共通性

          盡量將設計方案轉化為技術能夠理解和復用的形式進行對接。除了靜態設計稿的標注,設計和技術實現最大的難點在于動態交互的實現上,對于動態設計,將設計方案轉換為代碼文件交付給技術實現,這樣能確保功能的正常實現同時減少后期設計還原性的偏差。


          以上初步總結的關于產品設計師在設計過程中從前期產品規劃到中期設計執行再到后期開發落地應該注意的一些核心點:

          第一條,設計方案既要滿足產品目標又同時要兼顧用戶體驗;

          第二條,優秀的設計師,會保持設計方案的“差異化”;

          第三條,設計師職責除了確保設計方案完整性,更重要的是推動設計方案的完整落地。


          在產品設計過程中,設計師需要關注還有很多關鍵點,這里也歡迎大家一起補充交流,正是這些關鍵點,將設計師的思維逐步打開,使其成為一個具有全鏈路思維的設計人才。 

          文章來源:UI中國

          交互手勢的容錯性和邏輯性

          資深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. 是否需要加入多手勢操作的考慮因素

          我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。

          1. 使用頻率:當一個功能的使用頻率足夠高時,我們加入多手勢操作去提高用戶操作效率才是有意義的。一個低頻的功能的特殊手勢操作很容易被用戶遺忘。
          2. 危險程度:如果一個操作不可撤銷且存在危險性質,我們最好不要加入多手勢操作。此時我們需要用戶更加專注,如果加入多手勢操作可能會增加誤操作的概率。
          3. 特殊體驗:當我們需要加入特殊的模擬體驗時,此時我們可以加入多手勢操作。如探探左滑無感右滑喜歡,給用戶帶來的“翻牌子”感覺是點擊操作無法替代的。QQ 閱讀下拉擬物繩燈進行日間和夜間模式切換,這種存在我們記憶中的交互方式能夠喚起我們的情感。

          2. 評估所選手勢的考慮因素

          1)考慮不同平臺的硬件系統和操作系統特性

          由于硬件與操作系統差異,iOS 系統支持很多手勢,但是安卓系統在手勢支持方面就不如 iOS 豐富。

          安卓硬件設備的差異比較大,不同安卓手機廠商會在安卓系統的基礎上自定義系統的手勢操作,因此對于手勢的支持也有較大的差異。對于這種情況我們需要熟悉相應平臺的規范,做到心中有數。

          2)考慮所選的手勢的學習成本和記憶成本,用戶是否已經被教育

          如下圖所示,盡管設備支持的手勢數量多不勝數,但是日常使用 APP 時,大部分用戶習慣使用的手勢很少,比如單擊、雙擊、滑動、上拉、下拉、雙指擴張和收縮等。除此之外的手勢教育成本和學習成本很高。

          一般比較通用的功能是沒有必要在此處創新的,但是如果一些特殊的操作確實需要加入時,我們就需要考慮下面的問題。

          交互手勢的容錯性和邏輯性

          a. 如果沒有教育成熟,考慮加入教學或搭配簡易的操作方式

          對于我們需要加入的手勢操作當前用戶并未被教育成熟時,我們需要考慮加入手勢教學,具體的手勢教學類型下一部分會詳細討論。

          然而,大部分情況下用戶的記憶是短期的,教學內容可能會被快速遺忘,下次用戶使用 APP 時仍然不會使用特殊手勢。此時我們應該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。

          比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設計,其考慮到了有些用戶在現實生活中并未見過擬物繩燈,并不知道是要進行下拉才能觸發操作。因此,QQ 閱讀貼心地搭配了一個簡單的點擊操作,用戶通過點擊繩燈也可以切換夜間模式,如下圖。

          交互手勢的容錯性和邏輯性

          b. 考慮所選手勢是否可能導致沖突和誤操作,如果導致了,考慮如何避免和折中

          最常見的手勢沖突情況就是 APP 的手勢與操作系統的全局手勢沖突。

          解決方案有兩個,一是避免設計與全局手勢一致的手勢操作,例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應用等全局手勢操作;二是仍然設計與全局手勢沖突的操作,但是將全局手勢部分禁用或以其他的方式區分開。

          如下圖有書播放頁的案例,由于進度條滑動控件過于靠左,導致使用 iOS 全局右滑返回手勢時有時會產生誤操作,即本來想要右滑返回卻不小心滑動了進度條。

          這種情況下我們可以標注一個右滑手勢禁用區域給開發工程師說明情況,將此情況避免掉即可。

          交互手勢的容錯性和邏輯性

          誤操作指的是,我們設計的手勢操作與 APP 內的其他操作或系統全局手勢操作接近導致用戶觸發了非預期的操作。比如 iOS 端的知乎被吐槽的一個右滑返回手勢操作,經過研究發現,由于 iOS 端的知乎在瀏覽回答的頁面設計的右滑返回的熱區過大,導致用戶上滑瀏覽的時候如果手指的滑動角度變化幅度過大一不小心就觸發了右滑返回,再次進入回答后又需要翻頁很久才能找到之前離開的地方,很影響體驗。

          我覺得知乎可以減少熱區,將熱區調整為 iOS 全局的右滑返回區域即可,如下圖所示。

          當然,產品設計需要平衡與取舍,如果減少了熱區是否會影響其他用戶的體驗還需要考慮和調研,兩者并無絕對的對錯

          交互手勢的容錯性和邏輯性

          3. 讓用戶了解并使用新手勢

          當新手勢無法直接讓用戶感知時,我們需要加入一些手勢教學幫助用戶快速上手使用。

          1)手勢教學方式

          a. 浮層和動畫引導使用靜態或動態的手勢圖片或氣泡示例告訴用戶使用哪種手勢進行操作

          相比于靜態,動態比靜態更為直觀和易學。

          交互手勢的容錯性和邏輯性

          b. 內容隱喻通過微妙的視覺線索暗示用戶此處可以通過某種手勢進行操作

          由于教學內容難免具有干擾性,對于高級用戶來說是不必要的,但是對于初級用戶又是必要的,因此以這種內容暗示的方式使教學極為輕量化,在低干擾的情況下使得用戶學習了手勢操作。

          如下圖,嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架,暗示用戶可以通過左右滑動切換文章。

          再比如陌陌在打開點點功能時,會在用戶進入頁面的時候播放一個動畫,暗示有很多卡片疊加在了一起,用戶可以通過滑動切換卡片。

          交互手勢的容錯性和邏輯性

          2)教學的出現時機

          a. 操作前當產品中設計了不容易感知的新手勢,在用戶操作前,通過教學讓用戶了解和學習新的手勢。

          b. 錯誤操作后對于一些與用戶的心理模型和習慣不一致的手勢,提前預測用戶可能輸入的錯誤手勢,在用戶錯誤操作后進行提示,規范用戶的操作方式。

          如下圖,由于知乎舊版本是通過左右滑動切換回答的,新版本調整為上下滑動后,需要糾正用戶使用習慣。因此,當用戶仍然使用左右滑動時,會出現浮層提示用戶正確的手勢進行教學。

          交互手勢的容錯性和邏輯性

          結語

          以上是日常思考和總結,有不恰當之處歡迎指出。希望本文在大家進行手勢設計的過程中能夠幫助做出合理的決策。

          文章來源:人人都是產品經理 

          中臺是什么?聽聽大咖的看法

          資深UI設計者

          歷史上的每一次變革,都是從一小部分人的率先覺醒開始的?;ヂ摼W時代的變革日新月異,更需要時刻洞察局勢,未雨綢繆。


          我們籌辦了【藍湖做東】的線下活動,邀請行業大咖們齊聚論道,碰撞智慧的花火,追尋潮流的軌跡。

          本期嘉賓


          (按發言順序)



          此外,感謝不愿透露姓名的神秘大咖們蒞臨現場!


          話題背景


          阿里巴巴集團在 2015 年首次提出“大中臺、小前臺”的戰略,此后,騰訊、百度、京東、美團、滴滴等互聯網巨頭紛紛效仿,一時間“中臺”引發互聯網行業的刷屏熱潮。


          說到中臺,不得不提到芬蘭的游戲公司 Supercell ,僅有 300 名員工,卻接連推出爆款游戲,成為當時全球最會賺錢的明星游戲公司,馬云帶隊參觀這家公司半年之后,阿里集團開始組建 " 大中臺,小前臺 " 的組織和業務體制。


          2015 年年中,馬云帶領阿里巴巴集團高管,拜訪了位于芬蘭赫爾辛基的移動游戲公司 Supercell。


          Supercell 當時號稱是世界上最成功的移動游戲公司,Supercell 由 6 名資深游戲開發者在 2010 年創立,旗下擁有《部落沖突》、《皇室戰爭》、《海島奇兵》和《卡通農場》這四款超級現象級產品。Supercell 是一家典型的以小團隊模式進行游戲開發的公司,以 2 到 5 個員工、最多不超過 7 個員工組成獨立的開發團隊,稱之為 Cell ( 細胞 ) ,這也是公司名字 Supercell (超級細胞)的由來。


          團隊自己決定做什么樣的產品,然后最快時間推出產品公測版,看看游戲是否受用戶歡迎。如果用戶不歡迎,迅速放棄這個產品,再進行新的嘗試,期間幾乎沒有管理角色的介入。團隊研發的產品失敗后,不但不會受到懲罰,甚至還會舉辦慶祝儀式,以慶祝他們從失敗中學到了東西。


          這種模式讓 Supercell 公司成為了年稅前利潤 15 億美金的游戲公司,2016 年 6 月,騰訊以 86 億美元收購了員工數不超過 200 人的 Supercell 公司 84.3% 的股權,每一名員工人均貢獻的估值超過 3.54 億人民幣。


          Supercell 的成功很大原因就在于其的 " 部落 " 組織策略。在 supercell 僅有的 100 多人中,被分成若干個小前臺組織,每個小組雖然人不多,但都包含了做一款游戲需要的所有人才。


          本來就不大的公司被分成若干個小組,這樣做的好處是可以快速決策,快速研發,快速把產品推向市場,而游戲引擎、服務器等后臺基礎則不需要操心。


          Supercell 的模式給參加此次拜訪的阿里高管們很大的震撼,在大家反復的心得交流和討論中,一個非常重要的問題引起了很多人的反思:信息時代的公司架構到底應該是怎樣的?


          正是有了這次拜訪才真正讓阿里巴巴的領導層有了足夠的決心要將組織架構進行調整,在此次拜訪的半年后,阿里集團 CEO 逍遙子發出內部郵件,組織架構全面升級,建設整合阿里產品技術和數據能力的強大中臺,組建 " 大中臺,小前臺 " 的組織和業務體制。


          阿里中臺
          所謂的 " 中臺 ",并不是阿里巴巴首先提出的詞語,從字面意思上理解,中臺是基于前臺和后臺之間。阿里通過多年不懈的努力,在業務的不斷催化滋養下,將自己的技術和業務能力沉淀出一套綜合能力平臺,具備了對于前臺業務變化及創新的快速響應能力。阿里人將 " 中臺戰略 " 形象地比喻成陸??杖娏Ⅲw化協同作戰。


          海陸空協同作戰
          他們將中臺分為六類,分別對應不同兵種:

          業務中臺,提供重用服務,例如用戶中心、訂單中心之類的開箱即用可重用能力,為戰場提供了空軍支援能力,隨叫隨到,威力強大;
          數據中臺,提供數據分析能力,幫助從數據中學習改進,調整方向,為戰場提供了海軍支援能力;
          算法中臺,提供算法能力,幫助提供更加個性化的服務,增強用戶體驗,為戰場提供了陸軍支援能力,隨機應變,所向披靡;
          技術中臺,提供自建系統部分的技術支撐能力,幫助解決基礎設施,分布式數據庫等底層技術問題,為前臺特種兵提供了精良的武器裝備;
          研發中臺,提供自建系統部分的管理和技術實踐支撐能力,幫助快速搭建項目、管理進度、測試、持續集成、持續交付,是前臺特種兵的訓練基地;
          組織中臺,為項目提供投資管理、風險管理、資源調度等,是戰場的指揮部,戰爭的大腦,指揮前線,調度后方。
          2018 年雙 11,阿里又一次實現了一次壯舉,在 2135 億的背后,在令人驕傲的戰績背后,缺少不了阿里中臺鐵軍發揮的巨大力量。
          (資料來源于 ZAKER)


          活動現場

          北京的院子馳名中外,坐落在北京孔廟旁邊的一處小院尤其別致,相對封閉的院子中,坐落著透明的玻璃房子。四面圍合卻有開闊的視野,兼具隱秘性與舒適感。【藍湖做東】首期聚會在這里悄然開始。


          特邀嘉賓們紛至沓來,不約而同地坐到了向陽的落地窗前,伴隨著初秋的清風和暖陽,一場以中臺為主題的討論,徐徐展開。


          影響著行業的大咖們,是如何被中臺影響的呢?讓我們拭目以待。


          服務過阿里大文娛的高級交互設計專家朱斌,離中臺最近,他率先發言。


          在阿里大文娛,我注意到整個內容行業的資源非常依賴于導演和演員。


          如果沒有流量明星或知名導演,那這個作品票房十有八
          九都不好,所以可以看到中國的電影宣傳幾乎都是明星臉。而國外就截然不同,國外更加依賴于編輯和 IP。并且以一套極為成熟和的生產模式批量化創造出大量優質的影視作品。像流水線一樣生產出不同風格的流量大片。


          當內容成為商品的時候,如何判斷一個內容的傳播價值,就成為問題。


          我們為此建立了一個團隊,專門來研究注意力管理,讓不同層次的用戶第一時間看到內容就能進行一系列快速判斷,而且這個判斷還要符合人類的思維結構。


          簡單來說我們想用體驗的方式去把復雜的內容和故事進行具象化,在第一時間讓用戶看到、看懂,并激發出觀看的興趣。


          這個構思在運作的過程中面臨很多問題。


          比如,設計師們如何快速從影視作品中提取有效信息,如果有個片子 50 集,要判斷它的價值,要看完 50 集嗎?影視作品體量那么大,沒有那么多設計師把所有內容都過一遍。


          最終,我們提出了“中臺”這個設想,我們試圖找到一種即又符合邏輯,同時符合用戶體驗的方式。把內容進行體驗層面的歸類和細分,提取共有特性,預判用戶在不同類別中的興趣和喜好。進而提升內容平臺的商業價值和分發效率。


          商業行為的本質就是榨取剩余價值。


          榨取剩余價值的基本條件,就是降本增效——用更少的時間、更少的人力成本,做出一樣多的事情。我們使用藍湖這樣的工具就是為了提效,這也是各大企業爭相構建中臺的原因之一。


          設計行業比較偏向創意,和其他行業的中臺有所不同,在座各位都是各行各業的大咖,我想借此機會聽聽大家對中臺的理解和運用,大家就自己所面臨的問題找找解決方案。


          聚美優品也正在構建“電商中臺”,蘇星就此闡述了自己的觀點:


          大家都認為聚美優品是一個電商企業,其實內部已經逐步轉變成了一個類投行的企業,不僅收購一些頗具潛力的項目,也孵化內部的一些項目。


          中臺與每個公司的業務形態相關,如果公司是產品驅動的,它的中臺搭建就會側重于更的提供各種功能性服務;如果產品比較單一、功能比較單一、市場比較下沉、類目比較垂直的話,那中臺的概念可能是一個偽命題。


          聚美優品近年來致力于尋找新的經濟增長點,這是老牌上市公司必然經歷的一個階段。所以,公司對具有創造力的崗位或團隊給予很多的支持,但很多創意都是天馬行空想出來的,當一個產品或項目到設計部門的時候,我們需要判斷其成功的路徑是什么。我理解的,這就是一個中臺。如果是設計中臺的話,它需要完成一個任務,保證效果。


          中臺可能是一個宏觀的狀態概念和一個微觀的具體操作層面的重合,我所說的設計中臺,更偏向于設計管理上的中臺思維,它是一個驅動力,可以靈活地組建很多模塊,然后不斷去自由匹配,從而支持一些功能。




          阿里大文娛的朱斌接過話題,補充了一些看法:



          產品設計行業具有特殊性,如何把產品設計理念和產品設計原則,通過數據整合,與設計需求靠近,是個難題,也是阿里的中臺一直在努力解決的問題。


          關于中臺,我想提出兩個點:中臺的特性,中臺對產品設計行業是好是壞。


          朱斌曾服務過的華為提出“讓聽得見炮火的人呼喚炮火”,這就是個人與中臺之間配合的關系。這里“呼喚炮火”的人,就是產品設計師,他們奮戰在一線,接觸不同維度、不同領域的人,有特別強的洞察力,而提供“炮火”的就是中臺能力。


          阿里現在在做兩件事,其一就是強大的設計格局,其二就是把所有設計職能進行了升級,把之前的視覺設計師、交互設計師和各種子類的設計師都統一成了三種類型:體驗設計師、創意設計師、用戶研究設計師。其中體驗設計師大概占 60-70%,創意設計師占 20%,用戶研究設計師大約 10%.


          阿里的零售板塊非常穩定,服務的幾千萬中小企業每天都會有海量的店鋪、商品設計需求。所以體驗設計團隊制定了詳盡的規范,而這些規范就是中臺,設計師按照規范進行輸出即可,甚至開了鹿班系統自動生產,這就相當于炮兵,指哪打哪,火力兇猛。


          同時,我們會拓展第二曲線,通過創意設計師找方向。創意設計師的工作不一定能立即帶來商業價值,但可以通過嘗試,獲取用戶反饋的數據,由此做一些校準和拓展業務邊界的工作。


          所以中臺能解決的問題,一定是穩定的,而創意相關的東西一定是變化的。所以,阿里提出“大中臺、小前臺”的戰略。用中臺去做效率實現盈利,用前臺去做變化生成新的規范。


          以我開篇提到的內容行業舉例,時下流行的明星是隨時變動的,但這些變化會產生一些規律,比如這些明星都有哪些共同特點,中臺就能總結出這些變動的規律,整合出一套審美規范,當知道受眾需要什么的時候,就可以根據中臺提供的規范,由前臺去尋找符合受眾需求的內容。


          這是一個相輔相成的過程,通過前臺不斷刺激用戶去看新內容,后臺可以通過反饋收集整合更多規范,再由這些規范支持前臺更產出符合用戶需求的內容。


          阿里的設計中臺大家都知道,就是鹿班智能設計平臺,它是設計中臺最有代表性的一個產品。鹿班誕生的背景,是由于電商平臺得通過 Banner 做宣傳,淘寶量級越做越大,設計師支撐不住巨大的需求,加上同類 Banner 轉化率差別不大。


          這就體現了需要做設計中臺的幾個前提:


          其一,需求量特別大,不是靠人力能夠解決的,或者靠人力解決的話,成本會特別高。


          其二,設計質量要求不高,所要輸出到的信息量較為固定。


          其三,存在的生命周期特別短。像淘寶的推廣,你每次打開都是不一樣的東西。


          有了這三個前提,就可以考慮做設計中臺。


          就此,又產生一個疑問,以前的那么多設計師是不是就沒活干了?


          并不是這樣的。


          阿里提出“重新定義設計”,設計師是構造一種秩序,這種秩序是機器沒有辦法自動獲得的,它一定來自于設計師的經驗、對用戶的洞察、對品類的把控。最終,建立、優化中臺的任務是由設計師來做的。


          用我們的設計團隊舉例,中高級 UX 設計師在迅速增加,設計師的絕對數量沒有大的增長??梢钥闯稣麄€企業設計團隊的能力是在提升的,對業務的支撐也會更有效,不必像以前需要上百上千個初級設計甚至外包團隊來做這件事。這就是中臺在規模化和頻繁迭代上的優勢和效益。


          廣聯達印雋講到什么性質的中臺解決什么問題,以及中臺的本質是什么:


          阿里的鹿班,在內部和其他系統高度耦合,一張推廣圖從制作到分發,到上架到驗證,系統和系統之間并無太多斷層。


          從使用者的角度來說,鹿班系統的最大收益方并不是設計師,而是商戶,本質上是為了提高生產效率,用 AI 來淘汰量產擼圖的低端設計師,但還是可以視做設計中臺,畢竟這是一套“會做設計”,并且由設計師來提供機訓內容的系統。


          所以我們談中臺之前,還是先把中臺的邊界劃清楚。


          不能把技術中臺、業務中臺、數據中臺、設計中臺混為一談。


          中臺概念在支付領域出現的比較早,以支付系統為例,資金管理、財務、風控,屬于后臺,即技術視角的底層服務。


          渠道接入、交易、賬戶、收單網關等等,屬于中臺。


          中臺承擔的是業務聚合和泛用,中臺不能獨立存在,脫離后臺來談中臺是沒有意義的。



          (例圖摘自網絡)


          對于設計師來說,切忌盲目跟風,中臺概念的確很火,但僅針對一線大型團隊。團隊和產品體量沒達到一定規模,底層系統都還沒打磨清楚的團隊,談中臺也為時過早。且設計團隊如果還以界面和功能交互設計的執行工作為主,并沒有足夠深入業務和技術的話,也沒有資格談中后臺設計。


          至于設計中臺,還是得先看企業業務是否已經處于良性發展期,且技術和業務也已經到了可以有中臺的階段,不然,脫離業務來談設計中臺,又是一紙空文。


          所以,從這個視角來看,行業內真正可以算得上是設計中臺的,除了阿里鹿班這個量級的系統之外,少之極少。


          但是,除此之外,就沒有別的形式的設計中臺了呢?


          我們其實可以換個視角看一下,比如,一個已經達到一定量級的設計團隊,是否有意識的在管理自己的數字和數據資產呢?在什么系統里管理?這樣的系統,是否可以視為設計視角中臺?或只是一個工具?
          設計部門需要基于系統的數字資產管理。大部分設計團隊,并沒有從系統視角,把一個設計體系運作所需要的對象管理起來。小到一個圖標,一個文檔,大到你的規范和原則和設計語言,都散落在各個零碎的內、外部系統中,甚至于設計師個人的硬盤里。


          一個 Design DAM( Digital Asset Management 設計數字資產管理) 系統或許可以成為一個企業的設計中臺的一部分,而且這個中臺是可以獨立于部分業務而存在的,他能有效累積整個企業在生產過程中的所有客觀過程,包括數據。


          一個優秀的設計團隊,需要具備數據驗證和數據驅動能力,而用于分析和驗證的數據,也應該是設計的數字資產的一部分。如果設計團隊自己有能力的話,應該作為設計數字資產的一部分。那么這個數字資產可以是一個設計中臺。換言之,數字資產是建立設計中臺的一個重要核心。


          藍湖或許就像是一個 Design DAM 系統的雛形,當然,還有很長的路要走。


          團隊的方法論和知識庫也需要一個系統性的沉淀。


          企業需要的是依葫蘆畫瓢式的流程,還是化整為零的方法論庫,根據實際項目情況合理的自由的組合運用。從管理視角來看,我們更希望看到的是系統性的管理,而不是完全依賴于人肉的主觀。需要很清楚這些方法論的組合是以何種靈活的狀態去支撐項目,以及輸出的標準在哪里。


          路漫漫,其修遠兮。


          自如網的賈洪濤對印雋的發言很贊同,但是關于“炮火”,他卻有不同的見解:


          關于任總“聽見炮火的聲音”來做決策,我的個人體會不一樣,離炮火最近的人被炸死了,或者被炸殘了,聽得見炮聲的人,也許不是第一線,而是第二線的人,他們才是最適合做決策的人。


          我想做的是中臺其中的一種,對內部的數據可視化。企業的相關數據能展現在所有員工面前,像淘寶雙十一那樣,一是激勵團隊,一是告訴團隊產品的現狀。


          我們要做的第一步就是先用現有的數據,足夠好、足夠多的數據,展現給員工眼前,但同時也要考慮到,這些數據放出來,外部客戶看到后會不會產生負面影響。


          另外一個,項目的數據,如果讓設計做清單是沒有意義的,如果為了做得漂亮虛造數據,就更加沒有意義,不是我想做的初衷。


          提到數據,服務過阿里的朱斌補充了自己的看法:


          我這兒有兩個故事。


          第一個故事是回應賈總的想法。我有一個學妹,正在阿里做一個項目,叫做“數據之美”,就是做雙十一的大屏和各種數據的可視化呈現。比如會通過各種設計的變化來展示數據增長的速度感、體量感。目前做的非常成功,今年也晉升到了更高的職位,足以說明數據可視化的重要性。


          第二個是另一個維度的故事。有時候團隊內考核 Review 時,每個細分的 KPI 都完成了,而且看描述都是超額完成,所有的數據都很好。但實際上公司的整體競爭狀態卻在下滑。


          這兩個故事告訴我,數據其實就是一個任人打扮的小姑娘,好的打扮會讓數據更易讀易懂,壞的打扮會讓數據具有欺騙性。當講到數據的時候一定需要非常嚴謹的算法,每一個沖鋒陷陣的人都似乎贏了,但最后戰爭卻是輸的,這就需要全面的數據分析,只抓單個的數據,其實特別危險。


          廣聯達印雋說得很對,數字資產管理看的是長線、看得是全局,而產品經理往往看的是當下,是短線。由此,我認為直接把數據動態跟設計動態捆綁在一起,是危險的,或者不能叫做中臺。我們的解決方法就是求助于數據分析團隊,一方面通過專家解讀保證正確理解,另一方面我們也自建數據理解的能力,招募了數據方面的專家增加了一條體驗數據支線。


          很多人說數據像毒藥,我認為,數據是解藥。那些認為數據有毒的人,大約是沒有真正分清楚哪些才是有效的數據。Netflix、字節跳動等很多新興企業的成功告訴我們,通過數據的分析,做出的決策更有利于目標的達成,而基于平臺層面的數據收集、分析、管理,也就是數字資產管理,正是中臺能力構建的基石。


          文章來源:UI中國

          2020年最全設計趨勢

          資深UI設計者

          寫在前面

          過去幾年中,我們的積極反應促使我們繼續探索和分析主要設計領域的新趨勢。盡管大多數趨勢都是去年發生的變化,但到2020年,我們仍有一些新趨勢值得追求。最重要的趨勢是與技術有關的趨勢,以及它們的發展趨勢,以及它們如何影響設計領域。 


          總體趨勢

          2020年的主要趨勢動作設計與動畫, 對于2020年,我們認為運動設計是主要趨勢,因為我們在所有設計領域都遇到動畫,從小的交互到徽標和UI,一切都在變化。動畫內容正在進入現代世界,在現代世界中,書面內容沒有以前那么吸引人。 動作設計正確實施后,可使廣告系列的信息更快,更正確地傳達給受眾。

          undefined

          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應用程序的暗版本模式。

          有了介紹此更新的大公司,許多設計師將選擇在他們的應用程序或站點中使用暗模式,因此希望在來年看到越來越多的暗模式。

          undefined


          1.2粗體顏色

          在過去的兩年(到2020年)中,強烈的色彩已成為重要的趨勢。大膽的色彩豐富,明亮,甚至極富活力。它們可以是主要或次要顏色。 


          undefined

          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中的插圖

          多年來,插圖一直是設計中最強勁的趨勢之一。插圖是對概念的直觀解釋,可以使用戶更好地理解產品背后的思想。除了一些精美的插圖使這一概念獨具匠心外,它們還可以更快地傳達信息。

          undefined

          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中都使用,并且基于相同的原理,但實現方式有所不同。

          undefined01.  余吳-旅行計劃應用由  朱莉張庭  02.  UX / UI | 食品外賣應用由  康斯坦丁Seredkin  03.  COOC通過  cuneyt仙


          1.5動畫圖形和微交互

          正如我們所說,動態圖形是今年的趨勢,它在UI設計中也有很強的表現,它為插圖增添了力量,使創意更易于吸收并保留在用戶的記憶中。 

          微交互在2018年成為第一流,但這一趨勢值得在2020年關注。它們是UI設計中極其重要的趨勢,這使基本應用程序/網站與非凡的應用程序/網站有所不同。微交互在使用戶了解系統的工作原理并引導其獲得更好的體驗方面起著至關重要的作用。 

          如果您是UI設計師,但尚未在工作中使用微交互,建議您這樣做,因為到2020年,沒有UI的任何UI設計都將是非常基本的。 


          undefined

          01.  UI / UX | 智能藥房應用的   阿納斯塔西婭中號,  謝爾蓋Nikonenko UX   02.  氣候與動物:滅絕危機網站UI / UX  由  丹尼爾·譚,  達芙妮龍  03  飛素食者由  帕特里夏賴納斯  04.  UKRPOSHTA。烏克蘭國家郵政局的移動應用程序,伊洛娜·金(  Ilona Kim)  05 .  Tagir Tikeev 的聾人報警應用程序


          1.6用戶界面中的視頻

          到2020年,信息必須非常快地到達用戶手中,最好通過視頻內容來完成。您選擇通過動畫或經典電影來解釋產品,視頻內容對于任何網站或應用程序都是必不可少的。


          1.7功能

          UI設計中的一個重要部分是功能,即,根據其目的和功能選擇每個元素。許多人認為您必須在設計和功能之間進行選擇,但是在新技術的幫助下,這兩種技術可以很好地融合在一起并相互補充。設計負責引起對站點或應用程序的注意,其功能使體驗變得更輕松。它使用戶可以更快地找到信息。

          undefined01.斯基林貿易(skilling.com) -   Loredana酒店帕普用餐 ,  邁克爾Baldean 


          1.8注意細節

          在UI設計中,對細節的更多關注非常重要。從按鈕,圖標,加載到導航到細微的細節,都可以打造出非凡的設計。隨著新技術的出現,我們在UI中必須注意的細節始終在變化。

          在明年,我們將看到越來越少的按鈕,以及更多基于手勢的導航。例如,后退按鈕(Android的導航常用)在Android 10中正式消失。

          undefined

          01.  FLYR的視覺形象和營銷網站的  Ramotion 

          02.  鬧鐘應用聾人通過  Tagir Tikeev


          1.8漸變

          幾年來,我們一直在談論設計中的漸變,這種趨勢在2020年將繼續保持強勁,因此值得一提。新鮮的色彩是成功漸變的完美選擇。它們可以用于按鈕,圖標,插圖,甚至用于排版。

          undefined

          01.  Wavecut - IOS應用程序通過  Eleken局  02.  抗憂郁癥的應用程序-產品設計(UX / UI)由  安娜Arutiunian 

          03.  保羅回腸-電影音樂作曲家,制作人,DJ,Perfomer  通過  的Loredana PAPP-Dinea ,  米哈伊Baldean ,  米洛主題  04.  ITEXIA通過  下一頁局 ,  亞歷克斯海鷗 ,  Jegor Walowski


          2.插圖


          2.1角色設計

          角色設計包括定義一個支持整個概念的角色。最重要的是,通過繪圖,設計師向角色灌輸了強烈的個性。您在應用程序或網站中遇到的虛擬助手是角色設計的一個很好的例子。

          undefined

          01.  新微小的事情?兒童圖畫書由  Vuon插圖 ,  榮阮 ,  榮范  02  的Adobe X Createfulness由  邁特弗蘭基,  馬蒂厄Tarwane  03。 3D人物V2由  安東尼奧·佩蒂特Cwirko  04.  Malayali由  丹尼·何塞


          2.2紋理

          插圖和紋理很好地結合在一起,可以創造出令人難忘的構圖。從粒狀紋理到預制的筆觸,您可以找到許多想法來為插圖添加紋理,也可以手動創建它們。瀏覽網絡時,您可以找到許多可以在插圖中使用的紋理,預制筆刷和工具。 

          undefined

          01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 飯 太稀


          2.3平面插圖

          在過去的幾年中,我們到處都可以看到平面插圖。它們仍然處于趨勢中,但現在有了一個新的組成部分:對每個元素應用細線。大多數藝術家都選擇使用細的黑色筆觸,但也可以將其上色,使其陰影比所涉及的對象暗。

          undefined

          01. BILLY KENNY -剛剛為音樂通過  桑戈BANG  02 Babelia - Lecturas對維拉諾由  米格爾·安赫爾Camprubí  03.  拳擊貓-第一滴血由  Felms   04.  COUSCOUS STUDIO | 解釋器VIDEO  由  哈立德abdelazi ?


          2.4等軸測圖

          是的,等軸測圖仍然在這里。它們主要可以在UI設計中找到。隨著人們對加密貨幣的興趣不斷增加,這種趨勢似乎已經生效,但是在2019年它已經發展了,現在我們在其他業務領域中發現了這一趨勢。

          undefined

          01.  龐克市由  溫祚_  02  FastCompany -等距號由  阿圖爾Tenczynski  03和05.  抗體亞型由  馬里奧·德?梅耶爾  04.  松弛插圖由  京張 


          2.5 3D

          隨著效率越來越高的軟件和工具的出現,3d渲染已逐漸發生變化。3D插圖非常受歡迎,因為與2D插圖不同,它提供了更逼真的圖像。

          undefined

          01. 游戲巴伊亞之家由  Miagui  02  天平 由  卡韋薩Patata工作室  03.  城堡毀滅者由  穆罕默德Chahin  04.  Eyoo家庭3D插圖由  Baianat  05.  個人插圖第1卷由  巴勃羅·馬林 06.  一個人旅行通過  亂伊萊恩


          2.6超大膽的色彩

          大膽的顏色非常適合插圖。它們營造出歡樂的氛圍,使角色脫穎而出,并在圖像背后展現故事。

          undefined

          01.  瑪莎·希肖娃(Masha Shishova)攝于莫斯科的  STRTFD咖啡壁畫  02. 作家- 利奧·夏目(  Leo Natsume)的移動互聯網思想  03.  可口可樂圓罐插圖由塔尼亞·雅庫諾娃(  Tania Yakunova) 


          3.動態圖形


          3.1 3D視頻 

          在2020年,無法想象沒有3D設計的運動。設計的這個分支打開了一個世界的大門,在這個世界中,只有想象力是極限。我們可以在廣告,電影,游戲,廣告活動等中找到3d。

          undefined

          01.  龐克市由  溫祚_ ,  視覺設計藝術的影響  


          3.2視頻+動畫插圖(混合媒體)

          拍攝的視頻,動畫插圖以及有時是靜止的照片的結合可以產生非凡的效果。2d或3d插圖可創建令人難忘的視頻,從幾行運動到3D真實人物甚至是現實生活中不存在的復雜視覺效果。

          undefined

          undefined

          01.  Coppel /回到學校通過  大量工作室  02  PWR  由安娜·霍查,  Edvina元 


          3.3 2D動畫-說明性視頻

          2D動畫專注于創建故事和角色,并在創作過程中使用矢量。當您想要廣告系列或產品的說明性視頻時,2D可能是理想的選擇。在一個總是忙碌而又沒有時間閱讀的世界中,說明性視頻對于任何網站都是必不可少的。

          undefined

          01.  Freelive  由  工作室Infografika ,  謝爾蓋·薩多斯基 ,  阿納斯塔西婭Alterka ,  Arsentiy Lesnik賓館 ,  尤里·阿姆斯特朗 ,  阿林好,  喬治VALD ,馬克西姆Tleubaev  


          3.4動畫徽標

          您已經了解到動畫是2020年的“必備”,為了保持競爭力,我們還必須將它們集成到徽標設計中。許多公司已開始對其徽標進行動畫處理,以引起人們的注意。這也是徽標設計的主要趨勢。

          undefined


          01.  杯茶由  維多利亞伍  02 - 07.  運動野獸?Logomachine。動畫標志的  運動設計學院,  維克托Villamarin的,  波格丹·杜米特留,  Logomachine .NET ,  亞歷山大·庫茲涅佐夫,  扎克李,  丹尼斯Siurin ,  斯坦尼斯拉夫·馬爾琴科,  莉扎薇塔Tsareva ,  Supremus Levenus ,  安東·福明,  埃米爾Khafizov ,  膽堿哈達           


          3.5混合動畫2D和3D集成

          這一趨勢不是一個新趨勢,但絕對值得一提?;旌蟿赢嬀褪鞘褂脼榇藙摻ǖ奶囟ㄜ浖?D與3D結合在一起。 

          undefined


          4.平面設計


          4.1平面設計中的3D 

          盡管2d壟斷了設計的這一分支,但3d可以為最終概念添加額外的內容。3d渲染可以采用插圖,動畫或字體的形式。

          undefined

          01.  畫像由  費爾南多·多明格斯Cózar  02.  NASA | 太空時代的  工作室-JQΔ   03.  美國宇航局X BBC | 不自然世界的  工作室,JQΔ


          4.2雙色

          精益求精的概念可以完美描述這一趨勢,設計師在其中創造出大膽的元素,并帶有優雅的手感和強烈的對比。這種趨勢是創建更易于訪問的打印的理想選擇,因為某些打印技術如果顏色更多,則價格會更高。

          undefined

          01.  冬季公開賽'18由  Kinoto Studio,  Romina Rios,  Luc Geoffroy  02 Synticate©由  斯捷潘索洛德科夫   03.  TIGER在博物館由  de_form工作室,  諾拉demeczky ,  的Eniko DERI  04.  刻字系列IX由  拉斐爾·塞拉


          4.3光學感知藝術

          歐普藝術作品是抽象的,有許多知名的黑白作品。通常,它們給觀看者留下動感,隱藏的圖像,閃爍和振動的圖案或腫脹或翹曲的印象。(來源:wikipedia.org)。

          這種趨勢給人以動靜的印象,但是以一種靜態的方式。如果要實現在印刷海報中移動圖形的想法,這是最合適的方法。

          undefined

          01 02  東京電影節共混物由  梅賽德斯巴桑 ,  的Adobe住  03.  海報-第一卷由  Xtian米勒


          4.4平面設計中的插圖

          插圖在設計的所有領域都非常重要,因此我們在圖形設計中也可以找到它們。2D插圖在現在已經非常流行了幾年,并且即使在2020年,也將繼續成為設計師的最愛。 

          undefined

          01.  GOOSE赫爾-海報由  Ewelina鵝  02  CAT酒吧和舞廳/ 2019至  kissmiklos,  Eszter薩拉 


          4.5動畫海報

          動畫無處不在,我們在設計的各個領域都可以找到它們,當然它們也存在于數字海報中。動畫可以將2D與3D混合在一起,效果令人著迷。

          undefined

          01  節地鐵地鐵由  Bzoing,  維吉尼貝達德  02.  失敗的Windows由  皮埃爾Kleinhouse,  轄Zivony 


          4.6復古合成波

          復古合成波是一種在80年代出現的趨勢,但一旦好萊塢開始發行該十年的電影后便開始重新出現。隨著《陌生人事物》系列的成功,這一潮流再次開始流行。

          undefinedundefined

          01.  雞尾酒和夢想通過  Gjorgji Despodov  02.  CINEMAX由  杰森巴爾巴  03.奇怪的事情(Netflix.com)


          4.7瑞士設計,達達主義,包豪斯

          20世紀最重要的圖形設計運動始終是最好的設計師的靈感來源。這些樣式值得一提,因為它們始終是的,遵循它們所施加的規則幾乎不可能在設計中犯錯誤??偟膩碚f,這些運動強調版式,無襯線字體(Helvetica于1957年在包豪斯舞臺上創建),幾何形狀,簡單的線條,體積和顏色。

          undefined


          01.  瑞士海報01(版式方面)由  Mehman Mammedov  02.  黃視VOL.3通過  維奧萊納齊名


          4.8大的不間斷彩色空間 

          大型,不間斷的色彩空間將在明年成為非常流行的趨勢。它們與大膽的字體搭配使用,可以在圖形設計,產品設計以及ui中找到。

          undefined

          01.  Synticate©由  斯捷潘索洛德科夫  02  Havaianas人字品牌內容由  約翰Vernizzi  03.  Kekkil?-BVB的  Kurppa Hosk


          4.9超極簡主義

          極簡主義的設計僅使用必需品,非常有限的調色板和簡單的形狀來打造令人難忘的身份。放棄多余的元素,使所有設計項目都有目的。要創建超極簡主義的設計,您需要使用盡可能多的白色/負空間,簡單的配色方案和一些基本的幾何形狀。

          undefined

          01.  Heim雜志,第3頁,  Sasha Yaguza撰寫  02.  Andrei Gheorghe- DADA-通過  moodley品牌標識發布


          5.基于技術的趨勢

          技術通過智能設備和嶄新的理念正在徹底改變我們的生活。這些新技術使設計師已經開發出進入當前趨勢的新功能。人工智能,機器學習,虛擬現實和增強現實正在影響設計師的思維方式和創作方式。


          5.1增強現實的移動應用

          隨著蘋果和谷歌推出自己的AR開發平臺ARKit和ARCore,很明顯,整個世界將面向增強現實技術。 

          許多大品牌已經在其應用程序中采用了這項技術,而那些尚未采用這種技術的公司必須認真考慮如何使用戶在這種新現實中與之交互。


          有一些AR交互可用于創建直觀的應用程序。第一個是將應用程序固定在手機屏幕上時。另一個是AR UI與用戶周圍的環境相關聯時。最常用的互動方式之一


          是當UI與對象相關并通過掃描特定項目觸發時。該動作將數字動畫連接到特殊的“標記”。 

          有關更具體的AI規則,請閱讀Apple指南,以提供“將真實的虛擬對象與現實世界無縫融合的沉浸式,引人入勝的體驗”。

          undefined


          5.2 AI,ML,聊天機器人和虛擬助手

          聊天機器人是一種 通過聽覺或文本方法 進行  對話的  軟件。[1]  此類程序通常旨在令人信服地模擬人類作為對話伴侶的行為,盡管截至2019年,它們仍遠遠不能通過  圖靈測試。[2]  資料來源:維基百科


          人們還不習慣與AI對話,因此設計師(和開發人員)的工作很大一部分是使流程簡單并建立信任。他們需要幫助人們了解系統可以做什么以及如何使用它。


          使用AIML(人工智能標記語言)設計和編寫腳本聊天機器人,是出色的UX設計人員的魔力可以發揮作用的地方。

          大多數使用聊天機器人的公司都選擇說明助手來為AI做鬼臉。以下是一些在其UI設計中使用聊天機器人的品牌:Spotify,星巴克,萬事達卡,絲芙蘭,Lyft,必勝客。

          undefined


          5.3 VR

          大多數人將VR與游戲行業聯系在一起是有充分理由的,但是隨著所有大型科技公司開發VR套件和應用程序,我們可以肯定地說,我們將發現使用和享受這項技術的新方法。VR已經用于教育,醫療保健,旅游,房地產或建筑。 

          undefined


          5.4語音用戶界面(VUI)

          語音用戶界面(VUI)使用語音識別  來理解語音命令和問題,通常是文本到語音以播放答復,從而  使語音與計算機的人機交互成為可能  。語音命令設備(VCD)是受語音用戶界面控制的設備。資料來源:維基百科 

          去年,使用互聯網連接的設備的人中有40%每月至少使用一次語音助手,與去年相比,這一數字增加了10%。


          6.產品設計


          6.1包裝中的圖案

          在過飽和的包裝市場中,很難創造出可以脫穎而出的新產品,因此設計師要回到根源并創造出使產品在擁擠的零售貨架上脫穎而出的樣式。幾何,花卉,浪漫或單色圖案是任何產品包裝的大膽選擇。

          undefined




          01.  飛行山羊咖啡由  妮可LaFave    02.  VITA SPA皮膚  由  DWYW   03.  巧克力包裝設計由  算術   04.  100手繪無縫的圖案和形狀   的  Arseny Samolevsky


          6.2包裝插圖

          插圖一直是包裝設計中的重要元素。通過他們,我們可以講述一個故事,使目標受眾可以更好地理解該概念背后的歷史。平面插圖已經存在了數十年,并且很可能會一直處于流行趨勢。

          undefined





          01. 布里格斯原件由  熙宰金  02  天鵝絨咖啡杯  由  安東Malishev,  呵呵卡羅拉  03.  廢物不包括廚房-品牌打造的  嘗試和真正的DESIG ň04  家,甜蜜的壽司兒童  通過  精明的機構,  馬里亞納星火  05.  Cerveza塔Maleante通過  Antonay 


          6.3留白

          極簡主義是設計的基本原則,而今天它又是新事物。它放棄了設計中不需要的所有內容,并用負空間代替了它。這種趨勢將功能帶到了最前沿,并專注于簡潔的設計,使版式脫穎而出。

          undefined

          01.  香味精油 由Y u型簡林,  黃惡嗯-祥  ,  智泰蓮 02.  重塑品牌理念,為BodriPincészet由  克里斯托夫Gáthi


          6.4單色和兩種顏色

          首先,在調色板中僅使用1或2個色調似乎有些限制,但它們可以創建非常強烈的視覺識別感。僅使用一種或兩種顏色,就可以保持簡約的外觀,放棄所有多余的東西。結果是精美,高雅的產品令人賞心悅目。

          undefined

          01. Zerbet冰糕由  才林賈爾斯  02.  貝利啤酒  由  埃德大廳 悉尼,  葉卡捷琳娜Leontyeva ,  波阿斯孫


          6.5大膽的顏色

          大膽的顏色和漸變仍然是非常強烈的趨勢,這種趨勢將在2020年持續。使用這些顏色,您可以創建令人難忘的產品。

          undefined

          01.  極簡主義和享樂主義:Fabula Branding 重新設計了  千年品牌

          02  紋身商城  通過  Openmint工作室,  葉卡捷琳娜Teterkino ,  煙,  葉戈爾Kumachov 

          03.  Organic  by  Larissa Kendrik 和  加布里埃爾· 沙茨曼

          04.  VIZOU -老花眼鏡  的  工作室開頭語,  阿克塞爾杜馬克 

          05.  包裝的調味開心果由  米拉Katagarova


          6.6注意細節(受新藝術風格啟發)

          注重細節的包裝比以往任何時候都更受歡迎。設計師選擇這種趨勢是因為它賦予了產品真實性。這種趨勢使我們以現代方式思考經典。 

          undefined

          01.  HYWILDE由  查德·邁克爾·工作室  02  AMSTEL KARGO IPA通過  卡帕羅設計船員

          03.  大島咖啡烘焙-咖啡咬傷的  農場設計


          6.7包裝中的講故事

          到2020年,品牌將不得不重新考慮其產品和包裝。品牌必須講述一個故事,以幫助客戶體驗產品的本質。這可以通過為包裝創建視覺和敘述身份來實現。

          undefined

          01.  喙接通過  骨干品牌推廣   02.  Colorea用t  骨干品牌


          7.版式


          7.1粗體印刷

          粗體印刷術是設計中的重要趨勢,它取代了圖像作為主要元素。勇敢的排版可以在網頁設計和圖形設計中發揮作用。

          undefined

          01.  埃里克·林格(Eirik Lyng),作者:  埃里克· 赫斯特雷(ErikHerrstr?m);  02.  包豪斯(Bauhaus_100)(x3),作者:  BunkerType(JesúsMorentin)

          03.  UCCA當代藝術中心北京由  布魯斯·莫設計(BMD)  ,耶勒馬雷夏爾 


          7.2小寫

          越來越多的應用程序使用完全小寫的文本,非常易于閱讀,并且完美地融入了簡約和現代的設計中。在明年,我們絕對必須關注這一趨勢。

          undefined

          01.  Autea品牌和網頁設計由  米哈爾Markiewicz  02  山大食品公司 CI由  臣藤田/ tegusu公司 03.  Aquality品牌的  哈坎Fidan的


          7.3自定義字體 

          盡管自定義字體沒有什么新意,但我們將看到這種趨勢越來越多地出現在設計中,尤其是在徽標和海報中。這種做法在大品牌中更常見,因為生產專用字體可能會非常昂貴,但是設計人員可以對現有字體進行少量調整,結果可能會非常獨特。 

          undefined

          01.  Think8全球研究院通過  勃洛克設計  02  ZINEZ?//設計周期由  芭芭拉·卡托納 ,  媒體與設計系埃格爾  03.  式設計'19通過  TRüF創意  04.  Cako字體由  維奧萊納齊名


          7.4動力學排版

          就像我們說的那樣,動畫在設計中無處不在,因此在排版中也很常見。動態字體使用小的和簡單的交互作用來移動和移動屏幕上的字體。這種簡單的技術可以處理文本并創建最終產品,該產品保留在查看器的內存中。

          undefined

          undefined

          01和02.  Grafika  ,  Gimmick Studio設計  。03&04.  增強現實與動作排版,作者:  Alex Slobzheninov


          7.5堆疊字體 

          堆疊文本可能是一種現代化的解決方案,可以吸引您注意基本信息。我們可以在網頁設計,應用程序設計和圖形設計中看到這種趨勢。

          undefined




          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突出顯示了使用該應用程序的人們所做的不同項目。使用這三個應用程序時,用戶可以導入圖片或搜索圖片。

          undefined


          8.2繁殖

           Procreate是 由Savage Interactive針對iOS開發和發布的   用于  數字繪畫的  光柵圖形編輯器 應用程序。針對iPad的藝術可能性而設計  ,并且適合從初學者到專業人士的藝術家。


           它提供130多種逼真的畫筆,多層,  混合模式,  蒙版,   過程視頻的4K分辨率導出  ,  自動保存以及許多其他經典和原始的  數字藝術  工具。除光柵圖形外,該軟件的編輯和渲染文本和矢量圖形能力有限  。(來源:Wikipedia)Procreate是2018年App Store上最暢銷的應用程序。

          undefined


          8.3 Adobe XD

          Adobe XD是  由Adobe Inc開發和發布的   用于  Web應用程序  和  移動應用程序的基于矢量的 用戶體驗設計工具。它適用于  macOS  和  Windows,盡管有適用于iOS  和  Android的版本   可幫助直接在移動設備上預覽工作結果。XD支持  網站線框圖,并創建簡單的交互式點擊型原型。(來源:維基百科)

          undefined


          作者授權


          總結

          每一年每一個時間段都會有新的趨勢,學會的辯證的眼光去看待便是最大的智慧。世界一直都在變,趨勢也是。保持學習和探索的心不變就是對自己熱愛的事情最好的回應,念念不忘,必有回響。共勉!

          文章來源:站酷-木七翻譯整理

          經典設計書《簡約至上》的精華版讀書筆記

          資深UI設計者

          作為交互設計師,你一定經常苦惱你的界面該怎么達到「簡約而不簡單」,該通過什么樣的形式、功能、才能讓用戶獲取「更好的體驗」。

          真正的簡單并不意味著最少化,樸素的設計仍然具有自身的特征和個性。簡單的特征和個性應該是源自你使用的方式,所要表現的產品,以及用戶執行的任務。交互式設計 4 策略告訴你如何通過簡化設計獲得更好的用戶體驗。

          交互式設計的簡約 4 策略:刪除、組織、隱藏、轉移。

          上述4策略既適用于簡化功能,也適用于簡化內容。而且無論項目大小,是整個網站還是一個頁面,這4個策略都同樣適用。你可以根據要解決的問題從中選擇正確的策略。

          刪除

          刪除雜亂的特性可以讓設計師專注于把有限的重要問題解決好,而且也有助于用戶心無旁騖的完成自己的目標。

          組織

          組織往往是簡化設計最快捷的方式。

          隱藏

          隱藏部分功能是一種低成本的簡約方案,但是,哪些功能該隱藏呢?

          轉移

          把合適的功能轉移到合適的設備上。

          用一句話來總結交互式 4 策略:

          刪除不必要的,組織要提供的,隱藏非核心的,轉移可轉移的。

          運用恰當了一定可以使你的設計更出彩。

          對于以上內容想了解更詳細的讀者可以閱讀

          App 設計系列之模態彈窗與非模態彈窗

          資深UI設計者

          在手機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:

          • 出現在屏幕底部。
          • 只能放文字不能帶圖標,文字要精簡不宜太長。
          • 不是模態的,可以通過Toast對其他控件進行操作。
          • 短時間后會自動消失。
          • 不能對Toast進行交互。
          • 優先適用于系統提示,不能手動操作讓Toast主動消失。

          △ 以上為今日頭條、微博、即刻

          HUD與Toast的區別:

          • HUD只出現在屏幕的中央,Toast則在底部。
          • HUD可以包含icon,Toast只能純文字。
          • HUD一般是毛玻璃透明,Toast一般是灰黑或者黑色半透明。
          • HUD中內容可以變化(如調節音量時),Toast中內容不可變化。

          △ iOS音量調節

          優點:

          • 占用屏幕空間小。
          • 不會打斷用戶操作。
          • 使用簡單,適用范圍廣。

          缺點:

          • 出現時間短,在碎片化時代注意力不集中容易錯過Toast提示。
          • 遮蓋其他控件,但不能對Toast進行交互。

          適用:提示不需要的反饋信息,如刷新后的成功狀態。

          5. Snackbar:底部彈窗

          Android特有的交互形式,在Google的MD規范中,將Toast和Snackbars歸為一類。有些時候也有應用在iOS系統中,也可以理解為加強版的Toast。

          含義:英譯為快餐、小吃。

          剖析:Snackbars與toast一樣是從屏幕底部向上出現,但是Snackbar不同的是可以經過用戶進行其他操作而消失。

          適用:較多適用于撤銷操作。

          三. 總結

          通過分析和了解彈窗的類別、適用范圍,才能更好的在設計中進行優化與改變。用戶體驗設計的重點,是一步步了解用戶,然后設計出適合用戶體驗,滿足用戶心理需求的產品。把握好彈框設計規范,避免彈框設計的誤區,能更好的幫助你完善產品。

          但是,沒有十全十美的產品,所以要根據設計趨勢與用戶需求不斷地進行更新迭代,通過用戶反饋,不斷地改良產品體驗,才是做出優秀產品的前提。

          淘票票9.0改版背后的設計思考與體驗度量

          資深UI設計者

          Sandy現任阿里影業—淘票票體驗設計專家,2015年加入阿里巴巴,深耕B端行業產品,服務于電影產業鏈中的投資、宣發等角色。2017年起接觸C端用戶產品,推行價值導向和問題導向。2019年開始實踐線上線下全鏈路設計。

           

          活動筆記:

          阿里影業的服務涉及的面很廣,涉及到b端與c端全流程的體驗服務,包括面對片方的制作和宣發、發行、乃至面向用戶的售賣與放映,在每個節點都有涉及。而淘票票,經歷了四年的產品迭代,以一年一個版本的速度的進行優化。15年的理念是做一個好用的購票工具,16年新增了營銷,17年加強營銷,18年新賽道探索。到了2019年,改版應該進行新的思考:怎樣做?做什么?怎么做?做對了嗎?

          此次淘票票9.0版本是根據用戶現有的習慣與市場的變化,由設計師發起的一次自下而上推進的改版。以下是淘票票9.0的設計策略與設計目標:

          1. 內容設計賦能
            新服務,擴展觀影決策節點,幫助用戶發現好電影。
          2. 購票流程體驗打磨
            新體驗,解讀用戶行為,體驗走查,打磨核心購票鏈路體驗。
          3. 年輕化
            新用戶,關注用戶群體的變化,搜索年輕用戶群的品牌認知,提升年輕用戶滿意度。

          接下來將對三點設計策略進行逐一的講解。

           

          1. 新服務—內容的賦能

          根據內容類型和場景進行劃分,結合內容特點和用戶喜好,打造全場景運營,例如提供影訊、通稿、片單、榜單、熱點、解讀、文章和活動等等多元化內容。通過提供不同的內容展現給用戶,將內容進行解構、把觸達的場景進行細化、優化設計的表達,從而達到幫助用戶可以更好的理解電影的目的。

           

          2. 新體驗—打磨購票流程的體驗設計

          設計前,首先應當熟知兩種設計思維導向:

          • A.當設計目標是幫助企業完成商業目標時,是以價值為導向。
          • B.當設計目標是為了提升用戶體驗,則是以思維為導向、問題為導向。

          而這次9.0淘票票改版采用的是以問題為導向,期間經歷了五個流程:

          2.1 找問題

          首先出去找問題,找問題的方法有很多,如:用戶研究、定性、定量、業務數據和體驗走查,收集業務、用戶、客滿不同視角的疑似問題。

          • 會通過支付寶、淘寶、百度糯米來比較價格高低,對比價格需要反復推出
          • 進入不同的影院和場次,不太方便
          • 希望看過的電影能夠產生一些紀念價值
          • 不清楚80元和40元的座位有什么區別
          • 不明確片尾是否有彩蛋
          • 購票平臺的評分對自己沒有參考價值
          • 電影院的地址、停車場是否免費等信息不夠準確
          • 買完票到取票之間,需要反復確認訂單信息、分享訂單信息,但是訂單入口
          • 藏得有些深

          2.2 看現象

          找完問題之后,基于數據的支撐,去看用戶有哪些習慣的變化,看到目前的現象后再進行數據解讀。

          • 影院頁和選座頁返回率高
          • 越來越多的用戶購買當日的電影票
          • 多數用戶選擇更短的買票路徑
          • 大多數用戶去過的電影院在3家以內

          2.3 定位問題

          基于使用場景和使用效率,進一步定位問題所在。

          2.4 分析原因

          分析出癥結,以便推進最終的解題環節。

          • 癥結1:平臺服務與用戶決策心理脫節
            現有的流程是線狀的:選影片-選影院-選場次-選座-下單。但是用戶實際的心理決策是網狀的,用戶可能在選時間的時候考慮影評好不好,會在選場次的時候考慮價格是不是合理的。
          • 癥結2:認知過載
            理想狀態是在傳達信息后,在用戶感知、接收和決策后,希望得到用戶方的正反饋,但是現實往往是用戶認為認知負擔過重,反饋失效的情況。其中信息傳達、顏色的設置最直觀的感受是“亂”。決策流程上最直觀的感受是“打擾”,提醒用戶是否確定要買某時候的票、提醒用戶確定退出選座頁不保留剛才選的座位,所有的提示的設計,都是采用一種打擾的方式進行詢問的。

           

          2.5 解題

          解題1:場景化探索。

          以解決問題為目標,達到優化用戶體驗的目的,對場景進行預判、探索,把場景分為三個典型的場景:

          • 典型場景1:短時決策–例如距離開場時間較短,對價格不敏感,希望找到距離合適的影院,快速完成購票決定。
          • 典型場景2:追求體驗–對影廳的要求較高,希望找到放映效果最好的影廳。
          • 典型場景3:價格敏感–找到符合自己價格預期的影院。

          解決:針對第一種場景,選坐頁可以快速找到選場次的功能,淘票票提供常去影院、附近影院的選擇,減少用戶決策時間。針對第二種場景,部分觀影者不知道價格更高的IMAX廳、杜比廳的觀影效果,價格比普通廳貴了50塊錢,那么這個錢值在哪?淘票票使用視覺映射和科普的手段,例如當點擊進入杜比廳后,下拉可以呼出信息,了解相關的影廳,給予科普;而且界面設計不同,更貴的影廳視覺效果好,界面上也提供用戶更強的視覺沖擊。

           

          解題2:用戶視角信息重構,進行信息降噪,減少認知負擔

          認知負擔=信息呈現類型x信息量

          以上公式可以看出,假設設認知負擔為定值,當信息量增多的時候,需要減少信息呈現類型,適當進行信息降噪與信息結構化。降噪是把想要突出的信息更加突出;信息結構化是把同類型的信息以結構化的呈現出來,讓用戶自然對信息產生親密性。

          對于信息傳達,改變之前比較打擾的提示彈窗,現在淘票票會把所有信息都放在頁面中,用一種更輕量的方式提示用戶,不再打擾用戶。信息重構則是把需要用戶確認的信息放在最頭部,例如退票、改票,其次界面羅列的是優惠信息,最后才是影城卡營銷和賣小食的信息區域。新舊改版對比圖很好呈現出淘票票有效減少認知負擔所做的優化。

           

          3. 新用戶—提升年輕用戶群對品牌認知

          基于調研,淘票票的用戶群體趨近年輕化。改版中所制作情緒版、圖標、元素、字號、空間結構等視覺語言,注重和品牌元素的結合,產生出新的視覺語言與品牌形象,從而更加貼近年輕人的心理與喜好。

           

          4. 體驗度量

          根據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

          需求評審后,產品經理要干的6件事

          資深UI設計者

          有些產品經理會陷入這種誤區——需求評審做完了,自己就可以放羊不管了。而本文則認為需求評審完,產品經理還要做這六件事。

          需求評審完,產品經理還要干的6件事

          1. 確認需求評審的遺留問題并同步各方

          2. 制定詳細&責任到人的項目計劃

          3. 完成文案設計

          4. 按照項目計劃,協同各方,往前推進,關鍵環節必須與各方確認。關鍵環節包括:

          • 1)交互評審
          • 2)視覺評審
          • 3)推進聯調進度
          • 4)推進測試進度
          • 5)項目showcase
          • 6)項目發布

          5. 準備項目review

          6. 開始下個需求的方案設計和需求文檔準備

          這六件事具體怎么做?

          產品經理A:需求終于評審完了。有種放飛的感覺,可以休假,去浪了!

          產品經理B:你說真的嗎?為什么我評審完,還一直在被開發、測試、法務、財務窮追不舍?

          產品經理C:你說真的嗎?為什么我評審完,從來都是我在窮追不舍開發、測試、法務、財務?

          產品經理D:你們開玩笑的吧?就我這么慘!我不但要緊追不舍開發、法務、測試、法務、財務,還要被老板、被客戶窮追不舍。

          產品經理A、B、C:哥們,來講講,最喜歡聽慘兮兮的故事了。你的傷痛最能撫平我的內心。

          產品經理D:好吧。需求評審只講清楚了產品的骨架、細節,讓各方開始投資源。評審完,產品經理還有一堆事要推進,沒法放羊。

          要跟的事情主要有下面6件:

          1. 確認需求評審的遺留問題并同步各方

          需求評審總有一些遺留問題要進一步確認,而后同步給各方。我不是圣人,有時候有些問題或者細節沒想到,評審的時候,大家提出來了,得趕快明確。

          有時候需求評審中還有很大的bug沒想到,必須快速解決,要在開發沒動工前,都捋順。要不然變成需求變更,或者上線后被推倒重來,欲哭無淚。

          我這種求生欲這么強,也沒人罩著的,必須狠命把需求做到95分以上。100分也不太敢說,畢竟眾口難調。

          2. 制定詳細&責任到人的項目計劃

          產品經理還得身兼項目管理,項目管理從來都是事有輕重、事無巨細,難以假手他人。雖然我會盡可能調動大家的積極性,讓大家自驅管理項目,但還得牽扯不少精力。

          項目管理的關鍵點:明確項目計劃、關鍵節點、每個關鍵節點的負責人、驗收方案。

          比如什么時候交互評審、視覺評審、聯調、showcase、發布?分別是誰主要牽頭負責,哪些人需要參與。

          為了防止項目延期,每個節點都還得提前趕。真是操碎了心。

          3. 完成文案設計

          文案從來不是隨便寫寫。文案是和客戶交流的重要途徑,整幾個客戶看不懂的文案上去,后面客戶咨詢搞死人!

          文案設計除了客戶視角之外,也不是自己想怎么寫就怎么寫,還要和法務、客服團隊溝通。因為文案被客戶投訴的案例,又不是沒有。

          還有啊,我的產品有3種語言,簡體中文、繁體中文、英文,雖然每種語言有專門的文案設計師,但得跟他們說清楚,也要花不少時間、精力。

          當然,也有很多產品經理,不管文案這種小事??晌矣X得文案體現了產品經理最基本的素養,是產品的底子。

          4. 按照項目計劃,協同各方,往前推進,關鍵環節必須確認

          關鍵環節有6個:

          1)交互評審

          一般來說會由交互設計師發起,開發、測試、法務、財務都要參與。

          這樣能保證大家在說同一件事情,避免我要的是頭牛,結果開發給了頭驢。

          如果設計師項目參與度低,交互評審還得我自己上。哪里缺人,我就得到哪補坑。

          2)視覺評審

          一般來說,交互和視覺評審會一起。

          有時候項目很復雜,或者交互、視覺分工明確,那就得分開了。

          通常由視覺設計師發起。同樣,如果視覺設計師參與度低的話,我還是得補坑。

          3)推進聯調進度

          聯調是很容易扯皮的環節,大家來自不同域、不同職能團隊,各有各的小九九,所以得盯著,避免聯調成為坑王。

          4)推進測試進度

          進入到測試就意味著開發的七七八八了,當然有時候為了壓縮項目周期,開發、測試會階段性并行。

          除了測試進度,還得關注測試發現的問題,可能開發還得返工,也可能會發現需求評審中大家都沒有注意到的問題,得及時補救。

          5)showcase

          Showcase,說白了就是項目驗收。

          驗收前,得先列出來要驗收哪些內容,主流程、分支流程、逆向流程、重大關鍵節點。Showcase,也有可能發現新的問題,但基本上要避免在showcase環節發現重大問題,不然就得重大需求變更了。

          showcase有時候由測試主導,有時候沒資源,我得自己上。

          6)項目發布

          如果一路順利,就該發布項目了。

          項目發布計劃雖然也是之前就定好的,但要考慮的方方面面也還挺多的,可以看之前的文章《項目發布要考慮的因素》。

          總而言之,要和各方溝通好,要保證項目順利發布呦。

          5. 準備項目review

          項目終于上線了,可我得天天得看客戶反饋,看數據,跟客戶聊,跟業務聊,準備復盤review。

          產品狗似乎永遠都在準備復盤、復盤中、復盤后反思的路上。

          6. 開始下個需求的方案設計和需求文檔

          項目通常是并行的。在需求評審完后,我已經開始下一個需求的研究、設計了。

          開發資源從上一個需求釋放出來的時候,產品經理肯定得把下一個需求方案設計好,開始新的需求評審,妥妥的做好資源銜接。資源一旦釋放出來,下次想要資源,難上加難啊。

          產品也需要持續迭代,讓客戶感受到,我們的產品在成長、進步,給人希望。

          文章來源:人人都是產品經理

          目錄頁該如何設計?-8個常用的排版方式

          資深UI設計者

          目錄頁主要出現在一些篇幅比較長的書籍(畫冊)中,其位置一般被安排在扉頁之后,目錄雖然不是正文,卻概括了一本書的所有內容,具有便于讀者快速了解及查閱書本內容的作用,所以,即使說目錄頁是一本書中最重要的頁面也不為過。

          既然如此,那么目錄頁的設計自然也是十分重要,于是乎,蔥爺整理了 8 個很不錯的目錄設計技巧分享給大家。

          直線排版

          直線在目錄設計中的作用主要有以下三個。

          1. 連接

          即把每節內容的標題與其對應的頁碼連起來,這是比較常規的一種做法,可以使目錄更加清晰,重復排列的線條會形成統一、規整的美感。采用這種排版方式時,標題與頁碼一般會設置成兩端對齊,這樣的效果更加整潔、清晰。

          2. 創造形式

          對于一些文字內容比較少的目錄頁,如果像上面的例子一樣排列會顯得比較單調和小氣,所以可以借助直線來增加其趣味性和張力。由于內容不多,所以即使不嚴格對齊也不會影響閱讀。

          3. 信息區隔

          比如在下圖的例子中,直線起到了兩個信息區隔的作用,一是區隔頁碼與大標題;二是使七個大章節的內容獨立開來。

          加圖片

          這種形式也適合內容比較少的目錄頁,當有了圖片后,目錄頁似乎也變成了一個內頁版面,更加豐富、飽滿。圖片在目錄設計中主要有兩個用法。

          1. 概括章節的主要內容

          其功能與標題一樣,所以如果要使用這種方式,那么就需要為目錄中的每個大標題都搭配對應的圖片。

          2. 裝飾

          這里的圖片不是與標題一一對應的,其目的是為了消除純文字目錄的單調感,使版面更豐富、更好看。

          格子排版

          即將目錄中的元素(頁碼、標題、圖片)用表格的形式來排列,這么做也可以使信息更加清晰,更有秩序。由于這種做法在目錄設計中并不常見,所以顯得很特別。

          大頁碼

          頁碼或者序號是目錄頁必不可少的元素,章節細分比較多的目錄都會標明頁碼,而分類比較少的目錄一般會采用序列號,用來區分幾個大板塊。把頁碼或序號拉大并使用筆畫比較粗的字體,除了可以使其更明了、醒目以外,還可以增加版面的大小對比,提升設計感。

          把頁碼裁切一下,會更有設計感。

          分欄排版

          即把文字信息豎向等分成兩份或兩份以上,適用于文字比較多的版面,所以如果目錄頁的內容比較多時也適合分欄排版。由于每一欄的內容都嚴格對齊,且頁碼比較大,所以欄與欄之間即使錯位排列也不會影響閱讀。

          除了文字還可以用圖片來分欄。

          軸排版

          即把目錄信息沿著某條軸排列,這種形式在目錄設計中也比較少見,適用于內容比較少的目錄頁。軸的形式一般為豎軸和橫軸,排列的形式通常為錯位排版。

          上圖并不是以線為軸,而是以圖片和色塊為軸。

          網格排版

          我們都知道網格系統是畫冊設計的常用工具,可以有效組織版面信息,使其更有序、更整潔,所以內容比較多的目錄頁也可以用網格系統來排版,為了避免單調和無趣,通常會加入圖片元素。

          留白

          如果目錄的文字比較少,版面就容易顯得很空、很單調,常見的做法是增加圖片或者把文字拉大,其實主動保留大量空白也是一種解決辦法,比如把內容集中排列在版面的頂部、底部、左下角、右下角等位置,留出其他位置的空白。這么處理的版面雖然有一種不平衡感,但動感和設計感更強,大面積的留白還可以適當緩解眼睛的疲勞。

          總結

          無論做什么設計我們都要以它的最終目的為設計準則,由于目錄是為了方便瀏覽和查閱書本內容,所以設計時一定要注意視覺的整潔與信息的清晰,所以可以發現對齊和統一是最常被用到的兩個技巧。

          如何讓你的攝影更有張力?

          資深UI設計者

          如果經常聽評片會,許多朋友會聽過這樣一句話:「這樣拍會顯得畫面更有張力……」就攝影而言,我們認為張力,是讓一幅攝影作品在視覺上出效果的重要「內力」。此外「張力」還被廣泛應用在點評一段演唱,一幅畫,一次表演……我們都似乎能感受「張力」的意境,卻又似乎不能參透它的意思。

          如何理解「張力」?如何借此來提高我們的攝影感悟?下面我就試著做個粗淺的分析吧。

          追根溯源:「張力」到底是什么?

          關于「張力」有很多略顯深奧的解釋。我認為下面這種解釋較為通俗,同時與攝影有一些關聯:

          互補物、相反物和對立物之間的沖突或摩擦?!话愣摚彩谴嬖谥鴮α⒍窒嗷ヂ撓档牧α?、沖動或意義的地方,都存在著張力。(轉引自楊果〈隱藏的視點:中西「張力」范疇再辨〉,《江漢學術》,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

          存檔

          亚洲va欧美va天堂v国产综合