少妇无码一区二区三区,曰韩亚洲AV人人夜夜澡人人爽,亚洲天堂男人影院,丰满的闺蜜2中文字幕 欧美日韩亚洲第一AⅤ影院_国产精品午夜无码试看_亚洲视频中文字幕更新_中文无码字幕中文有码字幕

首頁

日常APP體驗-交互知識點匯總-2

濤濤

Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title



Image title


Image title


Image title


Image title


總結:

大家在日常使用APP過程中也可以帶有目的性,發(fā)現(xiàn)一些好看的UI或是好的交互點可以截圖保存和思考:為什么這么設計?目的是什么?分析其優(yōu)勢之處,還可以和競品的相似交互進行對比,始終相信“不積跬步 無以至千里”,通過在點滴中慢慢積累,今后當你遇到類似的問題時就可以快速回憶起這些知識點,自然就可以運用自如,thanks~

日常APP體驗-交互知識點匯總-1

濤濤

在這里先給大家分享一組近期APP使用過程中發(fā)現(xiàn)的UI&交互知識點,大家可以一起學習交流,對于個人觀點不認同的可以在下面留言探討,thanks~

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

【產(chǎn)品即場景】體驗先行

濤濤

產(chǎn)品即場景,體驗又貫穿整個產(chǎn)品~孰重孰輕早已分不清

Image title

產(chǎn)品即場景,而場景化核心要素之一的“體驗”,是其中最重要的一項。

本文從體驗出發(fā),結合AARRR(用戶增長)模型進行闡述,其中我認為該模型的使用必須是在產(chǎn)品搭建的場景下才能運作的。而其中涉及每一步的良好體驗剛好又反哺場景的完善。

從獲取-激活-留存-轉(zhuǎn)化-傳播每一個步驟中都存在內(nèi)部因素和外部因素。本文只講內(nèi)部因素,產(chǎn)品從最開始的外部獲客,轉(zhuǎn)向產(chǎn)品內(nèi)部的使用體驗,再轉(zhuǎn)向外部傳播的這么一個過程。

Image title

文章不是教案,更不是真理。希望大家?guī)е械难酃馊タ创恳黄恼?。畢竟思辨精神才是形成獨立思維的法寶。由于文章較長,我會分成上下兩部分發(fā)布,進入正文:


獲取(ACQUISITION)分為三個部分:


一:自然流量的獲取


自然流量的獲取,我們能干涉其中的體驗非常少,只能打磨產(chǎn)品本身。但是自然流入的用戶一定是基于以下幾個點中的其中一個或多個。我們或許可以干涉體驗前~


1.某個社會現(xiàn)象、熱點所引發(fā)的相關功能性需求(例如前不久滴滴司機殺害空姐事件,引發(fā)多少芳齡少女的恐慌。提高了強烈的安全意識,這時候你會發(fā)現(xiàn)App Store里面一款app殺了出來“怕怕”(有興趣的朋友自行下載體驗),正是這個社會熱點現(xiàn)象引發(fā)的自然流量暴增。當然也不排除產(chǎn)品借這個熱點營銷自己的產(chǎn)品)


2.某個痛點確確實實需要解決(當某類用戶存在某個痛點時,會自己通過搜索或者同類產(chǎn)品對比選擇一款產(chǎn)品進行使用,如果你的產(chǎn)品剛好能幫助使用者解決痛點,那么你成功吸引了用戶。)


3.純粹進行產(chǎn)品的體驗(產(chǎn)品發(fā)燒友、同類競品的體驗人員、無意中下載的等)。我們稱為無效流量,因為這部分用戶一般是不太可能成為產(chǎn)品的忠實粉絲的。他沒有明確的目的、沒有明確要解決的痛點。


二:運營推廣的獲取


運營推廣這個名詞在互聯(lián)網(wǎng)誕生之前就已經(jīng)存在了。只是說原來傳統(tǒng)的營銷手段即產(chǎn)品-價格-渠道-促銷開始逐漸失效。轉(zhuǎn)而變?yōu)閳鼍盎倪\營推廣。將推廣落實到具體的小場景中。


1.線上推廣

