<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設計分享達人

          在做交互文檔之前,我們先要明白什么是交互文檔、為什么要做以及做了給誰看。


          一、什么是交互文檔 


          交互文檔,即交互設計說明文檔。英文 Design Requirement Document ,簡稱DRD。主要是用來承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。


          二、為什么需要交互文檔          


          有些人可能對文檔這種東西比較反感,尤其是從事工作不久的朋友。其實工作得越久,越會發現文檔的重要性,它可以幫助你理清思路,并記錄下來,便于回顧。


          工作上而言,有一份規范的文檔可以讓你的設計更有說服力,也易于工作對接,提高彼此之間的溝通效率。 


          三、交互文檔給誰看的   
             

          交互文檔其實要說給誰看,其實具體情況具體分析。有的公司老板也要盯交互文檔,以及甲方爸爸、運營部門同事,都有查看的可能。


          【產品經理】產品經理與交互設計師可能是溝通最多的人,產品經理主要在文檔中確認設計思路和業務流程,然后過一下頁面交互模塊。


          【視覺設計】UI設計師通常最關注的是頁面交互模塊,有著產品思維和體驗思維的設計師也會仔細看一下設計思路和產品背景,以便于自己更了解產品業務邏輯和用戶心理。


          【開發人員】前端的開發同事和UI設計師一樣,最關注頁面交互模塊,其他的作為提升會輔助了解。而后端開發人員關注更多的是業務邏輯、信息架構、操作流程等,這些都清晰了,他們才能輸出一份準確合格的開發文檔。


          【測試人員】因為測試人員是把關產品上線的一群人,所以各個模塊、步驟都應該去了解透徹,才能提出有效的bug。



          四、如何撰寫交互文檔 


          本文主要闡述以Axure軟件為撰寫工具,大家可以根據實際需求決定用什么軟件(Sketch、PPT、Word、PS、AI 等)。比如小需求可以用Sketch,快而。如果是要給甲方爸爸/大老板看的,使用PPT會讓他們更好理解。



          通常,一個比較基礎、規范的交互文檔(DRD)由:文檔封面、更新日志、文檔圖例、設計背景/思路、業務流程、頁面交互、全局通用說明、廢紙簍八部分組成。當然,這不是絕對,你可以根據你的實際工作需要進行增減。


          比如,如果是C端產品的話,用戶調研的結論、用戶畫像、用戶體驗地圖等等,都可以放進去給看的人一個參考。尤其是在如今這么關注用戶體驗、產品思維的一個大環境下,這些數據支撐很有力量。同時還可以幫助開發人員、界面設計人員培養產品思維、體驗思維,大家一起將產品變得更好。


          其次,交互文檔的整潔與美觀也很有必要。相信在過去幾年不少人有遇到過這樣的產品經理(兼交互),他們會輸出一些有時連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。當開發和界面設計的人提出質疑的時候還美其名曰線框不重要,重要的是里面的業務邏輯。。。其實用產品思維想,交互文檔就是交互設計師的產品,而看的人就是用戶,保持良好的可讀性,可謂至關重要。


          1、文檔封面

          交互文檔的封面如上圖,通常包括產品的名稱、Logo、版本號以及版本發布時間、所屬部門、對接負責人/對接人。


          2、更新日志

          我們都知道,在產品的迭代的過程中,需求/功能是會不斷調整的。而更新日志,就是為了迭代而生。它一般由修改日期、修改內容、修改人、版本號和備注組成。如果是新增的功能或模塊,建議是要加上鏈接可直接跳轉至新增內容的,如上圖。

           

          版本號也是同理,都應加上對應的版本鏈接,便于查看者回溯之前的內容,與當前的新版本形成對比。這一點對開發人員來說很重要,其次對于新同事深入理解產品也能起到很大的幫助。

           

          修改日期,通常是按時間倒序排列,查看起來會比較方便。



          3、文檔圖例


          文檔圖例,顧名思義就是關于此文檔的一些輔助說明,目的是為了讓讀者更好地理解文檔。如上圖的:操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。


          4、設計背景/思路

          設計背景,根據實際工作需要,放置一些關于思路整理、靈感來源的文檔。 


          比如用研報告、用戶畫像、競品分析報告、商業畫布等等。增強文檔的說服力,盡量讓每一個人都能理解到產品的戰略目標和業務邏輯。 


          因為我今年對接最久的是一個B端產品的項目,所以整理了一個產品畫像,僅供參考。


          5、業務流程


          業務流程圖,不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程,直接和業務掛鉤,可以說是產品的核心流程。


          例如淘寶APP,買家購物由始至終的流程就是它的業務流程。通常用泳道圖的形式展示,多數情況下是由產品經理繪制。


          以上是我所負責產品的核心業務的流程圖。因為是B端產品,涉及角色較多,針對3個代表性角色分別進行了繪制,僅供參考。(涉及到保密協議,所有關鍵詞都去掉了)


          6、頁面交互


          (1)信息架構

          信息架構屬于用戶體驗的結構層,是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代,否則不會大改。


          (2)權限說明

          如果是C端產品,權限這一塊相對簡單,比較好整理的。B端產品涉及角色眾多,可能要單獨拎出來分析整理。以上僅供參考,大家具體情況具體分析。若是功能很單一的產品,交互文檔中也可省去這個模塊。


          (3)操作流程圖

          產品操作流程圖就是通過圖形化的表達形式,闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時,會產生的一系列操作和反饋的圖標。

           

          注:不要將所有流程匯總在一個表里,或者展示在同一個頁面中,而應跟隨具體的操作或者功能模塊放置。時刻想著看文檔的人的感受,怎么易懂怎么來。 

          上圖是登錄、注冊和找回密碼的操作流程圖。僅供參考。模板源文件下載,后臺回復“交互”即可。


          (4)頁面線框圖

          頁面線框圖,是通過圖形化的表達形式,闡述產品在頁面層面的信息。包括: 


          【頁面標題】即每一個頁面的對應標題,一般就是導航欄標題


          【頁面內容】以黑白為主,保證信息規整易讀


          【交互說明】用標簽將其對應起來,包括交互邏輯、操作流程及反饋、元素狀態、字符限制、異常/特殊狀態、相關規則 等等


          【主流程線】只需要畫出主流程線即可,千萬不可太多太雜,時刻考慮讀者的感受

          以上是注冊/登錄的線框圖和詳細的交互說明。將重點內容用紅色標記,可以讓查看者一目了然更好理解文檔。


          7、全局通用說明


          全局通用說明,指整個產品可通用或者復用的元素。一般是邊做文檔邊整理出來的,方便自己或者接手該項目的設計師直接調用。其次,對開發及時封裝可復用控件也是有參考價值的。 


          (1)常用控件

          常用控件類似UIKit,通常將極具復用價值的控制整理在一起,方便及時調用。


          (2)復用界面

          顧名思義就是全局可復用的一些內頁,比如選擇聯系人、獨立搜索頁等。 


          (3)時間規范

          在做產品的第一步,就應該約定一個時間規范。不然各個端開發出來,你會發現iOS是斜杠的,Android是橫杠的,WEB是圓點的...真到了發現的時候再改,那真是彼此都是無比崩潰的。 


          (4)缺省頁匯總

          缺省頁一般包括加載失敗、加載中、網絡中斷和無數據的空頁面。為空頁可以按照模塊整理在一起,方便UI設計師最后一起設計缺省頁,保持風格統一。 


          8、廢紙簍 


          廢紙簍,被稱為是交互文檔的“后悔藥”。在需求不斷變動的情況下,改改改的過程中,請把你改過的稿子,放這里?。。∫驗楹芸赡茏詈筮€是用的第一個方案...(此刻內心有點絕望) 



          五、總結


          文檔、軟件只是工具,最重要的還是要落地、實行起來才能對產品有所幫助。所以在撰寫文檔的每時每刻,都應該站在“讀者”的角度思考,他們看的時候感受會是怎樣的,會覺得很難理解嗎?

          轉自-站酷

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

          全面的圖標設計類型和風格總結

          ui設計分享達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          圖標是 UI 設計中極為重要的一個環節,我們在做每個界面的設計幾乎都會涉及到圖標的表達,出色的圖標設計可以讓界面表達更加精致、有趣。圖標的設計往往也體現著設計師的基本功,因此除了日常多畫提升對圖標造型的把控力外,我們也更需要了解和學習圖標設計的趨勢類型,從而幫助我們提高在設計中的效率。

          基于自我學習的目的,平時在瀏覽一些設計網站時也會做相對應的收集。因此本文主要對于圖標設計的 「類型、風格」 進行了整理,以及自己對于每種圖標類型的思考。




          圖標的類型劃分

          設計網站上的圖標可以說是多種多樣,不同類型的圖標都有著獨特的魅力。例如,線性圖標簡潔輕量、面性圖標厚重直接,當然同一種類型的圖標也具有很多不同的表現形式。

          因此基于本人對圖標的理解,大致劃分為三類:線性、面性、線面結合。結合三種基礎類型的表達方式可以創造出各式各樣的表現形式。



          線性圖標

          使用輕量的線條勾勒的圖標,整體感受也趨向于精致、細致而具有銳度感。不同的線條表現具有不同的視覺感受,細線輕量、直線硬朗、曲線柔美。

          1. 線型圖標基礎分析及想法

          粗細對比

          粗細不同,圖標的力度和重量感就會有差異。粗線的圖標,視覺關注力來說會更加突出,但較于細線的圖標也會顯得粗壯、厚重。細線的圖標,精致、透氣、秀美。

          但在設計時需要依據 「整體的 UI 風格」 來決定線的粗細,而并非單純的考慮圖標的關注度,反而更需要考慮圖標與界面整體的平衡感。

          柔度對比

          直角與圓角決定了外形的感知和風格的走向,如下圖對比中看出,圓角越大圖形越趨向于可愛柔美(如下右圖),圓角越小則越直接、硬朗和陽剛(如下左圖)。因此剛或柔或中間值完全取決于早期對于整體風格的定調。




          繁簡對比

          除了輕量化和簡潔之外,圖標的識別性也是極為重要。如下左圖,「過度簡潔」 導致圖標失去該有的識別度而出現歧義,而下右圖的元素疊加使得圖標稍顯復雜。在繁與簡的平衡中,應該保持在不影響圖標識別度的情況下,最大限度的提升圖標的簡潔程度。




          特征的識別度

          除了簡潔程度,也需要考慮圖標該有的特征。例如下圖 「評論」 圖標的案例,當我把圖標中的「三個點」 去掉時,圖標依舊具有 「對話/評論」 的表意,而當我把下面的 「箭頭」 去掉保留 「三個點」 時,則會出現歧義,它可以被表意為 「更多」 的意思,因此在設計圖標時需要對于表意做精準把握,避免歧義出現。




          保持圖標的特征美感

          如下面的 「心形」 圖標,下左圖是我們具有普識性的圖標,與圓形組合之后依然保持著原有的形態美感。但我們不時也會看到第三種設計,整體外形雖然保持著愛心,但為了與整體風格「一致」 強行對外輪廓進行切割,與原圖形在美感上則稍微有些出入,這也是我們需要思考的關鍵點。




          組合型比例

          組合型的比例會影響到圖標的精致程度,準確的 「比例值」 能讓整體的造型趨向平衡,更具有美感。如下圖案例嘗試了兩組不同比例的效果,這里以圖標窄邊作為 「基準值」 進行嘗試。當內形為外形的 1 : 2 時(下圖2),圖標的整體視覺效果較為平衡;當大于 1 : 2 并接近 4 : 3 時,圖標內部結構會顯得過于飽滿。而小于 1 : 2 并接近 4 : 1 時(下圖3)則會產生稀疏不緊湊的效果。(這里的比例只是案例需要,實際設計以最終的視覺感知為準)



          2. 線性類型拓展

          基礎的理論,結合延展的應用,可以迸發出更多的創意想法。線形圖標也并非只有一種設計形態。通過以下案例,可以看看線型圖標設計類型的多樣性。

          極簡風格

          整體風格極為簡約,沒有多余的線條,通過線條還原圖形的本質,外形 「簡單」 卻具有很強的識別性,在視覺感知上輕松、干凈。

          極簡的風格圖標在于對圖形的把控,多一筆可能顯得復雜,少一筆可能影響識別程度。以上圖為例,圖標的組合元素保持在 2 個左右,整體較為干凈。

          實際應用:Instagram、Airbnb、Facebook、Twitte




          雙色

          相較于 「純色的圖標」 更具表現力,細節上也會更加豐富,形態感知上多了一層變化。結合顏色的疊加、對比、互補提升了圖標的層次感和豐富度。

          同色系:同為冷色系、暖色系或同一色系的表達形式。如下圖案例,以暗色為主色,亮色點綴提亮,使得圖標具有一種高光提亮的感覺。




          另一組案例是亮色主色結合暗色,整體圖標效果還算可以,但較亮的顏色沒有應用在圖標的關鍵特征上,使得圖標第一眼的感知稍有減弱。





          對比互補色:顏色跨度更大,層次更加分明。如下圖案例,紅色與藍色的撞色之后相比單色的圖標更加出彩和具有記憶點。





          實際案例:騰訊動漫我的頁面





          透明度變化

          本質上與上面一種為一個類型的設計,通過透明度的疊加和變化,提升圖標的層次感和空間感,降低圖標的壓迫性。




          實際案例:愛奇藝9宮格圖標




          漸變層次疊加

          漸變帶出了圖標的質感,結合「不同深度」或「不同飽和度」的變化,讓圖標更具有細節和層次。





          黑白+品牌色

          黑白色作為主色調,結合品牌色作為點綴色。與常規的黑白圖標相比,既產生了變化,同時兼顧了品牌色的透出。




          實際案例:大眾點評攻略頁面圖標





          線性漸變

          結合漸變的顏色,豐富了整個圖標的視覺表達,并提升了圖標的視覺沖擊力和設計感。案例結合黑白背景作為嘗試,白底:粗線比細線的視覺效果相對較好,漸變也能較為清晰地被表達;黑底:細線比粗線的視覺效果顯示得更加精致和具有銳度感。





          實際案例:網易考拉、NAVER




          一筆成形

          此類圖標在視覺表達上具有較高的線性流暢度和設計感,關注點在于整組圖標的 「開口起始點」 設定上需保持一致。例如,「從左到右」或「從右到左」形成一體化的連貫線條,開口起始點不一致會影響整組圖標的一致性,應用在頁面時也會顯得雜亂。



          斷點圖標

          與上一種較為類似,但沒有連貫度的要求。在線形圖標基礎上面,尋找一個缺口來打破 「全包邊圖標」 的沉悶感,使得圖標具有透氣性和線條的變化。缺口的位置盡量保持統一的方向及大小,另外需要控制開口個數避免過多導致圖標外形過于零碎。




          實際案例:騰訊體育、京東



          面性圖標

          面性圖標比線性圖標更能表達出圖標的力量感和重量感,比線性圖標會更加容易吸引用戶目光。在識別度上,面性圖標更加依賴于外輪廓的清晰度,因此在設計時對于外形的打磨是重中之重,清晰的外輪廓可以幫助提高識別度。


          1. 面型圖標基礎分析及想法

          輪廓對比

          輪廓的差異會體現出不同的氣質,如下圖的左邊和右邊的區別,一個氣質較為直接硬朗,另一個則較為柔美可愛。流暢的外形可以讓面形圖標的整體更加簡潔、規整,如下圖中間的圖標在輪廓的處理上則顯得比較碎,整體外輪廓造型的連貫度有所欠缺。





          鏤空對比

          適當的鏤空除了補充了圖形的識別度之外,還提升了面性圖標的設計細節。另外需要控制好鏤空部分與整體的外形比例,過小或過大都可能影響圖標的平衡感。如下圖的中間和右邊,鏤空過小對圖標的辨識度并沒有多大作用,沒有鏤空則少了一些透氣感。




          形體對比

          形態上的差異也會具有不一樣的視覺感知。以「星」和「心」為案例,單獨形體與組合之后的形體相比視覺感知更直觀些,而組合形的圖標相對會精致一些,多了一些層次。在日常設計中的經驗是:越小的圖標形體應該越簡單,因此建議單體出現較好;若圖標的尺寸足夠大時可采用組合型的設計,補充圖標的細節。



          繁簡對比

          設計面性圖標時,對于多余細節的管理也很重要。隨著細節的增加,塊面切割過多,會使得整體圖標變得過于零碎(如下右圖)。保持簡約的設計提高圖標的識別度,在關鍵的特征細節上做補充(如下中間圖的相機閃光燈)。


          2. 面性圖標類型拓展

          面性圖標在設計時也可以結合各種不同的表達方式,來提升圖標的質感和創意,而非只是簡單的填充顏色。

          單色面+點綴色

          整體的外形使用統一的顏色,結合圖標的屬性感知使用不同的顏色進行點綴,通過點綴色提亮了圖標的視覺效果,達到既統一又具有差異化。





          多彩雙色

          通過對比色、鄰近色的搭配來營造整體的圖標氛圍,提升了圖標的層次和豐富度,雙色的表達也增添了圖形的趣味性。在日常使用的 APP 中極為常見,簡單且容易出效果。




          微質感漸變

          微弱的漸變提升了圖標的質感。漸變的方向會影響整體圖標的視覺效果,因此可以根據不同設計的需要進行調整。如下圖案例:




          實際案例:全民K歌





          透明度/灰度變化

          透明度/灰度的變化,讓原來單色的圖標變得更加具有層次感和空間感,設計細節更加豐富,降低了單色面性圖標的厚重感。





          實際案例:企鵝FM我的頁面




          透明度變化+漸變

          漸變的設計提升了面性圖標的質感,從顏色上具有一定的豐富度。在漸變的基礎上對組合型做透明度差異化,使得圖標具有了層次感。




          透明疊加的圖標+漸變的背景

          此類圖標常常被應用在 UI 界面中的列表或者頂部入口的位置。





          實際案例:全民K歌點歌頁面





          顏色疊加穿透

          圖標透明疊加之后產生了交錯的負形,疊加出第三個面。雖然整體設計依然保持著扁平化,但卻多了一份層次感,并且增加了圖標的細節。




          實際案例:百度網盤





          漸變層次疊加

          整體的效果與透明度變化的圖標較為接近,通過漸變的深淺變化,使得形狀的銜接處出現了明暗對比,因此圖標也具有了厚度感和層次感。





          實際案例:NAVER、掌上生活





          高斯模糊

          此類圖標基本沒有在 APP 中看到,與「透明度變化」或「顏色疊加」相比都更具層次感和空間感,同時圖標也具有較強的設計感。





          線面結合

          結合了線性和面性的優點,既保持了面性的重量感,同時具有線性的精致、細膩。因此在設計時可以根據圖標具體想要表達的感覺對線面比例進行把控,不同比例可以呈現出不同的視覺感知。



          1. 線面結合圖標的基礎分析及想法

          線面比例

          線面比例的差異,圖形呈現出來的張力也會有不同的感受?;谥虚g填充的圖標形態嘗試了三種不同的比例,從下圖中可以看出,當填充與外形窄邊比為 1 : 3 時(左圖)圖標呈現往內收的感覺;填充與外形窄邊比為 1 : 2 時(中間)圖標整體較為平衡;當填充與外形窄邊比為 2 : 3(大于1:2)時(右圖)整體具有外擴趨勢。




          組合形式

          線面可以通過不同的組合形式進行繪制?;诓煌慕M合形態可以設計出多種多樣的線面圖標,不同的組合形式會體現出不同的設計風格,因此在設計時盡量多發散思考,尋找出適合你的組合方式。




          繁簡對比

          線面結合本身就由兩種形式組合,因此在設計的時候更需要對整體造型進行把控,單體(線和面)造型必須保持較高的簡潔程度,這樣最終組合形成的圖標才不會過于復雜(左圖),若本身形態過于復雜,則會降低圖標的辨識度和視覺美觀度。


          2. 線面結合圖標類型拓展

          線面結合的圖標集合了線性和面性的優點,在設計方式上也繼承了兩者的優點。設計方式也是基于以上兩種的結合,因此可以結合出更多設計的可能性。

          黑白線+面性品牌色

          與「線性+品牌色」的做法較為接近,統一的線性顏色疊加品牌色的透出。




          實際案例:好好住、soul




          線面雙色

          基于線面的基礎上,在線和面的顏色上做差異。具體做法與線性或面性的雙色接近。




          線面結合-陰陽

          線和面的結合按 50% 的比例進行設計,依據上下、左右、居中等基礎方式的結構化設計,整體圖標的視覺效果較為跳躍,非常規。



          線面雙色+錯位

          在雙色圖標的基礎上,線和面按照統一的 「百分比」 進行縮放,并進行透視和位移的設計,整體呈現出來的是一種交錯疊加的視覺效果,相比普通的線面雙色更加豐富。




          實際案例:閑魚底部tab、臉球底部tab




          線面錯位+漸變

          基于上一種風格,對面或者線的顏色進行漸變設計,豐富了圖標的質感和顏色更加細膩。




          線面透明度變化

          與「線面透明度變化」的設計方式大致一樣。如下圖案例,「弱線強面」的第一識別度較弱,而「弱面強線」 的外形識別度較高,也更符合圖標的表達。




          實際案例:新浪微博、騰訊新聞

          基于三種基礎的類型表達,可以拓展出多種多樣的設計形式。除了以上的案例之外,還收集了一些其他的設計。





          線面結合 – 插畫

          整體比較偏向插圖的感覺,細節和元素較多,常見于一些 APP 的空白頁設計。




          線面結合 – 卡通插畫

          整體感覺比較可愛、卡通、二次元,常見于一些二次元或漫畫類的 APP。





          面性 – 漸變強質感

          整體風格的光影質感會比較強烈,常在一些活動運營或小游戲的界面出現。




          面性 – 扁平寫實

          整體感覺比較扁平,細節的豐富度與現實感知接近。





          線面+漸變插畫

          整體風格比較偏向絢麗多彩的顏色風格,質感和細節較為豐富。


          寫實風格




          3D質感圖標

          由于 C4D 的制作成本相對較高,目前較少在常規的 APP 中看到。但 3D 作為一個主流的設計趨勢,在時間和能力允許的情況下需要多做這方面的嘗試。




          等距的線面結合

          等距的設計,讓原本線面的圖標豐富了層次,并具有立體透視的感覺。




          除了以上這些之外,我們在實際場景中也會發現一些較為特別的圖標設計。

          Facebook 更多頁面的列表圖標

          整體風格偏向插畫風+漸變質感。由于更多的頁面為純列表的設計,因此整個頁面在圖標的設計上做了很大膽的嘗試,與常規的單色圖標相比更具有吸引力。為了區別不同的業務,系統性質的功能圖標做了色調的區分。




          APP Store 游戲和新APP界面下的類別列表圖標

          整體為具象化扁平風格的設計表達,圖標的顏色還原了最基本的現實感知。




          iOS 系統辦公類軟件的起始頁面圖標

          整體風格比較偏商務簡約,具象的圖形表達+輕微的漸變質感。




          QQ手機版中延展的功能圖標

          整體風格偏向輕寫實+微弱漸變。每個圖標都具有豐富的細節表達,色調方面基于業務屬性結合品牌色進行了區分,整體既統一又具有差異化。




          大眾點評頂部入口的圖標

          整體風格偏向寫實+強漸變+炫光感,每個圖標都具有豐富的細節表達。




          旅法師營地

          游戲、二次元類的 APP,因此在圖標的設計上也偏向細節較為豐富的插畫風格。




          嗶哩嗶哩動漫

          圖標風格偏向卡通插畫,選中態與默認態的設計較為巧妙。



          總結

          本文的重點在于透過這些設計類型或者技法的了解,幫助我們在日常設計中提升輸出效率。圖標雖然作為 UI 設計的基礎,卻有很深的學問,精致的圖標更是可以起到點睛的作用,提升界面的質感和氛圍。

          圖標的種類遠遠不止本文所提到的這些內容,但是萬變不離其宗,都是「線性、面性、線面結合」 再結合 「透明度、漸變、顏色疊加、質感、多維空間」等等的表達方式而設計出來的。

          我們除了需要掌握這些內容之外,還需要提升圖標設計的造型能力,更需要日積月累的練習和思考,從量到質的變化。

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


          破熵而行-驅動產品增長

          ui設計分享達人

          本文是基于我對《破繭成蝶2》讀后的觀點和反思,自己的項目經歷跟作者相似,也是為了更好的總結這兩年對產品、對設計的心得。

          本文篇幅較長,請耐心閱讀。主要是總結一個完善的體系,便于大家理清自己的設計思路和自我定位。


          閱讀本文你可以獲得什么?

          一、前言——擁抱變化,破熵而行

          二、產品設計師的思維轉變

          三、對設計師的能力模型

          四、設計師該關注的數據

          五、產品周期影響設計策略

          六、設計師順勢而為,自我定位 



          一、前言——擁抱變化,破熵而行

          在人口紅利、流量紅利、資本紅利逐漸消退的互聯網下半場,從“買流量、買用戶”為代表的粗放式發展進入了穩扎穩打的精細化時代,需要考慮在有限的資源及能力的基礎上精打細算、量入為出,讓產品可持續地發展下去。


          互聯網產品正在從標準化、大眾化轉向個性化。針對垂直領域或細分用戶群體的產品越來越有市場。戰略層也需要抽絲剝繭,拋去形式注重產品的本質。比如一些下沉型電商業務,紅包和會員都只是一種形式,其實本質還是用戶追求“性價比”有利可圖,所以一旦用戶的“便宜需求”難以達到,還是會引發數據的下降,這就需要大量可持續資本投入維持。見利期的變長,傳統電商行業的鋒芒也被新零售掩蓋,投資人也不斷轉移更創新可收的項目。所以真正的留存是可持續發展的,且需要根據企業自己的實際情況,在戰略上和運營上,有一個人無我有的本質上的創新點(核心競爭力),而非形式上的創新。

          Image title


          在日新月異,變化百態的互聯網下半場,創業者和產品設計工作者都需要改變自己的想法,擁抱變化破熵而行,保持自己戰斗力,用更科學客觀的方法來提升產品價值。



          二、產品設計師的思維轉變

          產品設計師的重要標志是“以產品為中心”的思維及覺悟,即能打破本位主義,站在產品的角度,從整個項目閉環上協同解決問題,提升產品價值。設計師的角度理解,就是打開自身格局,擴展上下游的知識,通過自己的綜合能力助力于業務。在此過程中職能會有跨界,比如我會提出驗證數據的方法,比如ABtest,從業務角度推設計可以通過哪些數據進行提升,然后做出不同方案進行評審,推動項目實施落地。


          產品設計者可以由產品經理,UX,UI擔當或轉變,我更傾向是全棧的UX,通過思想認知的轉變,職能界線的打破來扮演這個角色。自己也是這樣努力的在轉型。得益于公司的開放包容,這兩年我還是能承擔起這樣的角色,建立組織,帶領團隊,通過設計來提升產品價值。對于產品設計師,第一個需要改變的就是產品設計思維。



          2.1從“問題驅動”到“價值驅動”

          Image title


          2.2 始終貫徹精益思維


          互聯網寒冬,連阿里都要把錢花在刀刃上。阿里8月15日發布的財報上,雖然新零售收入水平同步增速高達134%,高于上一季度132%,成阿里本季營收增長引擎,但是阿里本財季對盒馬新零售業務投入仍然十分謹慎。最近兩個季度盒馬開始由原先的大門店業態轉向更多元、成本更低的小業態的轉型期,本財季內凈增門店僅為15家。所以需要我們始終貫穿精益思維去做產品。


          精益思想(Lean Thinking)源于20世紀80年代日本豐田發明的精益生產(Lean Production)方式,精益生產方式造成日本汽車的質量與成本優勢,曾經壓得美國汽車抬不起頭。世界汽車工業重心已向日本傾斜。精益思想的核心就是(消除浪費)以越來越少的投入——較少的人力、較少的設備、較短的時間和較小的場地創造出盡可能多的價值;同時也越來越接近用戶,提供他們確實要的東西。


          那么要做到產品上的精益思維,一方面要貫徹“以提升產品價值為目標”并用數據驗證;另一方面建議先用較小成本在小渠道驗證,然后在擴大投入。

          Image title



          整個產品團隊,不管是產品負責人、產品經理、設計、運營、開發都需要緊密聯合在一起,為提升產品價值而努力。為什么這么說,其實本質上大家都是為了業務好,但是每個人卻扛著不一樣的KPI,產品經理有業務指標,運營有運營指標,設計師也有自己的設計價值觀。如果大家都只為了自己,產品和運營會唯業務指標做導向,典型的就是引入大量無法留存的流量,耗費資源,最終對整個產品長期發展并沒有太多價值。對設計師來說,我見過很多設計都很有偏向性,要么就是一味追求好看,感覺業務擋了自己發揮才能,要么一味分析競品和交互,卻給不出有效、有價值的解決方案。其實都不是站在產品價值上看問題,更希望是自己能交出一份滿意的答卷。我自己也在一個電商摸索期犯過類似錯誤,無法忍受一個沒有細節的產品,過多追求設計質量,而其實產品初期,負責人只想著能快速迭代,找到活下去的出路。



          2.3以始為終打造數據閉環 


          數據閉環就是從你的產品價值目標來拆分你的量化目標,通過設計上線等驗證數據,形成閉環,然后循環優化的這個過程。需要從傳統的“問題驅動”轉變成“價值驅動”,因為解決問題是難以被價值量化的,整個業務發展過程中也會出現很多產品問題需要被優化,我們把“提升產品價值”作為目標就形成了“以終為始”的數據閉環。其實現在大部分企業都是以目標驅動業務的,拆分目標,變成顆粒度目標數據再進行逐步達成,這個過程不是說不去“發現問題-解決問題”,而是需要知道工作要務,“重要緊急”的先做,“重要不緊急”的長期計劃實行,至于用戶體驗上的東西也是要有節奏的去優化。

          Image title




          三、對設計師的能力模型


          對設計師的能力模型一直在提出不同的更高要求,無論是哪個大咖提出來的理論似乎都是非常的正確和所需要的,導致很多設計師的恐慌,我是不是要被淘汰了。

          Image title

          Image title


          其實還是要抓住本質,因人而異看待。設計的能力分布模型,大概分為 “I”型 、“一”型、“T”型。


          “I”型為單一型,傳統對設計師的定義就是單一的,領域分的比較細。單一型主要看深度,深度達到一定程度可以成為專家,但是如果淺薄又單一很容易被淘汰。


          “一”型為廣博型,廣博型最忌諱的就是成為什么都會卻什么都不精的“萬金油”,看似什么都懂,結果做起來什么都廢。


          新型模式“T”型,“T”型既有較深的專業知識,又有廣博的知識面,這類是集深與博于一身的人才,也是市面上最有市場的一類。


          綜合性人才都是需要一個長期由深度到廣度,再由廣度到深度循環提升的過程,在此過程中也很容易迷失,跟“I”型對比,無法通過有限的時間都提升上去,那么需要掌握一定的方法,認識自我逐步提高。

          Image title



          3.1、強大扎實的專業能力——知行合一 廣而不范


          為什么強調專業能力,《破2》里面提到,思維是1,技能是0,話是沒有錯,但是80%以上的設計師還是靠技能在吃飯。有的東西你想得再好無法落地,也是無濟于事。所以一個專業合格的設計師必須有強大扎實的專業能力,當然思維是內驅力,如果你的專業很出色,估計內核也不會差。


          首先要有一個專業優勢判斷,然后強化自己的優勢,再根據橫向模型去擴展對自己工作最優幫助的繼續加強,做到廣而不范。比如你是一個ui設計師,你要保證自己的視覺能力,然后去擴展交互能力,其次再去強化動效,體驗等等。再比如你是一個交互設計要保證自己對交互的精通,然后提高用研、數分能力,再去擴展其他能力。還有要做到知行合一,其實大部分我們都在通過不同的學習提升自己的能力,但是要把理論性,縹緲性的知識概念落實到自己的工作中去,努力去實踐,再復盤總結不斷提升自己的實操能力。比如你學了插畫,你的項目上能不能用上;你競品分析了更好的體驗,能不要也變相用到自己的項目里;你新學了一些分析原理,能不能用同樣的思維來分析自己的項目等等。



          3.2、保障基礎軟實力 —— 一顆強大正能量的心


          心力、腦力、體力,都要保障,尤其是互聯網年輕化后,體力也非常重要,京東就直接把不能加班的員工全開了,多么痛的領悟。那么對于產品設計師其實更關鍵的是心力和腦力,越是高階設計師,思維能力、洞察能力越是重要。無論是ui、ue、還是產品設計師我覺得都需要有強大的自我驅動能力,打破本位主義,不斷擴展自己的專業素質,才能更好的融合于業務。阿里提出:人才是聰明的,的確很多人忽略了先天的差距,事實上同樣的努力,不一樣的天分,總還是有區別的,有的人適合做小兵,有的人適合做將軍,但是你可以保證的是心態,心態里我總結了兩個我覺得非常重要的點,一個就是皮實、一個就是積極,就是有一顆強大而正能量的心!



          3.3、先讓自己變得足夠優秀再考慮做管理


          對于走技能線還是走管理崗,很多人會想的很多。其實先讓自己變得足夠優秀,不斷提升,一切自然水到渠成。領導者或許需要天分,管理者是每個人都可以成為的,且有一些理論和工具可以支撐的,所以很多團隊會內部提拔,因為培養起來并不難。只要你足夠優秀,還是很有希望做管理,相反過早做管理,自己的基石沒打好,管理起來也會比較艱難。有興趣的人可以去聽一下喜馬拉雅上的《可復制的領導力》。如果你勵志要走向管理層,也可以根據阿里的縱向能力模型對號入座,不斷提升,不過很多時候機遇也很重要。



          四、設計師該關心的常規數據


          想要驅動產品增長必須要對數據有所了解,來幫助我們產出更貼近用戶行為的設計,同時需要了解數據產生的過程和基礎工具。最基礎的就是產品提出數據,讓開發進行埋點,此過程中設計也可以提出自己想要關心的數據點。公司有后臺可以直接觀測數據,現在也像GrowingIO數據分析產品無需在網站或app中埋點,即可獲取并分析全面、實時的用戶行為數據,需要觀察數據可以直接去后臺關注,也可以讓產品經理或者數據分析師給你拉數據。


          頁面瀏覽量(PV)

          用戶每1次對網站中的每個網頁訪問(成功訪問/進入)均被記錄1次。用戶對同一頁面的多次訪問,訪問量累計。在一定統計周期內用戶每次刷新網頁1次也被計算1次。理論上PV與來訪者數量成正比,但是它不能精準決定頁面的真實訪問數,比如同一個IP地址通過不斷的刷新頁面,也可以制造出非常高的PV。


          獨立訪客人數(UV)

          訪問網站的一臺電腦客戶端為一個訪客。00:00~24:00內相同的客戶端只被計算一次。使用獨立用戶作為統計量,可以更加精準的了解一個時間段內,實際上有多少個訪問者來到了相應的頁面。


          用戶訪問次數(VV)

          當用戶完成瀏覽并退出所有頁面就算完成了一次訪問,再次打開瀏覽時,VV數+1。VV同時也是視頻播放次數(Video View)的簡稱。


          跳出率(BR)

          表示用戶來到網站后,沒有進行操作就直接離開的比例,代表著陸頁面(訪客進入網站的第一個頁面)是否對用戶有吸引力,常用的計算方式是落地頁面的訪問量除以總訪量。


          退出率(GA )

          針對網站內某一個特定的頁面而言,退出率是衡量從這個頁面退出網站的比例,通過一個頁面的退出次數除以訪問次數。退出率反映了網站對用戶的吸引力,如果退出百分比很高,說明用戶僅瀏覽了少量的頁面便離開了,因此需要改善網站的內容來吸引用戶,解決用戶的內容訴求。


          平均訪問時長(AAT )

          指在特定統計時間段內,瀏覽網站的一個頁面或整個網站時,用戶所停留的總時間除以該頁面或整個網站的訪問次數的比例。該數據是分析用戶粘性的重要指標之一,也可以側面反映出網站的用戶體驗。平均訪問時長越短,說明網站對用戶的吸引力越差。


          轉化率(CR )

          在一個統計周期內,完成轉化行為的次數占推廣信息總點擊次數的比率。常用的是登錄注冊的新流量轉化率和產生實際支付的轉化率。轉化率是產品盈利的重要指標之一,它直接反映了產品的盈利能力。提升轉化是提升產品價值的重要性指標,一般用A/Btest去檢驗更優方案來提升轉化率。


          回購率(RR)

          指用戶對商品或者服務的重復購買次數(回頭客),是針對有購買功能的產品,回購率越高,用戶粘性越高。


          新增用戶

          既安裝應用后,首次成功啟動產品的用戶,按照統計跨度不同分為日新增(DNU)、周新增(WNU)、月新增(MNU)。新增用戶量指標主要是衡量營銷推廣渠道效果的最基礎指標。新增用戶占活躍用戶的比例也可以用來用于衡量產品健康程度。如果某產品新用戶占比過高,那說明該產品的活躍是靠推廣得來,這種情況非常有必要關注,尤其是新增用戶的留存率情況,這種情況留存率低對產品來說也非常危險,視為不可持續發展的流量。


          活躍用戶

          既在特定的統計周期內,成功啟動過產品的用戶。除此之外,我們還可以將活躍用戶定義為某統計周期內操作過產品核心功能的用戶(按照設備去重統計)。

          活躍用戶是衡量產品用戶規模的重要指標,和新增用戶相輔相成。


          DAU(日活):某個自然日內成功啟動過應用的用戶,該日內同一個設備多次啟動只記一個活躍用戶;

          WAU(周活):某個自然周內成功啟動過應用的用戶,該周內同一個設備多次啟動只記一個活躍用戶。這個指標是為了查看用戶的類型結構,如輕度用戶、中度用戶、重度用戶等;

          MAU(月活):某個自然月內成功啟動過應用的用戶,該月內同一個設備多次啟動只記一個活躍用戶。這個指標一般用來衡量被服務的用戶粘性以及服務的衰退周期。


          留存率

          留存率是驗證用戶粘性的關鍵指標,既在某一統計時段內的新增用戶數中再經過一段時間后仍啟動該應用的用戶比例(留存率=留存用戶/新增用戶*100%)。統計留存用戶的顆粒度有:
          自然日:包括1天后、2天后、3天后、4天后、5天后、6天后、7天后、14天后和30天后
          自然周:包括1周后、2周后、3周后、4周后、5周后、6周后、7周后、8周后、9周后......
          自然月:包括1月后、2月后、3月后、4月后、5月后、6月后、7月后、8月后、9月后......
          自然日的留存中主要關注(次日留存、7日留存、30日留存并觀察留存率的衰減程度。一般來說,留存率低于20%會是一個比較危險的信號。)

          日留存率:快速判斷App粘性
          日留存率:可以很快的幫助我們判斷 App 的粘性到底強不強。我們可以通過日留存率的數值來判斷一個 App 的質量,通常這個數字如果達到了 40% 就表示產品非常優秀了。我們可以結合產品的新手引導設計和新用戶轉化路徑來分析用戶的流失原因,通過不斷的修改和調整來降低用戶流失,提升次日留存率。

          周留存率:判斷App用戶忠誠度
          周留存率:我們可以通過周留存率來判斷一個用戶的忠誠度,在一周的時間段里,用戶通常會經歷一個完整的使用和體驗周期,如果在這個階段用戶能夠留下來,就有可能成為忠誠度較高的用戶。

          月留存率:了解App版本迭代效果
          月留存率:通常移動 App 的迭代周期為 2 - 4 周一個版本,所以月留存率是能夠反映出一個版本的用戶留存情況,一個版本的更新,總是會或多或少的影響用戶的體驗,所以通過比較月留存率能夠判斷出每個版本更新是否對用戶有影響。


          流失率

          指那些曾經使用過產品或服務,由于各種原因不再使用產品或服務的用戶。用戶流失率=某段時間內不再啟動應用的用戶/某段時間內總計的用戶量。流失率和留存率有緊密關聯,流失率高既留存率低,但活躍度不一定高,因此需要綜合分析。也是重點關注次日、7日、30日的流失率。對于流失用戶的界定依照產品服務的不同而標準不同。社交類產品用戶幾乎每天登錄查看,可能用戶未登錄超過1個月,我們就可以認為已經流失了。而電商類產品用戶可能3個月未登錄或者半年內沒有任何購買行為可以被認定是流失了,所以不是每個產品都有固定的流失期限,而是根據產品屬性而判斷。


          一次性用戶

          既新增日后再也沒有啟動過應用的用戶。一次性用戶是關鍵的營銷指標,和判斷無效用戶的標準,從中把目標用戶過濾出來。一般劃定的界限是至少超過7天時間才能夠定義是否是一次性用戶。


          使用時長

          既統計時間段內,某個設備從啟動應用到結束使用的總計時長。一般按照人均使用時長、次均使用時長、單次使用時長進行分析,衡量用戶產品著陸的粘性,也是衡量活躍度,產品質量的參考依據。


          啟動次數

          既統計時間段內,用戶打開應用的次數。重點關注人均啟動次數,結合使用時長可進行分析。用戶主動關閉應用或應用進入后臺超過30s,再返回或打開應用時,則統計為兩次啟動,啟動次數主要看待頻數分布情況。


          使用間隔

          既用戶上次使用應用的時間與再次使用時間的時間差。使用頻數分布,觀察應用對于用戶的粘性,以及運營內容的深度。雖然是使用間隔,但是通過計算同一設備,先后兩次啟動的時間差,來完成使用間隔統計,充分考慮應用周期性和碎片化使用的特征。


          常規數據基本就這些,值得思考的是不同類型的產品,定義每個數據的具體量是不同的,而且產品周期中的不同階段關注的主要數據指標也會有不同側重點。



          五、產品周期影響設計策略 


          產品階段就是產品生命周期,可分為探索期、成長期、成熟期、衰退期,每個階段的設計策略和工作權重都有所不同。雖然每個階段側重點不同,凡是還是需要辯證看待結合實踐,比如大廠的產品初期起點較高,有大流量的引流和背后大數據支撐,所以各種方式都沒有太大的限制,根據業務,資源不同來根據產品用方法。

          Image title


          5.1探索期(產品初創期)


          目標:掌控產品方向(活下去)

          關注:用戶價值

          用戶:假設用戶

          策略:最小成本驗證產品方向

          方法:假設的用戶畫像、產品故事地圖、設計沖刺法、訪談、用戶研究(定性分析)

          關注數據指標:推薦意愿/新增用戶數/滿意度

          品牌:不急于建立

          Image title



          5.1.1、通過訪談、調研,初步建立用戶畫像,抽象假象用戶,提煉關鍵點。


          用戶畫像是在大數據時代背景下,用戶信息充斥在網絡中,將用戶的每個具體信息抽象成標簽,利用這些標簽將用戶形象具體化,從而為用戶提供有針對性的服務。


          產品摸索期我所定義的目標用戶其實并不準確,而是假象用戶,此階段的概念用戶一直隨著產品方向的改變而改變,所以無法確立明確針對性的用戶畫像信息,但是我們應該先確定一個大概的目標用戶定性的去分析,區分用戶角色,挖掘不同角色的痛點,然后找到解決問題的切入點。

          Image title


          5.1.2、利用用戶診斷法建立產品假設,并進行價值評估,明確產品方向。

          Image title


          5.1.3、利用用戶故事地圖篩選核心任務及對應功能


          用戶故事地圖可以用小會議的形式展開,就是讓所有參與者一起用便簽,一張一個動作,從左至右按照時間線,描繪用戶在產品使用場景下所發生的所有用戶行為。同一時間發生的,就寫在同一位置的下方;出現同一場景不同可能的動作時,可能會形成不同的分支動作;直到重回主線或者結束支線。最后關鍵還是總結用戶痛點和產品核心的功能點。

          Image title

          Image title



          5.1.4、貫穿最小成本原則,最小成本試錯——MVP和設計沖刺法


          最小可行產品(MVP)是指可以產生預期成果的最小產品發布,對于迭代產品來說,又可以講最小可行方案:最小可行方案是指可以產生預期成果的最小發布方案。


          設計沖刺法的本質理念跟MVP還是一致的,只不過所用成本更小。設計沖刺法特點:參與人員較少且有最終決策權;閉關沖刺使用白板隨時記錄;適用于風險高、時間緊、起步難的情況。


          MVP是最小可行方案進行發布驗證,而設計沖刺是更短時間產生一個頭腦風暴的真實原型,進行真人測試,這個過程并沒有真正設計一款產品,而是通過設計方式做了一次早起用戶調研,并獲得相對有驗證性的結果,避免真實上線效果不好對用戶造成的負面影響。


          其實市面上大部分還是用的MVP,因為實際上用設計沖刺,一個是對設計人員的要求較高,二是驗證的結果由于測試范圍的限制不一定與市場反應一致。與做一個小產品來說,現在更流行保險的辦法可以做一個小程序,或者幾個小程序進行方案對比,大流量下好乘涼,小程序的開發成本,用戶引入成本更低。



          5.1.5、定性為主,不斷試錯中掌控產品方向


          船小才好調頭,對于產品來說如果本身戰略層出現問題,后續投入越多的資本越難收場,用戶量不上不下,用戶粘性不高,結果資金不夠了,用之雞肋棄之可惜,再轉方向還是比較困難。尤其是用戶對產品建立一定認知后,重新調整大方向,基本等于刷新用戶流。



          5.2成長期(產品高速增長期)


          目標:鞏固差異化的產品定位(活得好)

          關注:產品核心競爭力

          用戶:目標用戶

          策略:大膽創新鞏固差異化的產品定位

          方法:提煉用戶畫像不斷校驗、用戶體驗地圖、設計接力法(定性+定量)

          關注數據指標:新增用戶數/留存率/復購率/活躍度

          品牌:建立有創意且能落地的品牌,加深用戶認知,占領用戶心智

          Image title


          5.2.1、用戶校驗,確立產品定位


          產品成長期用戶大量涌盡,掌握一定數據和掌控產品方向后可以通過數據分析或用戶調研,來看實際用戶特征和之前假設的用戶人群特征是否符合。集中精力服務好最重要的用戶群體,定性挖掘、定量驗證的思路去完成用戶畫像。


          可針對目標用戶進行調研和深度訪談,從用戶選擇產品最關鍵因素提煉產品目前的核心吸引點。用戶的關心點也要跟產品本身的當前定位做對比,看用戶接受到的點是否是產品讓他們感受到的點,感受不到又是什么原因,不斷提煉核心競爭點的優勢。

          Image title


          成長期需要確認產品的定位,就是差異化的產品方向,即差異化的目標用戶群體(價值排序)、差異化的產品及服務(競爭優勢)、差異化的產品價值(核心優勢)。


          價值排序:通過了解用戶特征,明確用戶分類及相關利益群體,然后明確把誰放在第一位。在實際產品設計過程中,我們也可以用價值排序,來設計產品功能和交互體驗,比如平臺收費是針對買方還是賣方。


          競爭策略:避實就虛地找到競爭對手的盲區或自己的優勢所在,為用戶提供差異化服務。競爭策略主要依賴高層的洞見和判斷,如果你出產品和競爭對手沒有本質差異,那就考慮是否可以服務與不同種類的人群或者能提供不一樣的價值。比如同樣是做電商,你的質量、價格、物流、種類是不是有優勢。



          5.2.2、確立增長指標


          增長指標是對應于產品差異化定位的可量化指標。增長指標要符合:可成長性,客觀性,有方向性。避免主觀,虛榮的指標,最常見的就是過分關注獲客拉新指標,留存不足,及前后導向不一致的情況。至于用戶滿意度、任務完成度等主觀的體驗指標可以作為參考,但是不能作為最終的增長指標。核心關注點是轉化、留存、復購、活躍度等指標,既側面體現了良好的用戶體驗,增加了用戶與產品粘性,讓產品長期可持續發展。



          5.2.3、利用用戶體驗地圖(E-Experience Map),同理心地圖,結合增長指標大膽提出假設,排優先級,并根據開發成本等因素通過四象限原則,選擇最小成本提升指標   


          用戶故事地圖、用戶體驗地圖、同理心地圖的區別:用戶故事地圖強調用戶使用產品/服務的任務流程,用它來篩選當前最重要的任務及對應功能,以完成最小可行產品設計;用戶體驗地圖不僅包括任務流程,還包括與之對應的體驗問題,更關注用戶的體驗情緒,從而找到提升體驗的機會點;同理心地圖幫助我們在每個不同場景下與用戶換位思考、打開思路,挖掘用戶選擇決定的深層動機。在實際使用場合沒有嚴格界線,可根據實際情況使用核心點進行分析。

          Image title

          Image title



          5.2.4、體驗升級——逐步發布驗證(設計接力)

          大版本迭代的優點就是一旦成功,可以大幅度拉開和競爭對手的差距,但是一旦失敗,會影響業務的發展得不償失。所以為了預防風險,大多數公司會在上線前先進行可用性測試,進行必要的線上驗證再發布。通過不斷分析增長指標,找選設計方向,進行模塊拆分,接力發布,循環驗證,提升產品價值。


          先驗證后發布方法:


          a、A/BTest

          制作兩個(A/B)或多個(A/B/n)版本,在同一時間維度,分別讓組成成分相同(相似)的訪客群組(目標人群)隨機的訪問這些版本,收集各群組的用戶體驗數據和業務數據,最后分析、評估出最好版本,正式采用(消除UX、bug帶來的影響數據),并不斷迭代進入一下個A/BTest。產品成長期,中小型企業可以用局部變量測試,大型成熟產品可以重疊實驗(更多、更好、更快)。

          要求:1、隨機抽樣;2、足夠的樣本量。

          優點:可以在同時段觀測效果,受到環境影響因素一致,容易客觀驗證方案

          缺點:需要占用開發資源,完整的一次測驗需要花費時間較多


          b、灰度測試

          先進行一個小范圍的嘗試工作,然后再慢慢放量,直到這個全新的功能覆蓋到所有的系統用戶。比如Facebook先發布1%,慢慢推廣到全部,現在普遍大廠也會用到這個方法,減少大版本試錯帶來的損失?;叶葴y試的同時可以A/Btest,在灰度測試過程中選出最佳方案,然后全部發布。

          合適:用戶群體較大,否則會因為流量小而導致結果不準確。


          c、分時段測試

          可以通過不同時段測試,對比數據。為減少對用戶過多干擾和負面影響,可以先用夜間或用戶量較小時段切換到新版本。

          缺點:得到的是環比數據,不像ABtest對比結果明顯有參考意義。而且在沒有確定方向的摸索階段,用分段測試,數據指向不明確,通常會存在數據一直不好的情況,頻繁換方案, 自亂陣腳。


          d、分渠道測試

          渠道推廣對業務支出也是占比較大,優秀的商業設計也能讓渠道轉化提高,從而減小獲客單價。所以渠道上的設計都會做n版,優化總結,提升最終的數據。


          e、新舊版本切換

          新版本上線后留出”返回舊版“的入口,這樣一旦用戶不喜歡新版可以切換到老版本。這樣可以很大程度降低風險,還可以監測不同版本數據,還給用戶一個緩沖時間讓用戶逐漸接受新版本。

          缺點:如果新版本運行效果不佳,決策者會進退兩難,一般在較有把握,或者想教育用戶新的體驗會局部用這個方法。



          5.2.5、尋求差異,擴大競爭優勢


          A、瘋狂聯想法

          a、橫向聯想

          結合產品定位,先得出核心關鍵詞,再在核心關鍵詞的基礎上繼續發散。比如一個男士護膚品電商網站,核心關鍵詞是:垂直、B2C、男用戶多、護膚品等,可以根據這些關鍵詞找到合適的參考。值得注意的是關鍵詞的選擇也可以根據你需要的提升的核心價值點去聯想。

          Image title


          b、縱向聯想

          縱向聯想是從一個關鍵詞出發,縱向不斷延展出新的關鍵詞,并找到對應競品。比如保健品有一個重要的特征就是注重功效,我們可以想到具有同種特征的護膚品。

          關于聯想,在頭腦風暴中并沒有特備嚴格的步驟方法規定,可以根據自己的認知由近至遠拓展。思維跟橫向縱向也是類似,可以先參考最典型接近的,再利用共同關鍵特征來擴散,也可以利用不同組合的關鍵詞重新找到相應的競品。最后根據四象限原則,把相關度高,體驗好的,更有參考價值的競品拿來精細分析。

          Image title


          B、競品對比分析法

          通過聯想發我們也能聯想出不同維度的競品,這師我們需要考慮競品哪些部分類似可以參考的,哪些部分不同需要注意的,但同時也可以考慮借鑒不同部分的優勢轉化成自己的優勢。比如最早彈幕只出現在視頻上,抓住彈幕可以活躍氣氛,滿足觀眾發表評論和觀看時時評論達到的心里共鳴,增加用戶之間的互動性,從而提高用戶粘性的核心點后,彈幕也出現在直播、音頻、新聞,甚至是炒股軟件上。

          Image title



          5.2.6、做有創意且能落地的品牌設計


          品牌的核心點就是讓人“記住”,最好能找到目標用戶心智中空缺的領域,在這個垂直領域占領優勢位置,所以品牌強調差異化。比如一想到打車就想到滴滴,一想到購物就想到萬能的淘寶,一遇到問題就上百度。


          傳統的方法:了解業務——發散關鍵詞——情緒版——視覺方案

          精益方法:內外調研——語言釘——個性關鍵詞——視覺錘(快速落地)


          成長期的品牌建設更需要突出創新性,讓人眼前一亮,記憶猶新。這里展示展示了御膳房網站的品牌三元法示例,御膳房的風格的確做到了主題感強烈,讓人眼前一亮,不過個人認為作為科技網站,還是略顯了花哨,安全感不足。品牌三元法是也是通過對產品的了解,分別從理性業務層和感性業務層出發,延伸個性創造層,記錄關鍵詞展開設計,其本質還是圍繞業務拓展價值。成熟的品牌設計者,不僅要從業務出發,更要考慮不同場景的品牌應用,打造統一有個性的全方位品牌。

          Image title


          5.3成熟期(產品穩定期)


          目標:提升產品價值(賺的多)

          關注:商業變現

          用戶:活躍用戶

          策略:科學嚴謹提升商業價值

          方法:用戶體驗地圖、設計跨欄法(定量為主)

          關注數據指標:活躍度/流失率/營收/成本率/現金流

          品牌:擴大品牌影響力和品牌價值

          Image title


          5.3.1、用戶分層,尋找核心價值用戶


          a、核心價值用戶是留存用戶中最活躍的部分

          b、找到核心價值的用戶特征


          通過RFM模型來篩選核心價值用戶

          R=Recency最近一次消費

          F=Frequency消費頻率

          M=Monetary消費金額

          (RFM,1代表高,0代表低)

          (111)重要價值客戶:最近消費時間較近、消費頻次和消費金額都高,典型的核心價值用戶,高留存、高活躍度

          (011)重要保持客戶:最近消費時間較遠,但是消費頻次和金額都很高,說明這是一段時間沒來的忠實客戶,需要與他保持聯系,召回

          (101)重要發展客戶:最近消費時間近、消費金額高,但是頻次不高,忠誠度不高,很有潛力的用戶,必須重點發展

          (001)重要挽留客戶:最近消費時間較遠、消費頻次不高,但消費金額高的,可能是將要流失或者已經流失的用戶,應當采用措施挽留


          一般公司都會有利用RFM來觀測核心用戶,針對不同類型來做不同的措施,但是所有數據的利用率都跟產品客觀成長度有掛鉤,成長期可能還不是那么細分,成熟期就會更精細的分析。最簡單粗暴的就是看看最近一次消費,超過多少天就短信消息召回給個優惠券之類的。


          c、總結核心規律,改進產品,調整運營策略

          找到核心價值的用戶特征后,需要探測他們的行為模式與貢獻的規律,從而激勵更多用戶貢獻更多價值。比如喜馬拉雅,找到訂閱節目的用戶明顯留存度更高,用戶活躍度也高于隨便聽聽的用戶的規律后,在產品設計時會把訂閱放在顯眼的位置,并且在首頁把用戶感興趣的模塊放在優先的位置來提升訂閱度。

          Image title



          5.3.2、商業價值提升


          a、以科學創新為代表的產品核心競爭力:數據和技術驅動一切,科技提升效率。

          b、用戶價值:用戶價值是商業變現的基礎,沒有人會在沒有用戶轉化的平臺上投入資金。

          c、商業變現:用戶付費,廣告收入,與用戶體驗合理價值平衡。


          在商業變現階段,除了要著眼于如何更的賺到錢,也需要平衡用戶體驗,且不斷提高產品本身的價值。百度在成為巨頭后,百度貼吧過多不相關的推送導致用戶粘性急劇下降,魏則西事件等負面消息,再到陸奇離職,目前市值縮水至365.38億,被拼多多趕超。而微信和抖音這方面做的較為出色。微信是迫不得已不愿打擾用戶,所以廣告頻率一直不高,廣告質量也有所保障,會根據用戶的喜好推薦廣告。抖音是沉浸式的廣告體驗,一不留神就進入了廣告的坑,而且廣告的形式與抖音原生用戶的不謀而合,有些有創意的網紅視頻用戶的接受度也很高,從而會極大的提高轉化,對用戶體驗的影響也較少。



          5.3.3、增值假設——圍繞目標增長(量化設計師的價值)


          設計策略:穩定、規范、統一、科學嚴謹


          a、拆分變量科學測試

          到了成熟期,設計師在修改設計方案的時候不是改的越多越好,有的時候一個模塊的重構,一個按鈕的顏色變化都能影響數據轉化,所以需要通過科學的方式,調整到合適的顆粒度去測試。  

          Image title


          b、把AB測試作為一項基本制度

          如果想要驗證設計效果,那么可以在保持功能不變的情況下,只看設計方案的區別,這樣就可以有效的量化設計。


          2018 年,中國移動互聯網用戶增長放緩,上半年僅增長 2 千萬。但是頭條系卻異軍突起,超過百度系、阿里系穩居總使用時長第 2 名。頭條系的崛起有許多的原因,強大的數據監控系統,成熟的增長引擎,上百組同時進行的AB測試等等都在幫助產品經理和運營們找到最優的方案。


          c、用戶增長地圖

          用戶增長地圖是借用AARRR概念作為骨架的展開的,通過AARRR模型針對沒一步提出增值假設,以提升總體價值指標。

          Image title


          5.3.4、提高整體效率:通過DPL(Design Pattern Library)組件庫批量優化;科技力量-人工智能


          a、根據長期積累下來的AB測試結果,沉淀規范后,把這些規范內容快速復制到若干條產品線上。從產品周期來說,摸索期需要建立一定的視覺規范,但不合適做細致化的組件,等業務慢慢穩定下來,不會有大方向的改變后,需要慢慢建立細致的組件庫,以方便團隊合作。每個業務也有其特殊性,to B的業務一般建立組件庫會比較早,模式化的東西較多,針對不同的B端也會有定制化的內容,DPL可以大大提高整個業務的效率。

          Image title



          b、通過智能科技的力量來提升整體的效率。比如阿里的千人千面,通過消費者偏好進行個性化投放,魯班系統對banner進行簡單的合成,大大提高大促期間海報生成的效率。



          5.3.5、打造統一的全業務線品牌設計


          a、形成統一且獨特的品牌印記

          成熟期面對繁多支線,先對內樹立統一的品牌形象;主品牌與產品調性統一;線上線下風格的統一。


          b、品牌印記提取與深化

          品牌趨勢都是化繁為簡,比如蘋果、奔馳的logo就越來越簡單,利于大眾記憶,也利于線下拓展。

          提取出logo基因去強調品牌作為拓展延伸,比如天貓和考拉的吉祥物頭部圖形的簡化應用,都比較簡約,易記,易拓展


          C、成熟期的品牌也不是一成不變的

          成熟期,產品在市場中已經有了穩固位置,品牌不宜過度設計,而需要采取保守、穩重、擴展性強的風格。品牌的更新升級,一方面順應企業的戰略方向的改變,一方面順應整個設計前瞻潮流。比如美團變黃的品牌升級,是為了更好的從外賣這個觸點深入用戶心智,而OPPO ,vivo等品牌升級感覺更美有特色,其實也是順應國際化的設計趨勢,更有文字辨識度,更國際化。

          Image title



          5.4衰退期

          每個產品都有一個生命周期,這是受市場因素導致的,此時用戶會逐漸流失,既被其它新產品的體驗模式所吸引,所以這時應該更關注用戶流失后使用的產品,分析競品的商業模式和功能,同時監測流失速度,需盡快拓展產品邊界,尋找新的切入點。不過好的產品都是在不斷優化,迎合新時代的需求,不斷擴大自己的影響力和產品價值。之前文章我也寫過關于微信的未雨綢繆,不斷優化。微信的用戶粘性強大,誰也不好說他能再打幾年,像抖音這種迅速崛起的產品是否是現象級的曇花一現,也要看它是否能與時俱進。



          六、設計師順勢而為,自我定位

          一般來說小公司的大部分項目處于探索期和成長期,而大公司的項目很多處于成熟期,也有一些孵化探索的項目。處于探索期的項目,需要大膽創新同時,有可能變化極快,無法冷靜下來根據數據用不同設計方式達成增長目標,我就經歷過一個首頁一星期全新大改版n次的慘痛經歷。反觀大公司很多流程復雜,驗證方式系統完善,有些設計師感覺沒有用武之地,不能施展才華。


          根據不同階段采取適合自己的設計方法,驅動產品提高設計價值,切勿漫無目標、抱怨環境,浪費時間。


          如果你思維極其顛覆愛挑戰可以選擇從0到1的新行業;如果你喜歡創新可以選擇成長型的行業及公司,或是成熟公司里的成長型項目;如果你追求科學、嚴謹、,那么可以選擇成熟型的公司、項目。

          轉自-UI中國

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

          組件化設計:彈窗的使用邏輯

          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設計都將是非?;镜摹?nbsp;


          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設計分享達人

          好的用戶體驗是不會讓用戶注意到并毫無察覺的一種體驗。表面上看似非常簡單,但實際上設計師已經做出了非常多的設計思考。用戶越少的去思考界面,用戶就越能專注他們要完成的目標。在瀏覽頁面時,用戶的注意力不應該停留在界面和設計上,他們更應該關注的是如何達成他們的目的。所以作為設計師的首要工作就是通過事先清除障礙,為用戶提供直達目標的途徑。


          “通常,飛速行駛的貨車不可能輕松地停下來。因為運用更多的動能去改變運動狀態是非常困難的。與其強迫人們從他們的主任務上轉移注意力,不如直接帶他們去他們想去的地方。”

          ——Luke Wroblewski,谷歌產品總監


          換個思路來看。復雜和混亂的界面會迫使用戶去尋找解決問題的方法,而通常情況下,這些方法并不是一目了然的。用戶會因為過多的選項、界面、導航等感到困惑,用戶可能會在思考過程中感到不知所措。即便是很短暫的停頓,也足以讓用戶離開。

          這種過度的思考就被稱為認知過載,在這篇文章里,我們將為你解釋如何避免認知過載。首先,我們需要明白我們大腦中存在過載風險的原因。

          Image title

          認知超負荷的科學根源
          認知過載是指工作記憶中腦力處理的信息總量過多。當你的工作記憶接收到的信息超出其可以輕松處理的信息時,就會發生認知過載,從而產生挫敗感。
          但這究竟意味著什么?工作記憶到底是什么?針對這些我們又應該怎樣進行設計呢?那就讓我們先來了解一下認知負荷理論的起源吧。


          JOHN SWELLER和認知負荷理論
          雖然對認知的研究可以追溯到幾個世紀,但直到20世紀80年代,澳大利亞教育心理學家約翰·瑞勒才將這項研究應用于教學設計當中。Sweller試圖為每一種類型的學習者找出最適合他們的學習方法,讓他們可以記住他們學到的所有知識。換句話說,怎樣的課程設計才是最佳的呢?
          Sweller在1988年出版了“ 認知負荷理論,學習難度和教學設計 ”,這使他的研究工作達到新的高峰,于1994年重新修改并重新發表。他的研究中運用了數據組織結構中的圖表數據庫,講述了有效和無效的教學方法,而他對于工作記憶負荷極限的研究結果才是設計師們找到的最有用內容。
          Sweller的研究在許多方面擴展了George Miller的信息加工理論。George Miller是一位認知心理學家和語言學家,他在20世紀50年代測試出短期記憶的極限。Miller的研究在于數字化設計,尤其是分塊技術方面,這將在后面討論。另外,Miller還創作了論文“ The Magical Number Seven, Plus orMinus Two“,這個理論促使許多設計師將菜單項的數量限制在5和9之間。
          雖然這些理論最初是針對教育領域的,但它們同樣適用于用戶體驗(UX)設計。


          工作記憶
          如果你每次打開冰箱,都必須回答一個像謎語一樣的問題,“什么東西小的時候四只腳走路,長大了以后兩只腳,而老了以后有三只腳?”這是一個老段子。但是,根據認知負荷理論,使用這種讓人無奈的用戶體驗設計會讓用戶產生挫敗感。

          Image title

          要理解認知負荷理論,你必須要了解什么是工作記憶,大腦在短時間內用于完成任務的過程便是工作記憶。工作記憶必須借助外部刺激和短期記憶,并在需要時從長期記憶中抽取。通俗一點說,工作記憶相當于計算機內存,而長期記憶則相當于硬盤驅動器。
          工作記憶和短期記憶通常可以互換使用,但它們略有不同。工作記憶是處理信息的過程,而短期記憶更像是一個信息的便簽本,它雖然重要,但卻沒有長期記憶重要。
          讓我們看看這篇文章是如何解釋這些差異的。在你閱讀的時候,你可能會遇到一個用藍色字體書寫的陌生概念。你的工作記憶需要知道藍色文本是什么意思,才能夠理解文章更深層的含義。你的長期記憶知道藍色文本表示鏈接,因此你的工作記憶知道點擊該鏈可以獲得更多信息。與此同時,你的短期記憶會記住你在文章中的位置,這樣當你從外部頁面返回時你不會迷失,但到了第二天早上,該位置就會被遺忘掉。

          Image title

          設計中的應用
          Steve Krug(史蒂夫·克魯格)是一位很有影響力的作家,他在網頁設計中極力推崇認知負荷理論。他的書《Don’t make me think》被許多設計師認為是有巨大影響力的著作。
          書中記錄了許多寶貴的經驗,下面就列舉一些的:
          1、每一個頁面都要清晰明了。
          2、用戶傾向于“滿意” - 也就是說,采取一個最簡單的解決方案來解決他們的問題,而不是最好的解決方案。此外,作為習慣的生物,用戶將一遍又一遍地使用相同的方法解決問題,而不會刻意尋找一個更好的選擇。
          3、當新用戶可以熟練使用該系統來實現他們的目標時,系統的可用性就足夠了。
          4、用戶使用網絡的絕大部分是想要節省時間。因此,用戶的行為通常會像鯊魚一樣“保持移動,否則就會死亡”。
          5、后退按鈕是Web瀏覽器最常用的功能。
          6、屏幕上顯示的主頁按鈕即使從來不被用戶使用,但也能讓用戶感到放心。
          總之,用戶在瀏覽網站過程中哪怕是一瞬間的思考,也會對他們的工作記憶造成負擔。例如 “這個可以點擊嗎?“首頁按鈕在哪兒?”和“我怎么保存?”等等問題,都會不同程度破壞用戶體驗。


          認知超負荷最常見的原因
          許多設計元素都有可能對用戶的大腦造成超負荷,外界環境中會有更多的因素它們超出了設計師的控制范圍。例如:一個用戶瀏覽網站的同時會擔心第二天的工作報告,或者被窗戶外裝修的噪音所打擾,此時,無論你的網站設計多么簡單,這些都會耗盡他們的工作記憶。
          我們要知道每個用戶的工作記憶能力都不同。隨性的用戶比那些對每一件小事都無比關注的用戶更能專注于你的網站。不經常上網的用戶往往比經驗豐富的網絡用戶思考的更多。
          雖然我們無法量化所有的認知過載,但我們可以盡量的去避免他的產生,下面,我們對網頁設計中最常見的類型以及避免它們的最佳方法進行了分類說明。
          1.不必要的操作
          用戶的每一步操作都會增加他們的認知負擔。過多不必要的操作會打斷用戶的思路或者會讓用戶抓狂。因為用戶的工作記憶都集中在完成特定的目標上,所以多余的操作將迫使用戶投入更多的精力,這樣就需要更多的工作記憶才能完成任務,所以,那些不必要的操作步驟很考驗用戶的耐心。
          速度和節奏是讓認知負荷最小化的基本因素。用戶希望以輕快,目的性很強的步驟來完成任務,所以應該提前消除一切延遲。
          Image title

          用戶希望在他們提交郵箱地址之前就知道他們將要進入什么網站,但Touch of Modern卻要求用戶在使用之前必須進行注冊!這個強制而又多余的行為將會嚇跑很多的潛在用戶。
          解決方案
          下面這個方法,可以幫助我們找到不必要的操作有哪些:列出用戶要完成任務必須要去做的步驟。例如發送電子郵件:
          1、點擊電子郵件圖標。
          2、點擊“發送到”輸入框。
          3、輸入電子郵件地址。
          4、點擊“主題”輸入框。
          5、等等....
          現在,重新審視列表并且找出可刪減的操作步驟,想到什么了嗎?你可以通過將光標一開始就自動定位在“發送到”字段就可以刪除步驟2.這將減少用戶的操作,雖然很微小,但你消除的每一步對于用戶來說都是友好的。

          Image title

          我們來看看谷歌的主頁。光標一開始就在搜索輸入框當中,因此用戶所要做的就是開始輸入文字。這些微小的交互提升了整體的用戶體驗,所以不要忽視它們。
          2.過度刺激
          雜亂無章的頁面會分散用戶的注意力,使用戶無法專注他們想要完成的目標。就像有好幾個人同時與你交談時你會很難集中注意力,當頁面上太多的圖片、動畫、圖標、廣告、文本類型和鮮艷的顏色奪取你的注意時,就會很難集中注意力。
          記住,每個人的工作記憶在完成目標的過程中,會因為外界的刺激對每一步工作重新排序。每一次分心,尤其是視覺上的強烈刺激,都需要消耗用戶的一部分注意力。

          Image title

          LINGsCARS就是個極端的例子,你可以看到有強烈對比的顏色和絢麗的動效沖擊著人們的感官。在屏幕上,即便在兩個不同位置同時進行的動效依然會對用戶造成過度刺激。
          解決方法
          首先,減少一切不必要的元素。僅保留必要的內容通常是最佳的選擇,減少加載時間并簡化體驗。用戶更喜歡視覺簡單的網站,而不是視覺上復雜的網站。
          你還可以進行內容區分以達到平衡的效果。太多相同的內容(比如文字或圖像)會讓用戶感到厭煩。所以,視覺內容要進行合理的組合,圖像、視頻、信息圖表等,能夠使頁面和諧,并便于用戶理解。
          影視網站IMDb本可以在很大程度上輕松地只依靠圖片進行排版,但它反而運用同量的文字內容來平衡網站頁面。

          Image title


          在抽取出一個頁面上必須要展示的元素之后,你應該采用一種讓用戶立即能夠理解的方式組織這些元素。對稱或者不對稱的信息布局顯示都可以很快的被用戶所理解,也就是說,用一種方式,盡可能的減少大腦的工作。這樣不僅對稱和不對稱都能讓眼睛感覺很舒適,而這樣的結構也能讓界面交互更容易。
          下面來看一下Groupon是如何布置頁面的吧。左中是文本類的垂直菜單,右中是一個有特色的凍酸奶交易文本描述,插在文本中間的照片和色塊的使用,分分鐘創造出一個讓人喜愛的沙漏結構。
          下面來看看Groupon是如何將它的垂直菜單(中間偏左)和描述凍酸奶的文字(中間偏右)進行布局的吧。大圖居中被文字包圍著,這樣就打造了一個舒適自然的沙漏形狀。

          Image title

          對稱不僅僅是在屏幕的兩側應用相同的布局,它是視覺重心和視覺方向的平衡。通過這種方式,非對稱頁面也能看起來很有組織性,如下圖的OTHR所示。

          Image title

          將你的頁面內容精減到只包含簡單的和非競爭性的元素,這只是完成了預防過度刺激工作的一半。。不要忘記要以簡單的布局呈現這些元素。
          3、太多選項(希克定律)
          這有點自相矛盾:用戶需要更多的選擇,但是往往太多的選擇會使他們的大腦超負荷。


          席克定律(選擇困難癥)為我們揭示出了一種現象:用戶擁有的選擇越多,他們做出決定的時間就越長。


          作為設計師要去理解庫克定律,可以把每個選項看作是明亮的閃光燈,如下所示,太多的閃光燈會過度刺激用戶。

          Image title

          甚至像Rakuten這樣的知名網站也會犯類似的錯誤,因為他們沒有真正的理解這個設計原則。給用戶需要的而不是給他們認為他們需要的。
          解決方案
          假如你已經解決了不必要的和多余的選項,你可以將他們分別放入不同的組進行分類,你可以在百貨商店的網站上看到很多例子,這些網站擁有廣泛的產品選擇。
          它不一定是太多的選擇, 只是一次有太多的選擇。如果你可以用隱藏菜單,抽屜和拉出其中的一種方式隱藏一些選項,那么你將獲得兩全其美的效果,這些超級菜單雖然為用戶提供了許多選項,但一定程度上不會給用戶帶來很大的負擔。

          Image title

          但是,隱藏式的導航欄不利于發現,因此電子商務和新聞等行業的設計人員應該注意。你可以通過放置其他類似產品的鏈接使缺點最小化(比方說亞馬遜的“相關購買”)從而最大限度地減少隱藏菜單的缺點。或者你可以歸納導航菜單的類別,將它們精簡為單行導航(如Apple和CNN那樣)。

          Image title

          你還需要注意應該如何組織整個網站的導航。許多與庫克定律有關的問題可以通過管理信息架構(IA)來處理,我們將在下面的“難以查找的頁面和功能”部分中討論。
          4.太多內容
          就像過度刺激和選項過多的問題一樣,提供過多的內容會將用戶的工作記憶拉向不同的方向。
          顯然,你希望展現的只是重要的內容,但對于一些網站來說,一切都是重要的,如果你的網站也有非常多的內容,為了避免讓用戶產生困惑,應該對內容信息進行和里的組織規劃。

          Image title

          Arngren的問題并不是它展示了很多的產品,而是它同時展示了太多的產品。在組織結構上的調整將會給網站帶來更好的體驗。
          解決方案
          如上所述,George Miller的解決策略是“分塊”,將需要展示的大量內容以可管理的方式組合起來,以便于記憶,電話號碼分為國家代碼,區號,一組三位數和兩組四位數字便于記憶,而一連串的11個數字會很難被記住。
          你想在商店主頁上放大量產品的圖片嗎?比起將它們全部羅列出來,不如通過他們的類型將他們分組羅列。Etsy通過根據不同的店鋪將產品進行分組展示。

          Image title

          還有文本組塊,文本組塊包括簡短的自然段,合理利用標題和副標題以及足夠的留白。
          對于需要大量數據的長表單字段,可以嘗試采用多步驟表單。長表單可能會令人生畏,有時會導致用戶流失。你可以將表單的信息分在不同的頁面里,減少信息過量給用戶帶來的影響。記得一定要有一個進度標記來讓用戶知道還剩下多少頁。(可以總結為復雜的頁面簡單化)

          Image title

          購買機票總是涉及填寫大量的信息,其中沒有一項是多余的。Virgin Atlantic通過將其分解在多個單頁面上填寫來改善其繁瑣的體驗:選擇航班,填寫乘客信息,輸入付款詳細信息等。將所有這些信息放在一個長頁面上會對用戶造成負擔,也有可能會放棄購買。
          5.模棱兩可的界面
          認知超負荷的罪魁禍首先就是用戶界面混亂。永遠不要讓用戶花費大量的時間來弄清楚他們如何才能完成想要的目標,以及花費時間來弄清楚圖標的含義是什么。

          Image title

          并非所有用戶都是經驗豐富的,從而可以理解SpeedCrunch這種含義模糊的圖標。即使他們能夠識別代表Windows系統和Mac OS X系統的符號,那么位于右下角的那兩個圖標也會讓用戶迷茫。
          解決方案
          使用用戶已經熟知的視覺提示。用戶通常會用他所熟悉的符號來進行操作,即便是在以前從未使用過的網站上也是這樣。如果你覺得沒有新意,可以融合品牌特征巧妙的結合成為用戶所熟悉的形式。Home Depot雖然運用了較為普遍的圖標,但同時也賦予了他們品牌獨有的橙色。

          Image title

          標準標簽(如“聯系人”和“提交”)的按鈕比非傳統標簽(如“地址”或“開始”)更容易識別。通常已知的標簽可以提高用戶的瀏覽體驗,而不常見的標簽會讓用戶暫停以了解按鈕的功能。不要為了個性化而喪失了識別性。
          另外,你如果真的需要一個從未見過的圖標該怎么辦呢?如果這樣,可以運用現實生活中的場景展示來讓圖標進行自我解釋,這種做法是連接現實和虛擬的橋梁。例如:早期的互聯網先驅選擇了一個信封來代表電子郵件,因為信封是郵件系統的明顯標志。
          此外,要避免含義模糊的圖標,特別是可能還會被誤認為是其他含義的圖標,就像下列Issuu的圖標,有些是被人熟知的,但有一些卻不是。如果用戶必須通過點擊這個圖標來發現它的功能,這就會中斷他們的操作進程。

          Image title

          任何一個表意不清的圖標都應該附帶說明,告訴用戶怎樣操作。新的并且不常見的用戶界面,就需要更多的分步教程。例如,Slack就給出了一個完整的視頻引導來說明界面的操作流程。

          Image title

          6.難以查找的頁面和功能
          即使用戶已經擁有他們所需要的一切,但他們可能還是不知道如何去尋找它。這樣就會讓用戶費盡腦力去尋找他們所需要的。作為用戶體驗中不可或缺的元素,導航應該放在明顯的地方,給用戶信心去任意瀏覽網站而不會迷失。

          Image title

          如果你覺得漢堡包圖標不好,那可以在看看Mojo Yogurt,它會要求你將鼠標懸停在左上角的徽標上以顯示導航菜單。

          Image title

          雖然圍繞著Logo有個小的動效,但對于整個屏幕的顏色和動效來說,它并不夠明顯。
          解決方案
          根據用戶的偏好理順你的信息架構。你的目標用戶群可能并不認可你的做法。因此,要想他們學習如何組織網站,卡片分類試驗會告訴你你的用戶將會如何對頁面和話題進行分類。

          Image title

          如果你還希望通過組合頁面和菜單項來消除多余的頁面。設計工作室Waaark通過將其工作室的簡介,團隊成員簡介和聯系信息這三個頁面合并到一個頁面來簡化他們的導航。

          Image title

          如果某些功能或特征比其他功能或特征更重要,可以運用視覺手段來吸引他們的注意,增加大小,添加動畫以及使用對比色以此來吸引用戶的眼球。

          Image title

          PayPal期望有更多的老用戶而不是新用戶,并通過設置登錄按鈕與吸引注意力的白色塊背景來迎合前者。
          7.內部不一致
          假設網站的主頁使用標準的藍色和帶下劃線的文本來表示鏈接,但另一個頁面僅使用藍色而沒有下劃線。當用戶瀏覽其他頁面時就會停下來去想,“它沒有下劃線,這還是個鏈接么?”他們甚至可能不會再去關心鏈接,而會被其他頁面的不統一分散注意力從而影響整體的用戶體驗。
          要記住,最好的用戶體驗是不會被用戶所察覺的,而像上面這樣通常都會被注意到。
          總結
          1、認知過載是影響工作記憶的因素。當過多的信息阻礙決策和整體經驗時,就會發生認知過載。
          2、使用不同的內容類型和結構化頁面組合,可以避免視覺混亂。
          3、隱藏式菜單可以幫助用戶一次管理可用選項的數量,但降低了可發現性。
          4、“分塊”和“步驟”等的方式可以防止認知過載。
          5、UI元素和圖標應該基于用戶現有的認知上,這樣他們就不需要過多的思考,新的獨特的功能要加上解釋說明。
          6、圍繞用戶的實際思考方式構建你的信息架構。卡片分類等可用性測試可以為你的目標群體揭示最直觀的導航方案。
          7、視覺和功能的不一致,以及打字錯誤和語法錯誤,都會分散用戶的注意力。
          8、盡可能減少冗余。另外,請留意如何最大限度地減少用戶操作步驟量和他們必須花費的精力。


          文章來源:UI中國

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

          引導頁設計淺析

          ui設計分享達人

          APP中的閃屏、啟動頁、引導頁的區別,設計方法,個人案例分析,以及品牌解讀

          【什么是閃屏 / 引導頁與閃屏的關系】

          (部分引用觀點)



          引導頁是閃屏的其中一種,一般出現在版本分布或大版本升級時。

          我們先整體看一下閃屏頁的大致類型:

          (聲明:以下圖片來源于應用截圖,僅作為學習交流使用)









          一、常規閃屏


          為什么叫常規閃屏?

          因為這類閃屏比較普通,我沒有想到什么更專業的詞匯,暫且就叫常規閃屏吧。這類閃屏的使用國內的和國外有點不同,因為按照蘋果官方的說法是,用戶打開應用能立即使用是最好的體驗,例如:系統自帶的一些應用,是沒有閃屏的。再甚者閃屏最好就是讓用戶感覺不到,和首頁能有一個完美的融合和過渡。

          這種體驗也很棒,國外的instagram、facebook等就是使用這種設計,閃屏長得很像首頁,更像是一張加載類的占位符








          當然,因地制宜,國內的我們已經習慣了閃屏作為App品牌的宣傳和推廣手段,一般由logo+名稱+slogan+品牌色組成,界面還是相對簡潔明了的,但還是很明顯的違背了蘋果官方的指導說法,但是沒辦法,這就是商業需要。


          這樣設計也有利處,可以減少用戶在打開App時的焦慮感,也可以讓用戶更直觀的了解品牌,傳遞一些情懷、理念,多看一次閃屏,也是讓用戶強化品牌記憶的過程,只是不知道是好的記憶點還是壞的,就要我們自己斟酌了。








          二、廣告閃屏


          廣告閃屏,顧名思義就是產品本身為了進行流量變現從而獲得盈利,給一些商家打廣告或者進行合作設計的一類閃屏,這是無可厚非的。不過廣告閃屏自帶被“嫌棄”屬性,應該很多用戶看到這類閃屏的心理是比較排斥的。

          至少對我來說,我是很少關注這類閃屏,除非閃屏設計的非常的酷炫,我愿意多看一下,否則的話我就想立刻把它關掉,所以在這類閃屏上加上“倒計時(loading)和跳過”就顯得很必要,并且“跳過”的位置也要方便用戶點擊。

          這類閃屏最好只出現每天第一次打開App時,避免讓用戶厭煩。不管出于何種目的,都需要在商業利益和用戶體驗之間保持一個平衡,不然用戶會流失的很快,用戶流失了,何談盈利呢?

          另外廣告閃屏和下面要說的活動閃屏一樣,會有一個模板:底部是閃屏圖片,上面蓋上一層logo模板。

          App啟動時會從服務器拉取閃屏數據,本地會保存logo模板。如果服務器更新了閃屏數據會拉取數據進行展示,如果沒有更新或是網絡不佳,就會默認展示緩存的閃屏數據,以免發生卡頓現象,以保證流暢的用戶體驗。







          三、活動閃屏


          活動閃屏和廣告閃屏有點類似,出于產品運營方面的需要,它起到活動宣傳的作用,每年的雙十一、雙十二期間,各大電商App的閃屏都會用到活動閃屏,還有一些商家自己造的一些節日:品牌周、年貨節、會員日、狂歡周…相信大家已經見怪不怪了。


          近期我留意到一個問題,就是我們在使用App時,經常會在應用之間進行切換使用。如果我們從其他應用再次返回時,最好不要再加載一次閃屏,會給用戶很不好的用戶體驗。目前使用下來,淘寶、天貓等這類主流應用都有這種問題,但是我想這應該他們有意為之。







          四、節日閃屏


          每逢一些節假日,各大品牌都會推出一些當日的閃屏,那么為什么要設計節日閃屏?

          我覺得有幾點原因:

                 長期看常規閃屏,用戶很容易會有視覺上的一種疲勞,節日閃屏會給用戶一種不經意的驚喜和新鮮感;

                 可以蹭一蹭節日的熱點,提升產品本身的品牌調性;

                 在節日給用戶以問候和關懷,和用戶在情感上產生共鳴,從而更好的連接用戶和產品,我想這應該是最重要的原因。


          節日閃屏比較吸引用戶的注意力,它不像廣告類閃屏,我看見這類閃屏就會忍不住的多瞅幾眼,所以設計這類閃屏的時候要非常重視,因為用戶愿意等待,這是非常求之不得的,這就需要設計師具有比較強的表現能力了。

          我們在設計的時候可以先進行思維上的發散,或者是逆向思維之類的,比如:春節將近,我們可以聯想到是什么,理清一個思緒,要有節日的氛圍,可以活潑、可愛、夸張…切忌呆板。

           







          五、大版本升級閃屏(引導頁)


          在App進行了大版本升級后,要向用戶展示產品新功能的操作方法。這類閃屏也可以稱為引導頁,頁面數量控制在3-5頁,每一頁都有一個對應的主題,主題要精簡,切忌文字過多。


          而且每一頁設計形式要類似,否則會給用戶一種視覺落差感。頁面上要加上“跳過”功能,因為用戶更希望盡快體驗新版本,而不是看你的這些教導,在最后一頁要加上類似“立即體驗”的button。







          ——分割線【品牌傳達力】——










          啟動頁面告訴用戶“我是誰”“我是做什么的”,開頭跟用戶做了自我介紹,引導頁的目的主要是告訴用戶:“我該怎么使用”或者是“我有什么亮點”(重點宣傳的功能),借用男女相親例子,雙方介紹完自己之后,開始展示自己有什么優勢,好的引導頁設計直接關系到用戶是否“對你有興趣”想一進“了解你”。

          從上圖可以看到,引導頁在品牌傳達力上居首位,其次應用市場說明圖。








          【引導頁展示目的】

          以下盡量列舉了金融相關app截圖,僅供學習使用



          引導頁定義比較廣,往小了講,我們一般會認為在用戶初次打開應用時跳出的幾張介紹應用功能的頁面就叫做引導頁;那往大了說,在用戶使用某個功能前就能幫助用戶降低學習成本的頁面或存在引導屬性的彈窗都可以稱為引導頁。

          先從引導頁展示的目的出發,再結合實際app情況去確定宣傳標題,最后結合不同的設計展示方式以及動效。







          一、產品特色介紹


          多數時候,我們初次打開應用會看到下面這樣的引導頁:


          可以看到一個共通點——即頁面呈現的內容為該 App 的主功能或新功能推薦,或者是對剛迭代的功能做了哪些優化的說明。

          理想情況是:用戶能了解這次產品做了哪些優化,幫助用戶更清晰地了解產品。







          二、操作引導


          這類引導會出現在內容頁面,直接引導用戶去操作相關功能

          蒙版引導通常緊貼著界面流程進行而出現,使用透明色間隔形式加上簡單指示性文字與圖形,總是能夠簡潔明了地告知用戶產品的功能或者使用方法,并且由于其輕量的屬性會大大減少用戶的閱讀時間。設計得當的蒙版引導不僅可以與其他引導相輔相成,同時也能夠增加用戶對產品的好感度。

          它的好處就是清晰明了,直接讓用戶知道你想表達什么。它的實際效果會比純內容引導頁好很多,但同時也會有一個問題,即打擾用戶操作。

          這樣的方式已經解決了內容操作引導的問題,但其實這種方法也會使用戶厭倦,所以內容不易過多。







          三、理念傳達


          以傳達態度理念,生活方式等為主,比較概念和意義上的東西,吸引用戶達到某種程度的共鳴,從而產生吸引力。







          四、側面實力烘托


          多用于有實力/特色的產品或者企業,展示自身優勢,讓用戶對產品產生信賴感。










          五、問題解決


          指出用戶所面臨的問題,而你的產品正好可以解決。



          結合自身app/企業所具有的優勢;產品的功能特色;產品的定位;等相應的展示目的。也存在混合展示,不過要把握好標題的設定,在標題與設計上達到統一。








          【引導頁設計方法】


          在確定了引導頁展示目的之后,下面整理了在引導頁設計過程中的方法。

          目前比較常見的幾類引導頁的類型(電商除外),根據產品的特點來確定設計風格,總體沒有固定規則。










          一、圖文結合


          使用有關聯性的圖片,同種版式,優點是感情表達直觀簡單,畫面沖擊感強,缺點是泛表達,不能表達內容。









          二、產品界面描述型


          功能描述型,使用app畫面說明,通常在版本更新時用來對新功能進行重點描述,是目前比較常見的引導頁表達方法之一,比較通用。









          三、模擬應用場景


          通常用插畫方式表現,通過圖文結合的方式全方位闡述中心思想,插畫風格具有豐富的多樣性,同時又能貼切表達主題,所以在app中出現頻率越來越高。

          以下列舉了百度金融的版本引導頁,通過系列插圖表現貼心、安心、用心、省心、隨心,插畫緊密契合主題,完美使用排比句的形式。











          四、吉祥物的運用


          一個成熟的app通常會吉祥物來表現,啟動頁是用戶打開app第一眼看到的地方,吉祥物可以讓用戶在2-3秒時間內深刻體會到產品的核心價值觀。












          五、代交互 動效的


          這類啟動頁通常是在頁面切換中加入一些動效果的設計,使得在交互體驗上更加突出,與靜態頁面間的切換顯得更加生動有趣。

          動畫呈現方式趣味性更高一些,開發成本相對也會高一些。











          六、視頻類/動畫類


          這類的理論上不叫啟動頁,叫開篇動畫更貼切,打開app通常為一小段視頻或動畫引入頁面











          【實際案例分析】


          閃屏/引導頁的設計方法很多,但要在設計之前充分考慮到產品定位和應用場景。

          下面引用我自己的案例分析,因為對產品理解不夠到位,設計過程比較坎坷,經歷了幾個版本的優化。








          【引申思考】


          對晉盈匯app來說:

          1.用戶層面上,在不同版本的情況下需要緊跟不同的用戶引導頁,尤其這類理財類等APP,使用操作都是比較繁瑣,因此需要用戶引導幫助用戶玩好APP;

          2.品牌形象上,可以深化品牌價值,比如提煉產品slogon,吉祥物等,啟動頁是用戶打開app,第一眼看到的地方,需要讓用戶深刻體會到產品的核心價值觀。

          3.商業用途上,可以利用啟動頁配合營銷事件,實現商業價值。

          4.從技術層面,程序可以利用啟動頁的2~3秒內,預加載一些東西,使得后面的用戶體驗更好。


          啟動頁更多的是在啟動過程中的2~3秒內,體現app的核心的品牌價值,而品牌價值通常體現在產品的情感化設計上。


          情感化設計基于三個基本層次水平:本能水平的設計、行為水平的設計、反思水平的設計。

          本能水平的設計——外形(UI界面,整體視覺感受);
          行為水平的設計——使用的樂趣和效率(把完成目標前的過程樂趣化,如何最便捷的觸達相應功能,或達成某結果);
          反思水平的設計——自我形象、個人滿意、記憶(強化品牌傳播,構建品牌形象,讓品牌成為一種文化)。


          情感化設計點:登陸界面、啟動頁、引導頁、節日閃屏、404、刷新加載...




          強化品牌標識,有利于品牌傳播



          上圖是美團外賣的閃屏,以插畫這種具有親和力的表現手法去搭建一個場景,講一個小故事隱喻一個情感。然后傳遞給用戶一個主題。而插畫下方,則是美團的品牌標識:袋鼠LOGO、文案“美團外賣,送啥都快”。


          當你聽到電腦發出“滴滴滴”的時候,你就知道這是QQ來消息了,聲音也是一種品牌標識。



          彌補產品在用戶使用過程中發生的意外



          上圖是ofo共享單車在用戶退押金時的三個提示頁面,分別是告訴用戶ofo的作用是讓你便捷輕松出行,退押金后損失的優惠,最后是用利益誘惑你。從三個層面去打用戶的痛點。不過確切來說只有第一個界面算是與用戶情感化交流,后兩個算是再利用人的貪欲。


          關于文案的情感化設計要分情況,根據APP所分領域、調性和目標用戶人群的特性而定。



          轉自:站酷-嗚嗚吉良斯基

          如何創建精致的UI界面布局篇

          ui設計分享達人

          前言

          前面已經完成這個系列的 “排版和圖形”兩篇文章,本周接著后面的 布局篇幅,我們知道布局的好壞直接影響產品美觀度,不同形式的布局,給用戶帶來的感受是不一樣的,產品也將會有不一樣的性格,因為布局直接影響界面空間疏密程度,不同產品都有著不同空間,那么我們要如何做,才能更好的去布局,并且能在激烈的競爭中脫穎而出,現今大部分產品基本都是長得差不多,作為設計師更應該去多研究一些布局趨勢,并能將其融匯在自家產品中。 




          為什么要重視布局

          - 
          布局對界面設計來說十分重要,不僅是我們常說的在移動端或者web端的設計中,他在車載中、電視端UI或者VR設計同樣有很大影響。我們知道界面設計中最關鍵的五大基礎語言;形,色,字,質, ,其中 構(結構)即是我們所說的布局,五個維度之前已經和大家分享了 圖形和字體篇,今天我們可以看下布局對界面設計的影響,以及我們該如何通過布局來使界面設計看起來更加有范,更有自己的視覺特征點在里面。 




          目前主流布局趨勢是怎樣的

          -

          前面在向大家介紹布局的重要性和他對界面設計的影響,那么如果我們需要做出一些比較有創新的布局來提高界面精致度,該如何去下手呢?我們可以通過觀察目前主流一些趨勢做法,了解國外設計師如何找到更有創意的方式來設計他們的布局 - 并將一些創意運用到界面設計中的,下面我們一起看下。 





          偏移與疊加網格布局

          -

          網格布局我相信大部分人都知道,很熟悉,那么今天所說的偏移疊加網格布局是什么樣子的呢?其實就是我們在設計界面時候,把最底層基礎網格搭建好后,上層的內容排版,通過錯落疊加方式來布局,這種布局的優點是留白空間大,呼吸感強,圖文錯落交織一起,形式感增強。缺點是,運用的范圍會小一些,承載內容少,一般Web端運用比較多。當然也有一些移動端設計個性化產品存在這樣的布局 (Rover APP)可以去下載體驗下。 


          上圖文字與圖片交疊錯落排版,圖片與圖片之間也是網格交錯



          上面移動端設計,設計師通過留出左側空網格,整體內容往右側偏移,導航相對內容來說做了差異化設計,并未進行偏移設計(看我上圖紅框部分)  。這樣做的目的是因為,我們點擊漢堡菜單的時候,本來整體就要往右側移動,如果再繼續移動,那么內容會顯示不下,同時視覺效果并沒有很好



          半偏移網格布局,界面中并非所有的內容都偏移底層網格,而是部分模塊這樣去做,原因是內容多的情況下。





          分屏布局

          - 

          分屏布局,顧名思義就是將屏幕進行幾種不同區域的劃分,然后內容分布排版在里面,分屏布局解決的主要問題將屏幕大的設備進行合理劃分空間設計,一般是在橫屏運用比較多,比如PAD,或者WEB或者車機中控屏,下面一起看下分屏布局在實際設計中的具體表現



          上圖界面設計采用了1/2分屏布局,將圖片與內容文字進行區域劃分,下圖是將主文案擺放在分割區域中間(文字較少情況下可以這樣去做)增強形式感。當然分屏布局可以有多重形式,列如,2/3,1/3,3/4等等,可以根據內容進行選擇合適分屏





          Z軸視差布局

          -

          視差布局,在web app或者web端布局常用比較多的一種,運行方式當滑動頁面內容時內容與內容之間運動速率會有時間差,同時Z軸空間位置也會有深度差異,這樣就形成了視差效果,視差布局一般在H5界面出現比較多,用于營銷場景會多一些,當然WEB端倒是比較常見 


          地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/





          內容重疊布局

          - 
          內容重疊布局,打破了傳統平整的極簡注意風格,扁平化設計將會加入Z軸空間元素,使得整體設計有了新穎的布局方式,這也是一種區分競爭產品的布局方式,一般內容重疊產品大多出現在偏雜志化設計的產品中,如之前我介紹圖形篇時候提到 韓國29cm
          他們詳情頁,運營頁面運用了重疊布局。 



          地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/






          卡片布局

          - 
          為什么要把卡片布局拿出來講?卡片布局應該是我們見過最多的布局了,卡片布局也會有很多種方式去布局,根據產品內容復雜程度去建立卡片容器大小,卡片作為承載內容的容器,對于響應式布局也是非常有利的支持,我們看appstore,behance的移動端,都是卡片布局。 



          卡片布局還有一個最大好處就是,他能夠封裝內容,使得畫面布局整潔,所有內容都往容器里面放,信息之間保持很好的區分



          全封閉卡片布局,內容之間通過卡片封裝,中間無空隙





          自由式網格布局

          - 
          這種網格布局相對來說比較開放性的,布局上多以卡片承載內容為主,卡片跟隨隱形網格隨機分布在畫板中,有點類似我們說的暴瀑流布局方式,這種會比較靈活,一般會在攝影類,雜志類,文藝類產品居多。 







          如何運用這些布局進行創新設計

          -

          上面已經列舉了目前比較流行的一些布局,可能部分人還是感覺不會使用,也不會很好的去利用在自己設計中。要么就直接把別人布局抄襲過來,其實是有方法的,我們可以把自己認為比較好的一種布局拿出來,然后拆解他,拆解完后,再來重新組裝,組裝的時候,你可以參考下其他布局,兩者集合起來,就像樂高積木一樣,你可以有很多種組合方式。 


          上面利用樂高積木思維重新對布局進行拆解組合,當然一切的布局都是基于當前你的主旨,你的產品內容,找到合適布局,然后去研究他,并且拆解,然后重新搭建屬于自己產品一套布局規則





          總結

          -

          全文向大家介紹5種布局思路,當然其實不止這5種,但是其他布局相對來說會運用少一些,這些布局我們可以加以學習利用,可以運用在任何設計中去,當然運用的時候,一定要清晰知道自己產品的主旨目標,用戶群體,合理運用布局,做出創新設計!


          轉自:站酷-設計TNT 

          如何讓你的設計更有說服力?掌握這五個體驗設計原則··

          ui設計分享達人

          從數個項目中總結出的體驗設計原則,包括詳細的舉例說明

          李笑來說過一句話:審美常常并不需要知道原理,但創造美的人必須有方法論,否則不可能持續創造。但是很多人總覺得背方法論是笨工夫,高手難道不應該根據場上局面隨機應變嗎?但事實是,隨機應變才是笨辦法,方法論和成語典故、數學定理一樣,是人腦思維中的快捷方式,“聰明人”之所以能做到隨機應變,是因為他們腦中存有足夠多方法論,當遇到事情時,這些方法論像神經一樣互相連接,給出最優的解決方案。

           

          今天就跟大家分享設計的方法論——設計原則,在方案輸出時,可以將設計原則作為方案的自檢工具,這樣在方案內審時,面對領導和同事的質疑,除了說“大廠都是這么做的”這樣蒼白無力的解釋外,還有更多的設計原則做支撐。

           

          一、一致性

          一致性的益處:對用戶來說,一致性可以降低學習成本,對開發團隊來說,可以減少錯誤,降低產品的維護成本,提高代碼和設計的復用率。對企業來說,一致性意味著產品的不同模塊要有相似的外觀、感覺和行為,這種特性會被擴展到企業其他產品中(比如Adobe旗下的產品都嚴格保持著相同的標準),有利于強化用戶對品牌的認知,建立品牌忠誠度。

           

          一致性的弊端:很多設計師容易被這一原則而禁錮,進而成為設計師偷懶的借口,設計師有時為了強調一致性而忽略了特定情境下的用戶行為和使用模式,所以在設計時不能只關注用戶的感覺和品牌認知,要根據特定場景敢于創新。

           

          一致性可以從以下幾個維度分析:

           

          1、交互行為一致性,交互行為一致性又包括操作方式,控件,控件位置等。拿最近做的項目舉例,「轉到銀行卡」和「信用卡還款」雖兩個不同功能,但盡量使模塊內控件,控件位置及操作方式保持統一。


          2、視覺表現一致性,包括風格,色彩,文字,圖標,圖片等。風格和色彩的統一比較容易理解,這里詳細說一下圖標和圖片如何保持統一。


          圖標的統一性:

          1)一款產品在各個平臺上的圖標要一致

          2)多款產品在一個平臺上的圖標之間的風格或規范要一致

          3)一款產品的每個圖標的風格、細節、體量感上要一致


          如何做到每個圖標風格,細節,體量感上的統一?

          1)保持圖標的復雜程度或簡約程度統一

          2)不使用潦草、手繪的造型,幾何形更容易達到統一

          3)保持圖標的維度統一(二維/三維)

          4)保持圖標陰影、漸變等樣式統一或均無樣式

          5)保持圖標顏色或圖標背景的顏色統一

          6)保持圖標的尺寸和比例統一(體量感)

          7)保持圖標線的粗細統一

          8)保持圖標圓角大小統一


          如何做到圖片的一致性:

          1)圖片的處理方式一致(尺寸比例,圓角,投影)

          2)圖片的風格一致,圖片風格是否保持統一視產品屬性而定,像淘寶這樣的電商平臺想要保持圖片風格的統一性簡直要了店家的命,但是圖片的處理方式可以做到統一,比如淘寶的商品圖大部分是灰色背景等。

           

          3、文案的一致性,文案的人稱,風格保持一致,網易云音樂的文案都是用的第二人稱,且具有很強的趣味性。

          二、優先級

          優先級可以從以下幾個維度分析:


          1、功能優先級:把握核心需求,突出亮點功能,拿最近做的項目舉例:轉賬主頁面功能優先級最高的是「轉到銀行卡」「微轉賬」,所以在頁面布局、所占比重上強調這兩個功能,同時上滑時兩個按鈕變小凍結在頁面頂部,方便用戶快捷使用。


          2、內容優先級:內容分級,突出核心內容。拿最近做的項目舉例:代金券詳情頁,根據用戶使用卡券的場景,以及數據分析得出的內容優先級對內容進行布局與設計。將優先級最高的代金券二維碼放在用戶視線觸達的位置,當用戶上滑時,底部出現全局浮動的按鈕,可快速顯示二維碼。


          再比如,轉賬后的狀態頁面,用戶最關心的內容是轉賬后的狀態及轉賬金額,其次是收款方信息以及轉賬備注,將信息進行整理、歸類、隱藏、刪減,避免不重要信息對用戶獲取重要信息時的干擾。點擊箭頭可查看更詳細的轉賬信息,最后的頁面設計如下:


          3、交互優先級:主要路徑清晰,減少干擾和分支。如下轉賬流程中,根據用戶每一步驟的目的與使用場景進行信息呈現,該出現的時候出現,不該出現時隱藏,分步驟進行,使轉賬這一主路徑清晰明了,減少其他信息對用戶的干擾。


          4、視覺優先級:重要的視覺信息第一眼看到,主要次要信息有所區分。如微信錢包頁面,收付款和錢包的視覺優先級明顯高于下方的騰訊服務。美團首頁上方雖都是功能按鈕,通過圖標的體量、大小、位置拉開彼此層級,突出展示「掃一掃」「付款碼」「紅包/卡券」「騎單車」這些功能,很好的引導了用戶視線,完成產品目標和用戶目標。


          三、易讀性

          易讀性可以從以下幾個維度分析:


          1、使用用戶語言而不是開發者語言,貼近生活實際而不是學術概念。圖1是改版前的頁面,頁面的核心目的是通過圖表、止鼾次數、分貝向用戶傳達止鼾器的止鼾效果,呈現方式不直觀,且用戶對分貝并沒有確切的概念,圖二將分貝巧妙的轉化成蜜蜂的聲音,增強了易讀性,在這里蜜蜂的聲音就是用戶語言,分貝即開發語言。


          2、符合用戶認知與心智,延續約定俗成概念。蘋果的首席設計師喬納森·艾弗說:“好的設計無需認知門檻”,好的設計不需要任何指示用戶就知道如何操作。如下圖蘋果系統的亮度設置,向上滑動是提高亮度,向下滑動是降低亮度,而不是向下是提高,向上是降低。


          再比如,根據我們的正常認知,下一步應該在右,上一步在左。


          3、保持簡潔,不給用戶造成困擾與疑惑。還是拿之前做的項目舉例:微轉賬不同于普通的銀行卡轉賬,需要給用戶進行解釋說明,改版前的說明直接將大段的解釋文字展示給用戶,可讀性差,改版后將大段的解釋轉化成4個直觀的步驟,對用戶來說更容易理解。

          四、容錯性

          容錯性可以從以下幾個維度分析:


          1、操作前可預知:有預防用戶出錯的措施,關鍵操作有確認提示,及早消除誤操作。如圖1輸入轉賬金額時提前告知用戶銀行卡余額,避免余額不足讓用戶重復輸入;圖2提前告知用戶提取的金額是50的倍數,避免用戶出錯。



          分期還款時,提前告知用戶一個賬單周期只能申請一次分期,且在用戶二次確認的彈出框再次提示。



          2、操作中有反饋:給用戶明確的錯誤信息,并協助用戶方便從錯誤中恢復工作。如在分期金額輸入錯誤時及時告訴用戶出錯的原因。



          3、操作后可撤消:允許用戶撤消錯誤操作,如mac系統垃圾箱中「放回原處」功能:



          微信對話中的「撤回」功能,這些都體現了系統的容錯性。


          五、可控性

          可控性可以從以下幾個維度分析:


          1、記憶及預測用戶行為,幫助用戶做些事情,減輕用戶記憶負擔。如mac系統的密碼管理可以幫助用戶記住常用的賬戶密碼:

          郵件中,輸入收件人的姓,軟件能自動檢索出該姓下曾出現過的所有用戶的郵件地址。


          2、對操作給予及時反饋,用戶能了解操作是否已生效,用戶在界面上的任何操作,不論是單擊、滾動還是按下鍵盤,或者操作狀態變化,界面應及時給出反饋。


          3、將操作狀態或進度顯示出來,用戶能了解當前系統狀況,如讓用戶實時了解貨物的物流信息,會減輕用戶等待的煩躁感,同時增加可控感。


          4、用戶清楚知道自己當前在哪里,退路在哪里,可以去哪里,如分頁控件就能明確的告訴用戶自己在哪,退路在哪,還能去哪。




          5、提供適時幫助、必要的信息提示,如最常見的功能引導



          回顧:


          一、一致性

          1、交互行為一致性:操作,控件,位置。

          2、視覺表現一致性:風格,色彩,文字,圖標,圖片。

          3、文案措辭一致性:提示語,功能按鈕等。


          二、優先級

          1、功能優先級:把握核心需求,突出亮點功能。

          2、內容優先級:內容分級,突出核心內容。

          3、交互優先級:主要路徑清晰,減少干擾和分支。

          4、視覺優先級:重要的視覺信息第一眼看到,主要次要信息有所區分。

           

          三、易讀性

          1、使用用戶語言而不是開發者語言,貼近生活實際而不是學術概念

          2、符合用戶認知與心智,延續約定俗成概念。

          3、保持簡潔,不給用戶造成困擾與疑惑。

           

          四、容錯性

          1、操作前可預知:有預防用戶出錯的措施,關鍵操作有確認提示,及早消除誤操作。

          2、操作有反饋:給用戶明確的錯誤信息,并協助用戶方便從錯誤中恢復工作。

          3、操作后可撤銷:允許用戶撤銷錯誤操作。



          五、可控性

          1、記憶及預測用戶行為,幫助用戶做些事情,減輕用戶記憶負擔。

          2、對操作給予及時反饋,用戶能了解操作是否生效。

          3、將操作狀態或進度顯示出來,用戶能了解當前系統狀況。

          4、用戶清楚知道自己當前在哪里,退路在哪里,可以去哪里。

          5、提供適時幫助、必要的信息提示。


          -希望此文對你有一點幫助


          轉自:站酷-poppy



          干貨|尼爾森十大可用性原則案例解析

          ui設計分享達人

          尼爾森的十大可用性原則,它們被稱為「啟發式」,<br>被奉為交互設計師的入門法則。

          開篇靈魂拷問:


          你認為一個怎樣的產品才算是一個好的產品?

          這個問題耳熟嗎?面試的時候是不是有被問到過?
          我們經常使用的那些產品,哪些是好的產品呢?

          當我們談論一個 APP 產品時,
          作為用戶你最關心的是什么?
          一般都是是這個產品好用嗎?功能復雜嗎?
          而不是這個產品用戶界面顏色好看嗎?
          交互的動效酷炫嗎?

          互聯網已經深入到每個人的生活當中,
          時刻影響著我們;
          一個好的產品會給我們帶來便捷,
          使我們的生活變得簡單而又美好;
          也會有一些產品使用時會感到不舒服,
          糟糕的產品體驗會讓我們的生活變得復雜而又煩惱。
          所以,決定一個產品好不好用,
          能不能長期使用都是用戶體驗直接決定的。
          用戶體驗關注的是在滿足用戶需求的同時帶給用戶美好的感受。

          接下來我們來聊一聊「尼爾森十大原則」,
          這十大原則是具體而又全面的用戶體驗可行性檢驗方法。

              
          尼爾森是誰?
          雅各布·尼爾森(Jakob Nielsen)是畢業于哥本哈根的丹麥技術大學的人機交互博士,他擁有79項美國專利,專利主要涉及讓互聯網更容易使用的方法。于1995年1月1日發表了「十大可用性原則」。1995年以來,他通過自己的 Alertbox 郵件列表以及 useit.com 網站,向成千上萬的 Web 設計師傳授 Web 易用性方面的知識,盡管他的一些觀點可能帶來爭議,至少在 Web 設計師眼中,他是 Web 易用性領域的頂尖領袖。2006年4月,并被納入美國計算機學會人機交互學院,被賦予人機交互實踐的終身成就獎。他還被紐約時報稱為“Web 易用性大師”,被 Internet Magazine 稱為 “易用之王”。
                  
          尼爾森的十大可用性原則,它們被稱為「啟發式」,      
              
              
          是廣泛的經驗法則,而不是特定的可用性指導原則。
          雖然是1995年提出來的,
          但是至今仍然被奉為交互設計師的入門法則,
          我們不能把它上升為一種標準,
          而只當做一種經驗來學習,
          然后跟現實中的設計結合來使用。
          因為尼老師是從 web 設計提出的十大可用性原則,
          我們要結合的是目前移動互聯網的特點,

          然后在「尼爾森十大原則」的結構下探討在用戶體驗上達到的目標。


          尼爾森十大可?用性原則為:

          01. 狀態可見原則 

          02. 環境貼切原則 

          03. 撤銷重做原則

          04. 一致性原則 

          05. 防錯原則

          06. 易取原則 

          07. 靈活原則 

          08. 易掃原則 

          09. 容錯原則 

          10. 人性化幫助原則


          下面我們就針對每一條來單獨分析一下吧~


           ·.  狀態可見原則 
          系統應該讓用戶知道發生了什么,
          在適當的時間內做出適當的反饋。
          不要蒙蔽用戶;
          溝通是所有關系的基礎,無論?還是設備。

          示例:在淘寶里,我下拉時他告訴我「松開刷新」,也就是現在還沒有開始刷新;我松開后狀態變更成「刷新中」,表示現在正在刷新。
          這樣的設計告訴我們,界面現在是什么狀態,現在在干嘛,在整個功能的變化過程中我們都能看到對應的文字描述。


          其他示例:下拉刷新時的加載中,加載完成提示,收藏成功、支付成功、實付失敗等提示。


          ·. 環境貼切原則

          功能和服務貼近用戶使用的場景,

          符合當前場景用戶的體驗。

          產品的功能和服務應該貼近真實世界,

          讓信息更自然,邏輯上也更容易被用戶理解。


          示例:我們在店里買東西的時候經常會聽到這樣的聲音「支付寶導致:5元」就是貼近環境的設計。
          商家需要確認你是否付錢,
          但是又經常忙于手頭的事情無法及時查看;
          而這樣功能的設計,商家即使在忙著手頭的事情依然能通過聲音來確認已經收到你的錢了。
          這樣的設計對于商家和消費者是友好便捷的。


           ·.  撤銷重做原則 

          在使用產品時了解和掌控當前頁面。

          如果用戶誤操作,可以隨時撤銷,用戶在使用產品時足夠自由。


          示例1:我們用微信和對方聊天時,當我們寫了很多字,發出去時卻發現其中有錯誤,這時我們可以使用微信的撤回功能,體驗更好的是,撤回消息旁邊有「重新編輯」功能,可以讓之前編輯的文本回到對話框重新編輯再發送。如下圖:


          示例2:iOS系統照片的刪除和撤回


          ·. 一致性原則

          同樣的文字、狀態、按鈕,都應該觸發相同的事情,遵從通用的平臺慣例。也就是,同一用語、功能、操作保持一致。主要包括以下五個方面:


          1. 結構一致性

          保持一種類似的結構,新的結構變化會讓用戶思考,規則的排序能減輕用戶的思考負擔。

          示例:微信中每個模塊的條目都有統一的「圖標+文字信息」的結構樣式,能讓用戶快速了解每一個模塊;


          2. 色彩一致性

          產品所使用的主要色調應該是統一的,而不是換一個頁面,顏色就不同。

          示例:淘寶的圖標顏色與界面的主色均為橙色,也包括其中一些標簽和強調的文字顏色都是橙色色。整個界面除了圖片的有效信息外,都通過灰、白、橙色色來呈現,界面保持了很好的一致性;


          3. 操作一致性

          能在產品更新換代時仍然讓用戶保持對原產品的認知,減小用戶的學習成本。

          示例:微信在對話框和通訊錄都采用了左滑出操作的交互,如下圖:


          4. 反饋一致性

          用戶在操作按鈕或者條目的時候,點擊的反饋效果應該是一致的。

          示例:QQ的每個分組點擊后都是向下展開組內成員列表;


          5. 文字一致性
          產品中呈現給用戶閱讀的文字大小、樣式、顏色、布局等都應該是一致的。
          示例:例如微信幾個關鍵界面的字體:三個主界面內容結構不盡相同,但是,列表的標題字體和間距都一樣,這樣讓整個APP視覺上看起來很舒服;


           ·.  防錯原則
          比出現錯誤信息提示更更好的是,用設計防?止這類問題發生。在用戶選擇動作發?生之前, 就要防止用戶容易混淆或者錯誤的選擇。

          1. 限制操作范圍與條件;
          示例:未輸入驗證碼前,底部的登錄按鈕是置灰不可點擊的,只有填寫完整,底部的登錄按鈕才會變為可點擊狀態。這就是為了防止用戶犯更多錯誤;


          2. 對有風險的操作進?二次確認;
          示例:刪除個好友時,通過二次彈窗給出防錯措施。

          ·. 易取原則

          減少用戶記憶負荷,在適合的時機給用戶需要獲取的信息。
          1. 為用戶提供歷史記錄、關注、收藏等功能;
          示例:愛奇藝為用戶提供了看過記錄和我的收藏,幫助用戶記憶:



          2. 選擇而不是輸入,盡量降低輸入成本;

          示例1:打車軟件自動獲取當前位置;

          示例2:iOS系統收到驗證碼后自動帶入到鍵盤,點擊直接輸入;


          ·. 靈活原則

          對于新用戶來說,需要功能明確、清晰,對于老用戶需要快捷使用高頻功能。不可為了某一種用戶,把不必要的信息占據重要部分。主要體現在3個方面:

          1. 自定義功能或模塊的展示位置;

          示例:支付寶首頁的應用是可以根據自身喜好自定義的,包括定義常用應用、排序、刪除、新增等等。這樣用戶可以根據自己的個人興趣定制自己適合的應用分布方式,這就叫做用戶定制常用功能,如下圖:


          2. 將“常用”自動歸納以提升使用效率;

          示例:微信聊天界面表情彈窗中會有一個「最近使用」的模塊,它把個人平時使用頻率或者次數最多的表情進行歸類。當用戶使用的時候,能很快的找到自己喜歡或者常用的表情,提高了聊天效率;包括餓了么的「我的訂單」里的每一個訂單都可以通過再來一單重新一鍵下單,如下圖:


          3. 縮短操作路路徑,提升使?用效率與體驗;

          示例:微信的對話框,當點擊「+」調出下面的操作選項時,會默認彈出剛截圖或拍照的照片,方便用戶直接調取,還有APP長按后出來的快捷操作列表,如下圖:


          ·. 易掃原則

          直譯:美學和簡約的設計;頁面不應包含不相關或很少需要的信息,頁面中的每個額外信息都會降低主要內容的相對可見性。

          示例:如下圖列表中出現的信息都是用戶比較關注的信息,比如配送費,配送時間,距離等;攜程的選擇機票界面講最重要的時間和機票價格放大突出,讓用戶能一眼看到,如圖:


           9 ·. 容錯原則

          直譯:幫助用戶識別、診斷和從錯誤中恢復;我們盡量避免用戶出現錯誤,但當出現錯誤時,我們應該盡量去安撫用戶的挫敗感。

          ?配圖+文字代替「404」,明確告訴用戶哪?錯了和解決方案。

          示例:界面加載失敗時的刷新提示,還有登錄時的手機號碼校驗,如果手機格式錯誤會出現會提示用戶手機格式不正確和正確的格式。


           10 ·. 人性化幫助

          幫助性提示最好的方法是:

          1.無需提示:非常簡單易懂,用戶看界面就知道怎么操作,無需提示;

          2.一次性提示:只需要一次提示用戶就懂如何使用;

          示例:常見的新功能引導、引導?等,示例:


          3.常駐提示: 較重要的提示,用于指導或幫助用戶;

          示例:支付寶轉賬時,常駐在頂部的安全確認提示,還有轉賬時的服務費提示,如圖:


          4.幫助文檔:稍微復雜一點的軟件,雖然要讓他盡量簡單但幫助文檔都是必要的;

          示例:微信設置界面里的「幫助與反饋」,還有支付寶轉賬時彈出來的「求助反饋」,點進去后的常見問題界面;


          以上就是我對Jakob Nielsen(雅各布·尼爾森)的十大交互設計原則的理解和實例解讀,希望對大家有所幫助。如果大家同樣對這些方面有些興趣或者看了后有些什么想法,歡迎一起討論。

          轉自:站酷-搞設計的月野兔



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

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