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

          彈窗其實是一個很泛的概念,幾乎所有在頁面中有彈出的行為的操作都能稱之為彈窗,其實是有點混亂,本文旨在梳理它們之間的關系


          轉自:站酷-備哥


          一文讀懂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集成

          這一趨勢不是一個新趨勢,但絕對值得一提。混合動畫就是使用為此創建的特定軟件將2D與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

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

          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

          但是,隱藏式的導航欄不利于發現,因此電子商務和新聞等行業的設計人員應該注意。你可以通過放置其他類似產品的鏈接使缺點最小化(比方說亞馬遜的“相關購買”)從而最大限度地減少隱藏菜單的缺點?;蛘吣憧梢詺w納導航菜單的類別,將它們精簡為單行導航(如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、圍繞用戶的實際思考方式構建你的信息架構??ㄆ诸惖瓤捎眯詼y試可以為你的目標群體揭示最直觀的導航方案。
          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国产综合