其中線上推廣包含線上營銷活動(營銷活動又分為已有話題進行營銷【可以選擇融入當前的熱點話題類似節(jié)日、娛樂圈大事件等】&【提供話題痛點解決方案進行營銷】和制造話題營銷【創(chuàng)造業(yè)內(nèi)的話題】【通過深度用戶進行制造話題】、優(yōu)惠活動(包括邀請好友得好禮、會員優(yōu)惠、某個節(jié)日優(yōu)惠等)。線上推廣無非就是通過網(wǎng)絡搭建虛擬場景,通過場景邊界的不斷延伸,覆蓋吸引更多的用戶參與進來。


2.線下推廣

線下推廣包含地推(地推不可避免的會帶來2部分的人群:被地推活動中的獎品吸引的人;確實被產(chǎn)品的介紹所吸引的人)、海報&代言(同樣會有2部分人群:被明星效應所吸引的人;被產(chǎn)品介紹所吸引的人)、門店的互相導流合作。線下推廣效率遠遠沒有線上推廣來的快。但是對于需要線下場景的產(chǎn)品來說,這又是必不可少的。


三:社群自傳播


通過單點擊破,這就需要運營團隊有很好的洞察能力,找到符合產(chǎn)品調(diào)性的社群,通過事件引爆該社群或者社區(qū),讓社群成為你產(chǎn)品的擁護者和傳播者。


1.通過老帶新的模式進行獲取用戶

當產(chǎn)品與老用戶之間建立很好的紐帶關系后,老用戶自然會以個人為中心,向外幫你宣傳產(chǎn)品。


2.引爆社群

通過各類社區(qū),找到符合你產(chǎn)品的目標人群。通過對該社群的研究,運用社群內(nèi)部語言或者表達,調(diào)動整個社群幫你發(fā)力。有點及面的擴散,稱之為“氣球理論(很細的一根針就能戳爆氣球)”這同樣是能引爆傳播性特別重要的一點。


3.參與感(社會關系綁定)

當你周圍的人都在轉(zhuǎn)發(fā)或者都在使用的時候,如果你不了解或不使用的話,會引起個體的孤獨感。也就是說“他們都在玩,我不玩就落伍了”,但是這種情況在產(chǎn)品推廣的前期一般不太會出現(xiàn)。當傳播勢能達到一定程度的時候,才會出現(xiàn)刷爆朋友圈!


激活(ACTIVATION)分為二個部分:


當用戶從外部導流進產(chǎn)品后,這時用戶的去或留都跟產(chǎn)品&業(yè)務有關。如何讓用戶在進入產(chǎn)品后自然而然的進行使用也就是防呆原則。對,通過引導或者吸引使用者進行下一步操作。(打個比方,你去一家陌生的餐廳,進去后沒任何人招呼你,沒人告訴你要去選位置或者點菜,是不是有不知所措的感覺,我想你很快就會另尋他家吧)


一:進入產(chǎn)品后的操作引導


1.視覺引導(包括頁面元素優(yōu)先級、頁面元素突出強弱進行視覺上的引導,很常見的就是:在你第一次使用某個產(chǎn)品時,會引導使用者進行第一步第二步的操作,降低用戶對產(chǎn)品的陌生感)


2.動效引導(通過頁面浮層的形式教育用戶如何進行操作,這也是在產(chǎn)品設計中,對新用戶的一種引導方式)說到底就是為了消除用戶對新鮮事物的陌生感和手足無措感。


二:產(chǎn)品本身是否能激起用戶的探索欲


當然這個問題本身是建立在是否能真正的幫助用戶解決某些方面的痛點。否則再強的探索欲,也跟你產(chǎn)品本身沒有關系。如何激起用戶的探索欲?


1.產(chǎn)品整體視覺表現(xiàn)、使用流程的體驗是不是夠吸引人,是不是有屬于產(chǎn)品本身吸引人的點。(當年的path效果,直接將它送上全民熱潮之巔)


2.產(chǎn)品是否對使用者產(chǎn)生持續(xù)的吸引能力,產(chǎn)品前期只有不斷的通過各種方式刺激用戶。(產(chǎn)品體驗優(yōu)化、活動力度、宣傳方式、讓惠讓利等)但需要注意的是:過度營銷不等于有效刺激。


3.產(chǎn)品的任務流程設置是否合理,正常情況都是由簡單到復雜的程度設置任務,由于用戶的沉默成本,當完成一定任務后,就會沉淀下來慢慢成為產(chǎn)品的忠實用戶。(摩拜產(chǎn)品是先讓用戶填寫個人信息,最后才提示充值押金,站在使用者的角度來看,已經(jīng)把個人信息都出賣給平臺了,還在乎那200多塊錢嗎?不然你讓他把流程倒過來試試,先充錢,再填信息。保證沒多少人會用)。流程設置就像鉤子一樣,慢慢慢慢的把用戶勾住。


上半部分先到這里,下半部分會從“留存”“轉(zhuǎn)化”“傳播”角度進行展開~


多數(shù)人能夠成為很厲害的設計師,很厲害的產(chǎn)品經(jīng)理。凡事都會有所謂的套路,當你熟知了解某個行業(yè),或者多個行業(yè)的套路時。你會站在更高的視角看待問題,同樣你會走的比人家更遠更快。所謂的套路,是基于個人而言,可能你有個很好的導師能夠告訴你以往的經(jīng)驗。但是我更認為,套路是通過一步步看似笨拙的努力不斷總結不斷歸納

如何利用 “峰終定律” 改善用戶體驗?

濤濤

一、什么是峰終定律

峰終定律是由諾貝爾獎得主 DanielKahneman 提出的,百度百科上它是屬于心理學上的定義。

我把它結合了自己的理解應用在設計學上可以解釋為:

用戶在使用某個硬件產(chǎn)品,軟件產(chǎn)品或者服務系統(tǒng)來完成自己目標的過程中,用戶情感地圖曲線的波峰(體驗最好)、波谷(體驗最差)、結束點的體驗,決定用戶對整個過程的體驗評價。

而在過程中體驗好與不好體驗的比重,好與不好體驗的時間長短,對記憶幾乎沒有影響。

這一定律主要是闡述人對過去體驗的記憶由兩個因素決定,一個是「高峰」,一個是「結束」。

把用戶情感地圖曲線和峰終定律結合起來,簡單畫一張圖:

既然用戶整體體驗與整個過程中好壞綜合無關,只跟幾個關鍵點有關,那么可以得到一個公式:

用戶整體體驗評價(E)=(y1-y2)+y3

y1,y2,y3 可以稱為關鍵時刻 MOT(Moment Of Truth)

二、日常生活中的峰終定律

這兩天和包子聊到宜家的峰終定律,突然明白了為什么我們有些課程調(diào)研,大家都喜歡去宜家調(diào)研了。

雖然它的店員很少,找貨物也要自己找椅子搬下來,就算只買一件家具也需要逛完整個商場,但是每次逛完結束的時候都可以吃那個特別好吃的「一元冰淇淋」呀,這就是它的「終」。

而在逛的過程中,就像包子講的,它的體驗模式很棒,把產(chǎn)品作為空間的一部分。曾經(jīng)有一位宜家的老顧客也說,宜家商品物有所值,展區(qū)實用,產(chǎn)品隨意試用,大概這就是它的「峰」吧。

扔一個我的學習小伙伴包大佬的分析:

三、互聯(lián)網(wǎng)產(chǎn)品中的峰終定律

如果說峰終定律怎么影響互聯(lián)網(wǎng)產(chǎn)品的用戶體驗的話,可以先舉幾個體驗差的例子。

很多時候,用戶在某個平臺完成某個任務后,會出現(xiàn)很多引誘用戶點擊的贊助商的內(nèi)容。比如問卷星,每次填完,任務結束的時候,它還會打著抽獎的名義接廣告……

再舉個例子,你有沒有過在某些 app 注冊賬號,登錄 or 注冊很多次卻失敗的情況,或者花了很久時間才注冊 or 登錄成功?原因可能是賬號密碼錯誤,可能是注冊流程過多跳出率過高,可能是填寫信息冗雜……

如果這款產(chǎn)品不是用戶剛需的話,最終會導致很多用戶卸載它,就算你之后流程的體驗再好,用戶根本無法體驗到最后。

四、利用峰終定律打造「爽點」

一款好的產(chǎn)品不僅能夠解決用戶的「痛點」,也能刺激用戶的「癢點」,更能打造用戶的「爽點」。

有一些產(chǎn)品能在用戶使用的過程中利用峰終定律打造 「爽點」,提升用戶體驗。

如果用外賣這個來舉例子的話,應該算是一個大的服務系統(tǒng),它會涉及到很多方,比如消費者,商家,騎手等,而這一整個服務系統(tǒng)的設計,只針對消費者而言,流程也會十分復雜,其中利用峰終定律考慮的就更多了。

那就其中用戶(消費者)與餓了么 app 的交互流程來舉例的話,用戶點外賣這個任務:

從打開 app——選擇店——選擇美食——付款,用戶的任務已經(jīng)結束了,但是餓了么會在結束的時候,給用戶一個分享領取紅包的福利,用戶會覺得自己獲得了很大的優(yōu)惠,體驗會十分好,這也就是利用了峰終定律的「終」。

我發(fā)現(xiàn)游戲里面對峰終定律是用得最多的,曾經(jīng)玩過 lol,王者榮耀,吃雞手游……

如果問曾經(jīng)玩 lol 或者王者最爽的時候是什么時候,那大概是:比賽過程中的 First blood,penta kill ,killing spree,legendary,you have slained an enermy 等這些配音和畫面的視覺刺激吧。

按照常規(guī)的模式是,殺人后系統(tǒng)直接提示「您已經(jīng)殺滅了一名敵人」,但是它會去強化這種殺人的體驗,將殺人的場景分為多種類型,通過視覺上的彈框擊殺提示與配音上的激勵疊加,把殺人的體驗不斷深化,做到,另外在推塔和偷掉水晶的時候是不是也是最爽的時候呢?我覺得這里就利用了峰終定律的「峰」。

我記得在游戲結束的時候,比如 lol 里面推掉水晶的時候,游戲畫面會停止幾秒,然后再出現(xiàn)水晶慢慢破滅,加上大大的「勝利」二字,有的時候回到大廳還需要等幾秒的時間。

王者榮耀,吃雞這類在游戲結束的時候也會給用戶很多激勵,明明可以在結束后直接回到大廳,但它們會延長這些勝利或者失敗的體驗,如果勝利,當然是爽,還想再擁有這樣的體驗,繼續(xù)打;如果是失敗,那再接再厲,想擁有贏的體驗,繼續(xù)打……

總之就是會讓用戶上癮。它們會把這些用戶體驗做到,在游戲結束的時候這些的體驗就利用到了峰終定律的「終」。

五、利用峰終定律改善體驗步驟

「峰終定律」改善用戶體驗的步驟:

  • 進行可用性測試;
  • 繪制用戶旅程圖;
  • 找到「峰」,「終」時刻;
  • 通過用戶研究的方法找到用戶心中的關鍵時刻;
  • 將「峰」、「終」,「用戶心中關鍵時刻」的體驗優(yōu)化至。

移動端的導航設計模式

濤濤

在《用戶體驗的要素》一本書中,Jesse James Garrett 將用戶體驗分為了五個層級,戰(zhàn)略層,范圍層,結構層,框架層,表現(xiàn)層。

其中在框架層里面有一個很重要的概念就是導航設計,作者對導航設計的定義是:元素的組合,允許用戶在信息架構中穿行。

我覺得可以把導航設計理解為:我們從用戶的心智模型出發(fā),結合業(yè)務目標,對信息架構的一個梳理,來幫助用戶完成目標。

通過自己手機里幾十款 app,總結了以下六種導航設計模式,包括:標簽導航,宮格導航,側(cè)邊導航,列表導航,菜單導航,輪播導航……

簡單介紹了它們的優(yōu)缺點,適用場景,以及一些衍生導航與相關案例……(不過導航設計一定是視產(chǎn)品和情況而定的,并沒有確定的依據(jù)與理論)

一、標簽導航

標簽導航分很多種,有底部標簽導航,頂部標簽導航,底部標簽導航又可以衍生出舵式導航,頂部標簽導航又可以分為靜態(tài)或者是動態(tài)導航……

底部標簽導航是最基本的導航,幾乎絕大部分 app 中都在用,tabbar 位于頁面最底部,一般3-5個 tabbar,有文字+icon,也有純 icon 形式,但大部分是文字+icon 的形式,我想是減少用戶記憶負擔吧,如下:

而關于底部標簽導航的優(yōu)點,缺點以及適用場景也簡單整理了:

我發(fā)現(xiàn)很多用戶發(fā)布或者生產(chǎn)內(nèi)容的 app 會將底部標簽導航進行變體,很多人把它稱為舵式導航,就像這種:

中間的「+」一般是發(fā)布的意思,并且是 app 里面使用最頻繁的一個功能,一般都會重點突出。并且,該標簽中很多時候會有二級導航,二級導航里可擴展性就比較強,如圖:

而頂部標簽導航顧名思義就是 tabbar 位于頂部,最早知道它是在 Material Design 里面,因為 Google Pixel 手機底部存在物理導航,所以將標簽導航置于頂部不會顯得突兀。它很少用作一級導航,一般是二級導航比較多,而且我發(fā)現(xiàn)頂部標簽導航,幾乎都是純文字的形式,比如:

突然想到今天交互設計課上的時候,老師講的人機交互里,重要的操作放在大拇指可觸達的范圍內(nèi)。

而頂部標簽導航,如果是點擊標簽進行操作的話,用戶單手操作就十分不方便,所以我發(fā)現(xiàn)體驗好的 app 的頂部操作導航都是可以直接通過左右滑動屏幕的交互來切換。

而當標簽類目過多的時候,可以通過左滑展現(xiàn)更多標簽,比如很多新聞閱讀類的 app:

如果是可以滑動查看更多的話,一定要通過一些方式告訴用戶可以滑動查看更多,比如最后一個標簽隱藏一半的方式等:

關于頂部標簽導航的優(yōu)缺點以及適用場景,如下:

二、宮格導航

宮格導航,也是十分常見的導航形式,除了一些工具類 app 外,大部分是作為二級頁面展示出來,并且以 icon+文字的形式居多。

如果將宮格的 icon 換成 picture 的形式的話,可以衍生出一種新的類似于卡片式導航的形式 ,可以通過垂直滑動來切換,比如:

那,如果宮格信息太多,我發(fā)現(xiàn)很多 app 會采用分類展示的形式,并且通過水平滑動的方式來切換,比如:

但是上面兩種可以垂直或者水平滑動的形式,一定要讓用戶知道是可以水平或者垂直滑動的,采取的是邊界地方信息只展示一半的形式,告訴用戶可以繼續(xù)滑動……

除此之外,宮格導航還可以在電商里面運用,在首頁的運營內(nèi)容塊,它可以根據(jù)內(nèi)容的重要性調(diào)整模塊的大小,比如:

關于宮格導航的優(yōu)缺點和適用場景,如下:

三、側(cè)邊導航

有些書里面會把側(cè)邊導航叫做抽屜導航,這類導航其實比較少了,原本也是從 Google Material Design 里面提取出來的概念,一般會在首頁呈現(xiàn)一個主要功能,將其他不常用的功能收納放到側(cè)邊導航里,比如:

而關于側(cè)邊導航的優(yōu)缺點以及適用場景,如下:

四、列表導航

列表導航也是十分常見,幾乎在每一個 app 里面都會存在,大部分時候是作為二級導航存在,但是也會存在于一級導航的時候,比如郵箱,iOS系統(tǒng)自帶的設置等。

一般在列表導航里都會有下一個層級,可以通過箭頭來告訴用戶是否有下級菜單。

當列表信息比較多的時候,可以對列表進行分類,可以添加小標題或者直接分隔開。比如:

而在有些列表導航里,我們還需要展示給用戶一些預覽信息,比如 iOS系統(tǒng)里的健康,個人信息里的一些基本數(shù)據(jù)展示,如下:

關于列表導航的優(yōu)缺點以及適用場景,如下:

五、菜單導航

其實菜單導航也可以稱為下拉導航。這也是今天上交互設計課的時候,老師以微信的「+」為例子介紹的一種導航形式。最初了解這種導航形式也是來源于 Material Design 里面的 Menu。

Menu 是臨時的一張紙(paper),由按鈕(button)、動作(action)、點(pointer)或者包含至少兩個菜單項的其他控件觸發(fā)。

比如:

當信息層級變多的時候,菜單導航里要展示一層或者兩層信息,比如大眾點評采取的形式:

關于菜單導航的優(yōu)缺點以及適用場景,如下:

六、輪播導航

還有一些導航比如輪播導航,完全的沉浸式體驗,高度簡潔的導航,比如天氣,但是這種導航因為輪播點的大小不會很明顯,所以用戶很難快速感知自己所在位置,并且輪播導航輪播的數(shù)量也不宜過多 。

其實導航的類型應該還有很多,并且在一個 app 里面幾乎不可能只使用一種導航,哪怕只是一個頁面,也會存在多種導航的組合形式,比如:

總結

  • 導航的形式一定是根據(jù)你的產(chǎn)品的諸多因素進行選取,并不能完全按照我上文的適用場景為依據(jù);
  • 幾乎每一個 app,每一個 app 的每一個頁面,都會涉及到多種導航模式,需要結合具體場景進行組合選?。?
  • 導航的具體展現(xiàn)可以通過:文字,icon,文字+icon 的形式;
  • 有些導航比如標簽導航在設計的時候有多種狀態(tài),比如 unselected,selected 等狀態(tài);
  • 導航在 iOS 和 android 里面的應用會不一樣,比如標簽導航適配 iOS系統(tǒng),側(cè)邊導航適配 android 系統(tǒng);
  • 導航設計必須傳達出它的內(nèi)容和用戶當前瀏覽頁面之間的關系;
  • 能夠引導用戶以很好的體驗完成目標的導航設計都是優(yōu)秀的。

如何畫好一張描邊插畫?

濤濤

描邊插畫:可以簡單理解為眾多線面結合圖標組合在一起,互相呼應而組成一個大畫面。畫面中的元素除了面以外,還具有描邊,因此也叫描邊插畫。

本文內(nèi)容:文章會詳解如何畫一張描邊插畫,教程素材沒有用我之前的插畫來做步驟分解,而是新畫了一張插畫以作示范,繪畫原理都一樣,理解原理就好。除了具體步驟以外,會針對一些易犯錯誤的地方添加重點標記。

一點建議:看完文章后,可以按照我分享的方法來臨摹一遍,但我更趨向于小伙伴們能夠發(fā)揮自己的想象力,做一張屬于自己的原創(chuàng)插畫。畫完后若有不清楚的地方,歡迎在我的公眾號中添加微信并附帶插畫,可給予建議。

一、草圖階段

1. 確立主題,畫草稿

這次插畫的主題源自于我的一個夢:在草地上,遺落的帆布鞋里面長滿了鮮花,小鳥守在花的旁邊歌唱。

確定主題后,把腦海里的畫面畫出來,可以畫在紙上,也可以用數(shù)位板在 ps 里面畫,按照個人習慣就好。我比較喜歡手繪,因此在紙上畫。

2. 打開AI,調(diào)整設置

新建畫布1600*1200

視圖-勾選對齊點

3. 把草圖拉到畫面中,調(diào)整大小

二、線稿

1. 描邊設置及要注意的問題

在描邊插畫中,常見的問題之一就是描邊的粗細問題. 以及描邊間關系的處理問題。

描邊粗細問題(下圖以之前的四季插畫為例子)

描邊間關系處理

描邊設置

描邊的粗細是根據(jù)畫布大小而決定的,1600*1200的畫布,我習慣用 8pt 的粗細的線條,但是如果畫布是1200*900,8pt 則顯得過粗。具體的粗細可以根據(jù)情況而調(diào)整。

2. 線稿畫法

布爾運算法

形狀斷點重連法

形狀生成器

鋼筆勾勒法

鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個插畫中,植物的形狀比較隨性,因此用鋼筆直接勾勒比形狀剪切要快。繪制的過程中,注意調(diào)整線條的平滑度. 弧度,使其規(guī)整。在此不作示范。

三、色稿

1. 增加背景色

2. 色稿層的繪制

3. 顏色調(diào)整

4. 高光與暗部

5. 經(jīng)過高光與暗部塑造后的畫面

四、 風格塑造與整體調(diào)整

1. 風格塑造

最近看到 kit8 大神的畫,突然想到如果白線運用在線性插畫會怎樣,就嘗試了這種風格。把線稿復制一層置于頂上,改成白色,2px 粗細的線,然后向旁邊移動錯位,破一下畫面沉悶的感覺。


2. 整體調(diào)整

看到這里,你應該也發(fā)現(xiàn)了,畫面是比較灰的,因為我都是選擇低飽和度的顏色,如果需要調(diào)整,就在 AI 中把插畫導出 SVG 格式。然后拖到 PS 里面進行色相飽和度的調(diào)整。

3. 保存喜歡的配色

在顏色調(diào)整過程中,遇到喜歡的配色就保存下來,這樣一張插畫就完成了。

聊聊排版中的版面率和留白率

濤濤

一、何為版面率

我們都知道一個版面中必定有版心的概念。何為版心呢?版心就是除去天頭、地腳和左右頁邊距余下的區(qū)域,也是我們頁面內(nèi)容的擺放空間。下圖中灰色塊的區(qū)域就是此頁面的版心。

知道了版心,那么何為版面率呢?版面率就是版心所占頁面的比例,通俗一點講就是版面的利用率。

上面左圖中版心的面積非常大,四周的余白少,版面的利用率高,所以版面率就高。右圖版心面積小,版面利用率比左圖低,所以版面率就低一些。

版面中也有滿版與空版的概念。如上圖,滿版就是沒有天頭地腳與左右頁邊距的,此時版心即整個版面,版面利用率為100%。空版就是版面利用率為0%的。從滿版到空版之間的版面率是遞減的關系。

二、版面率對畫面氣質(zhì)的影響

說完版面率的概念我們再來說一說版面率對畫面氣質(zhì)的影響。

一般來說版面率越高,視覺張力就越大,版面也會更活潑與熱鬧;反之,版面率越小,給人感覺就越典雅與寧靜,版面也會更有格調(diào)。

上圖中高版面率的海報相對于低版面率的更熱鬧與活潑;低版面率的則更典雅。

畫冊中也是一樣的,上圖是我早些年做的一個案例。同樣的內(nèi)容跟圖片,只是版面的利用率不同,我們可以發(fā)現(xiàn)右邊低版面率的作品更安靜和典雅。

版面率的高低能夠影響版面的氣質(zhì),所以我們實際工作中也要根據(jù)項目的氣質(zhì)分配合適的版面率。比方說典雅氣質(zhì)的項目我們就要用低版面率版面,如果用高版面率顯然是與項目本身的氣質(zhì)相悖的。

三、留白率

說完版面率我們再來說一下留白,留白的概念大家都懂。而這里所說的留白更多的是指頁面的負空間。

頁面中去除內(nèi)容后的空間就是負空間,如下面這個頁面。

圖中灰色塊代表圖和文字信息等內(nèi)容,除去這些圖片和文字后,頁面中的其他空間都可以看作是負空間,也就是留白。當然,留白并不一定是白色,所有除去頁面內(nèi)容后的空間都是負空間,如上圖右側(cè)案例,黑色部分即此頁面的留白。

負空間的多少即是留白的多少。留白的多少我們可以用留白率來表示,如上圖,負空間小的留白肯定少,留白率就低。負空間大的的留白肯定多,留白率就高。

留白率就是版面留白的多少,實際上與版面率的概念差不多,如下。

空版留白最多,滿版留白最少。當然這也不是絕對的,有的作品中雖然是滿版,但空間廣闊,比如天空什么的,都可以當作留白來看待。

四、留白率對畫面的影響

上面說來留白率跟版面率也有一定的關聯(lián),所以他們對畫面氣質(zhì)的影響也是如出一轍的。我們可以先來看一下低留白率與高留白率的幾個作品。

通過這幾個作品我們可以看出留白少的信息更豐富,版面更有活力,也更熱鬧,親和力也更強。而留白多的更雅致,更安靜典雅,更有格調(diào)跟品質(zhì)感,但親和力稍弱。

五、案例演示

下面進行案例演示吧,首先看一看文案。

這一步我們需要把文案的層級關系拉開,大中小區(qū)分的明顯一點。這個文案的層級關系肯定是 欲望の森林 > 英文 > 欲望是無盡的森林 > 小文字信息的。

首先我們做一個有張力的版面,那么我們可以想一想什么樣的版面是有張力的呢?

首先版面率要大,其次留白要小,讓版面中的信息緊湊一點。

上圖就是對版面的布局,可以看到圖片是出血版的,沒留天頭與左右頁邊距。這樣做的目的也是使版面率更大。

布局做好之后我們把圖片與編排好的文字放置上去就可以了,如下。

上圖可以看到留白比較少,符合留白率低的理論,雖然具備張力,但不是很明顯。這種情況下我們可以改變一下底色使之感覺留白率更低,如下。

做完了留白少版面率高的,我們再來做一個典雅一點的。

根據(jù)本篇文章的內(nèi)容思考一下什么典雅與安靜的的排版版面率與留白率分別是什么樣的?

一定是低版面率和較多留白的版面更能體現(xiàn)典雅與安靜感。所以我們在版面安排上要使其留白更多,同時版面率要小一點。下圖就是一個基本布局。

最后我們再根據(jù)版面布局置入圖片微調(diào)一下就可以了,如下。

總結

版面率跟留白率都能夠影響版面的氣質(zhì),我們做項目的時候具體問題具體分析,根據(jù)項目氣質(zhì)去設定版面率跟留白率的大小。

動畫筆記06《文字路徑書寫MG動畫》

濤濤

推薦一個做路徑動畫的腳本,還不錯,看看吧。

undefined

建立條理- 版式設計原理

濤濤

大家好,從今天開始我要以大白話且通俗易懂的方式,來與大家分享我的知識和觀點。

主要講解的是平面設計基礎理論知識與實際用法,后期會講一些高階的設計思維。

本章節(jié)適合設計小白和需要填補設計基礎的設計師學習閱讀。 


目錄

 

1、理解、提取與布置

2、貼近與遠離

3、排列與對齊

4、視線移動方向

5、組織與重復

 


 

1、理解、提取與布置

 

理解、提取與布置指的是根據(jù)設計的意圖來進行信息的整理,然后再將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來,最后再根據(jù)排列好的信息按個人美感和美學理念擺放到平面中。undefined



1.1 理解部分


當收到一個海報設計需求時,我們不是要馬上動手去做,而是要去思考需要設計的海報受眾群體是哪些人,具體要怎么展示它,它展示的目的是什么。 undefined

下面我就簡單介紹一下設計思維及方法,首先要設置定一個需求【現(xiàn)代美術館,需要設計一個簡潔大方的海報】。根據(jù)這個需求在進行具體的思維延伸。



1.1.1 海報的受眾群體


當我們收到設計需求時,要考慮海報的受眾群體,男人/女人,少年/青少年/中年/老年,每種受眾群體接受教育的程度和經(jīng)歷均不同,要根據(jù)不同的受眾做合適的設計。當我們按照具體需求定義好受眾群體后,就可以考慮推斷用哪種風格來展示海報了。

undefined

對于現(xiàn)代美術館需要一個簡潔大方的海報,這個需求所涵蓋的年齡區(qū)間比較大,基本上所有人都可以參觀美術館。那我們只要避免使用“個性化”的表象特征元素就可以解決這個問題了。

undefined

意思就是不要加入柔美的線條(除非展品的構成是柔美的線條),游戲和女妝這類具有一定代表性的象征元素,不要夾雜太多表現(xiàn)形式,用最容易讓人理解的表象形式來處理就可以了。



1.1.2 怎么展示海報


現(xiàn)代美術館,需要設計一個簡潔大方的海報這個需求,可以根據(jù)主關鍵詞“現(xiàn)代”和“美術館”,次關鍵字“簡潔”和“大方”來推斷要采用哪種設計語言?!艾F(xiàn)代”的表現(xiàn)形式是無襯線體、干練(有棱角)、簡潔、沒有太多情緒。而“美術館”只要在圖片的處理上讓主題與圖片串聯(lián)共通就可以了。

undefined

簡潔大方的設計需求可以采用直線(字有時也是線)或大留白、配色多些白色、舒適的高純度高明度、整體干凈清爽,同時也要注意禁止添加太多顏色(如撞色)。



1.1.3 運用理解部分生成原型


根據(jù)前面的分析大概有了個原型,分為上下構圖。上部分是美術館的部分場景圖片,下部分是具體的內(nèi)容信息部分。所有要素均以現(xiàn)代感、簡潔干練、配色不復雜、線性、整潔、清爽、專業(yè)、無太多情緒為基礎進行設計的。

undefined

以上就是“信息的整理”中的“理解部分”,當設計師收到需求時,不要馬上著手去做。先思考采用哪種表現(xiàn)形式(視覺語言)更適合需求,分析后再去做設計,這樣才能準確表達具體的需求,也能做出更符合需求的設計。




1.2 提取部分


提取部分就很好理解了,顧名思義是將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來。我們只需要根據(jù)優(yōu)先級進行排序,并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】這么多種信息,把最重要的【CGIL】提取出來再排列優(yōu)先級【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】這個過程就叫“提取信息部分”。

undefined




1.3 布置部分 


把提取并排列好優(yōu)先級的信息規(guī)整好,就可以布置在平面上了。用之前設計好的原型套用已提取好的信息就可以了。特別要注意重要的內(nèi)容放大,不重要的內(nèi)容弱化。



* 要點


理解:首先要理解作品的受眾群體、要怎么展現(xiàn)、目的是什么。

提?。浩浯我鞔_作品內(nèi)容中什么是最重要的、根據(jù)優(yōu)先級排序。

布置:最后把排列好的信息加以布置,重要的內(nèi)容放大,不重要的內(nèi)容弱化。





2、貼近與遠離


貼近和遠離的概念也是比較好理解的。與格式塔視知覺的親密性與遠離性是一個道理,初期只講一些通俗易懂的概念,像格式塔視知覺以后會講。



2.1 貼近和遠離的 基礎概念


貼近是指同類要素擺放在一起會呈現(xiàn)出一種共通性或產(chǎn)生某種規(guī)則,而遠離是指同類要素分開擺放看上去就沒有共通性或不會感到有某種規(guī)則。

undefined


當把同類要素(男人女人)放到一起,會覺得他們有一定的共通性,而且看上去像一對情侶。相反把同類要素(男人女人)分開來放,會覺得他們毫無關系。


我們把這種概念應用在平面設計上,如下圖所示。

undefined

相同的要素擺放在一起會有一定的共同性,相反分開擺放則看上去沒有關聯(lián)。

undefined

貼近與遠離基礎概念的實際案例



2.2 貼近和遠離的 進階概念


把同類要素放到一起有種井然有序的感覺。如果要處理較為規(guī)整傳統(tǒng)的版式時,可以考慮多將要素放到一起形成規(guī)則。另外把同類要素分開擺放,會感到?jīng)]有共通性和規(guī)律規(guī)則,但是能為平面增加節(jié)奏感和沖擊力。

undefined

貼近與遠離進階概念的實際案例


其次遠離能使平面產(chǎn)生留白,通過留白也能使平面具有關聯(lián)性。

undefined

雖然說遠離能使要素看上去沒有共同性和規(guī)則,但如果要素處在一個平面中,利用留白呈現(xiàn)出一種關聯(lián)性。這就像吵架的夫妻一樣,同在一個床上,女的偏床左側(cè),男的偏床右側(cè),呈現(xiàn)一種遠離性。但他倆還是處在“床”這個平面中,也會呈現(xiàn)一種關聯(lián)性。

貼近與遠離進階概念的實際案例



* 要點



同類要素貼近擺放在一起相互關聯(lián),同類要素遠離擺放相互排斥。

同類要素貼近擺放在一起平面有規(guī)則,同類要素遠離擺放增添節(jié)奏。

留白也能使要素有一定的關聯(lián)性。




3、排列與對齊


排列與對齊的概念比較簡單,也很容易理解。轉(zhuǎn)化一下思維,把排列比作軍隊隊伍中的“集合”,把對齊比作隊伍中的向前/左看齊,就很好理解了。




3.1 排列


排列是指將要素按照一定的規(guī)則進行布置,使平面達到一種平衡與和諧。道理與收拾屋子一樣,雜亂無章的屋子會讓人感到不舒服且很壓抑。整理的井然有序的屋子會讓人心情舒暢很安心。平面中的“排列”就是屋子中的“整理”,目的是使雜亂的屋子變得規(guī)矩整齊。收拾屋子的方法就是“規(guī)則”,用規(guī)則的方法來排列就叫“布置”。

undefined

排列的目的是讓平面變得有序和規(guī)則,當平面達到有序和規(guī)則就會呈現(xiàn)出一種舒適感,好比自然中的和諧。



3.2 對齊


對齊也可以理解為將要素按照一定的規(guī)則進行布置,使平面達到一種平衡與和諧。對齊與排列的差別在于,對齊是在排列的基礎上進行操作的。先將要素按照一定規(guī)則進行排列,然后再將要素進行對齊。排列是畫一個大體的框架,而對齊是做框架里的精細操作。

undefined

排列與對齊的實際案例



* 要點


排列與對齊的目的是讓平面變得有序和規(guī)則,當平面達到有序和規(guī)則就會呈現(xiàn)出一種舒適感。

把排列比作軍隊隊伍中的“集合”,把對齊比作隊伍中的向前/左看齊,就很好理解了。





4、視線移動方向


設計書籍或排版布局時,要考慮通過設計讓讀者以怎樣的順序去閱讀作品,通常情況下人的視線是從上到下移動的,所以在設計時要考慮到這一基本原則。閱讀橫排文章時視線是【由左至右】,閱讀豎排文章的視線是【由右至左】。

視線的移動方向分為三個知識點,橫排閱讀、豎排閱讀、流水式閱讀。流水式閱讀以后會講。

undefined

隨便補充一下啊,我讀過的設計文獻中提到的閱讀方法只有“Z字視線移動方向”,而沒有“T字視線移動方向”。有一種學習方法叫“T型閱讀法”,與視線移動方向的“T字視線移動方向”不是一個概念。視線本身就是從上到下從左到右的形式閱讀的,形成了Z字閱讀方式,我覺得是國人是把這些概念給曲解了,如果有說的不對的地方,也請大佬們多多指點。



4.1 橫排閱讀


橫排閱讀是指作品的排版布局是以橫向的排列方式讓讀者來閱讀作品。橫向的排列方式就是文字是橫著的,大家現(xiàn)在讀的這篇文章就是橫向排列的文章。閱讀橫向排列的文章時視線是從上至下【由左至右】依次閱讀的,如圖所示。

懂得了橫向排列的方式來閱讀文章會有什么用呢?由于人們的閱讀習慣,一般情況下閱讀讀物,都會遵循從左到右閱讀文章的方式,這也就間接影響了文章內(nèi)容的重要性。采用橫向排列的方式進行排版布局,重要的內(nèi)容要放在最左面,也就是最方便引導人們視線方向的地方。


如果不把重要的內(nèi)容放在視線方向的地方,讀者不僅閱讀作品時會感到很吃力(可讀性),而且會不理解作品是什么含義,視線也隨之錯亂,作品也會失去原本的含義。

橫排閱讀的實際案例



4.2 豎排閱讀


橫排閱讀是指作品的排版布局是以豎向的排列方式讓讀者來閱讀作品。閱讀豎向排列的文章時視線是從上至下【由右至左】依次閱讀的,如圖所示。

一定要注意,豎向排列方式內(nèi)容區(qū)在平面的最右面,與橫向排列方式不同。這個規(guī)定就像地球為什么是圓的的道理一樣。


豎排閱讀的實際案例



* 要點


閱讀橫排文章時視線是【由左至右】,閱讀豎排文章的視線是【由右至左】。

不要打破規(guī)則,一切以引導讀者視線為主。




5、組織與重復


按照一定規(guī)則構成布局來編排要素,能使種類繁多的要素顯得整潔有序。



5.1 組織


沒有共通性的雜亂圖形匯聚一起會造成視線混亂,讀者注意力會被分散,也會降低理解力。將圖形用框圈起來,按照等距進行排列,整體就會顯得很整潔,也便于找出想要了解的圖形。

組織規(guī)則的實際案例



5.2 重復


這里的重復不是指復制粘貼,而是元素上的重復構成。例如重復相同的格式,風格、文字、顏色、線、圖案等。為了讓平面具有條理性,用風格統(tǒng)一的要素做修飾,讓排版符合流水式,視線清晰自然。


重復規(guī)則也可以應用在平面中、元素中、要素中、形狀中等,靈活運用重復能使平面具有統(tǒng)一性,也能制造趣味性,增加讀者對作品的印象。

重復規(guī)則的實際案例



* 要點


將圖形用框圈起來,按照等距進行排列,整體就會顯得很整潔,也便于找出想要了解的圖形。

靈活運用重復能使平面具有統(tǒng)一性,也能制造趣味性,增加讀者對作品的印象。

為什么你的設計時間總不夠用

濤濤

設計工作中,你是否經(jīng)常覺得留給設計的時間不夠用?為什么會這樣?如何解決?Let’s go~

01 問題背景

設計工作中,你是否經(jīng)常覺得留給設計的時間不夠用?是否經(jīng)常遇到這樣的問題:


場景1:總感覺自己的設計差了點什么,導致設計上反復嘗試。終于在交稿最后一天感覺ok了,興致勃勃的拿去交工,然后得到這樣的反饋——“這個不行,這不是我想要的”。

場景2:“多久能設計完?盡快?盡快是多久”“這個需求簡單,隨便搞搞就行了!” “要設計5天?啊呀~不用那么精致,差不多就行了!”


02 為什么會這樣?

類似的事情在設計行業(yè)已經(jīng)變成了大家都懂的梗,但是為什么會這樣?

一.設計師自身原因?qū)е?/strong>


1.設計缺乏說服力導致無節(jié)操改稿


A.是不是設計目的不明確?

設計本身是一種解決問題的系統(tǒng)性方法,并不是一個結果,不能為了設計而設計。沒有目的性的設計會導致大方向出錯,就好比一把狙擊槍打錯了目標,即使威力再大也是徒勞。


B.是不是設計思路不正確?

很多設計師在接到需求的第一時間打開ps或其他軟件直接開始試錯,缺乏目的的設計很容易在中途發(fā)現(xiàn)錯誤或更好的方法,要么推翻重改,要么將就的給上游看。當然,結果肯定不會很理想。


C.是不是細節(jié)經(jīng)不起推敲?

細節(jié)缺乏考慮的設計,無法闡述每一處設計的目的。當其他人提出疑問的時候,要么不能應對,要么強行應對,兩種一定都很負面。


2.設計師估時不精準導致時間不夠用


A.是不是估時不夠合理?

不能精準評估設計時間,導致估算的時間過短或過長,設計師看到界面數(shù)量直接估時。不了解需求目的以及缺少設計難點的考慮,導致自己不能在估的時間內(nèi)按時完成


B.是不是估時不夠精細?

需求模塊估時不精細,導致評估的時間不可信,對于其他崗位來說,大多不了解設計過程以及設計難點在哪,不能清晰闡述其難點在哪很容易被領導壓時間或貼上負面標簽。

二.外界原因包括哪些

1.當然也有不是設計師本身導致,比如需求方向反復變更。導致設計方案的不斷更改

2.需求方出方案時間過長導致下游全部時間不夠

3.需求方?jīng)]能全局把控時間,沒全面考慮其時間周期


所以,一套有說服力的設計以及精準的設計時間評估是設計師提升自身效率的核心,而能夠發(fā)現(xiàn)項目效率問題所在是團隊提升整體效率的核心。



03 怎么辦?

那么如何讓你的設計更有說服力和精準的制定你的設計時間?以及外界原因如何應對呢?

一.讓你的設計更有說服力


A.明確設計目的

核心為提前溝通,提前了解需求。分別包括:

1.需求目的

需求目的并不是說需求方想做什么,而是做這個需求的目的是為了解決什么問題

2.數(shù)據(jù)

是否有數(shù)據(jù)支撐,證實問題的客觀存在,盡量避免出現(xiàn)偽需求

3.是否對已有的場景造成不良影響

系統(tǒng)性考慮,避免單獨需求的產(chǎn)出對系統(tǒng)級的設計造成影響,導致體驗不統(tǒng)一或開發(fā)難度大以及各種后期改稿問題

4.用戶與場景

需求用戶是誰,在什么場景下用,避免設計方向出錯

5.明確需求期望和時間期望

需求方是否有對設計的期望形式(包含動效期望,插畫期望)以及期望時間是多少

B.清晰設計思路

1圍繞戰(zhàn)略目的,目標人群以及使用場景考慮

2通過其三個維度提取與篩選關鍵詞

3圍繞關鍵詞確認設計調(diào)性

4圍繞設計調(diào)性結合具體場景思考與執(zhí)行

5具體細節(jié)打磨,基于設計調(diào)性以及場景考慮上提升品質(zhì)感與好感度

C.讓細節(jié)經(jīng)得起推敲


1.細節(jié)的客觀性

每一處的設計元素需有他的作用性,盡量避免可有可無的設計元素


2.細節(jié)服務于整體

每處細節(jié)的目的都應服務于整體,避免對整體有負面影響的細節(jié)設計


以上可以總結為

1明確的設計目的能夠讓你的設計和需求建立極強的契合,推翻設計就等于推翻需求

2清晰的設計思路能夠讓你的設計環(huán)環(huán)緊扣

3經(jīng)得起推敲的細節(jié)能夠讓你的設計細化到每個元素都缺一不可

一套這樣的設計方案就好像一桿槍槍命中要害的“狙擊槍”,還有什么擊不碎的目標呢?


二.如何合理的評估設計時間


A.方法時間評估

如果建立在詳細評估了需求上來說,設計師已經(jīng)能了解需求包含了什么內(nèi)容,也一定有某處在設計上很難處理的模塊,如“用戶難理解的功能如何表達清晰、難適配的功能應該采用怎樣的展示方法、狀態(tài)太多的情況如何處理、信息過載的模塊等等等”。分別評估其設計時間。


B.執(zhí)行時間評估

如界面存在大量圖標或需要大量圖標、大量插畫、動效等需要執(zhí)行時間長的需求,需增加執(zhí)行時間


三.如何盡量避免外界因素?


A.提前溝通

盡可能分析需求目的的正確性以及可能遇到的問題盡早提出


B.明確職位責任

設計師沒有辦法把公司的活都干了,該是誰的鍋就該誰來背


C.如何讓其他人理解設計時間

分別闡述這套設計的時間分別耗在哪,各模塊各需要多久。的時間更有說服力


D.需不需要精細化設計到底應該由誰決定

當然,理論上每處設計都應該精細化,但是由于精細化是一個永無止境的事,結合項目本身考慮,需理性一些。需不需要精細化應該是由場景的重要程度、上線時間決定。不應由各職位一方?jīng)Q定。一個重要的場景可能讓用戶形成對產(chǎn)品品牌認識的第一印象,當用戶對產(chǎn)品有了負面的印象,后期改善這個的成本會變的無窮大。作為設計師,需要嚴格把控方案的落地以及評估其體驗的風險


04 結語

一個合理的設計過程可以減少不必要的時間浪費,一個合理的時間評估能夠保證設計工作的正常進行。也希望每個設計師都有一個更美好的工作環(huán)境。

以上為本人的一些看法,也歡迎不同看法的伙伴相互交流,共同進步

日歷

鏈接

個人資料

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

存檔