首頁

UI設(shè)計(jì)掌握的交互知識(shí)

博博


云和數(shù)據(jù)西安中心 2018-06-05 17:38:27

交互設(shè)計(jì)是什么?

交互設(shè)計(jì) Interaction Design 也被成為IXD。交互設(shè)計(jì)建立起了人與計(jì)算機(jī)便捷溝通的通道,它的目標(biāo)是創(chuàng)造可用性和用戶體驗(yàn)俱佳的產(chǎn)品。我們?cè)诠ぷ髦薪?jīng)常會(huì)對(duì)接交互設(shè)計(jì)師和產(chǎn)品經(jīng)理,他們具有豐富的交互知識(shí)和經(jīng)驗(yàn)。那是不是我們作為UI設(shè)計(jì)師,就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計(jì)了呢?當(dāng)然不是,在視覺設(shè)計(jì)層面更多地考慮布局和交互原則才可以讓我們的界面更友好,視覺設(shè)計(jì)師是交互設(shè)計(jì)中非常重要的角色。

用戶體驗(yàn)

在工作中經(jīng)常聽到UED(用戶體驗(yàn)設(shè)計(jì))和UCD(以用戶為中心的設(shè)計(jì)),可見互聯(lián)網(wǎng)行業(yè)非常重視用戶體驗(yàn),而用戶體驗(yàn)絕不僅僅是要樣子好看。有些設(shè)計(jì)師只關(guān)注視覺層面,認(rèn)為產(chǎn)品戰(zhàn)略等用戶體驗(yàn)維度和自己的設(shè)計(jì)無關(guān),那么就會(huì)和產(chǎn)品經(jīng)理等角色處于不同的世界了?!八麄?yōu)槭裁匆疫@么改?”、“為什么這里文字要淺一點(diǎn)?”有時(shí)不理解對(duì)方的思考角度就會(huì)造成爭(zhēng)執(zhí)。用戶體驗(yàn)(User Experience)是用戶使用產(chǎn)品的心理和感受,用戶體驗(yàn)體現(xiàn)了產(chǎn)品設(shè)計(jì)以人為本的設(shè)計(jì)精神。其實(shí)早在互聯(lián)網(wǎng)出現(xiàn)之前就有“顧客先點(diǎn)雞就先有雞”、“顧客就是上帝”這種說法,并且西方很多大公司如施樂、聯(lián)合利華等大公司早在互聯(lián)網(wǎng)行業(yè)出現(xiàn)之前就已經(jīng)開始進(jìn)行研究用戶體驗(yàn)了,可見用戶體驗(yàn)對(duì)所有產(chǎn)品是多么的重要。但是讓人摸不著頭腦的是,用戶體驗(yàn)有時(shí)非常地主觀:因?yàn)橛脩趔w驗(yàn)背后影響用戶的因素有人的喜好、情感、印象、心理反應(yīng)等,有些人明明有摩拜卻要走很遠(yuǎn)找OFO,也有人只吃肯德基而不吃麥當(dāng)勞。這些選擇并不是優(yōu)勝劣汰,而是有背后的原因的。要想讓我們的產(chǎn)品被人喜歡,我們需要研究用戶。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

用戶研究七種方法

但用戶可能是幾百萬人呢!我們面對(duì)這樣抽象的群體然后告訴自己要以他們?yōu)橹行脑O(shè)計(jì)這多么抽象啊。這么多用戶甚至有時(shí)用戶自己的聲音也是矛盾的。我們到底怎么樣了解用戶的心聲呢? 

用戶畫像

根據(jù)產(chǎn)品的調(diào)性和用戶群體,用戶研究團(tuán)隊(duì)可以設(shè)計(jì)出一個(gè)用戶的模型,這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特征的標(biāo)簽組成的,通過這個(gè)標(biāo)簽我們可以更好地理解誰在使用我們的產(chǎn)品。用戶畫像建立后,每個(gè)功能可以完成自己的用戶故事:用戶在什么場(chǎng)景下需要這個(gè)功能。這樣,我們所設(shè)計(jì)的功能就會(huì)更接近用戶實(shí)際的需要。比如我們現(xiàn)在要設(shè)計(jì)一個(gè)女裝購物應(yīng)用,那么我們可以做這個(gè)用戶畫像:小美,在北京國貿(mào)CBD上班,21歲,收入8000,喜歡淘寶購物和電視購物。使用我們產(chǎn)品的目的是為了尋找正品時(shí)尚大牌服裝進(jìn)行網(wǎng)購。小美因?yàn)閯偖厴I(yè)所以一方面喜歡大牌一方面又資金短缺(啟發(fā):我們的產(chǎn)品是不是要解決這兩個(gè)痛點(diǎn)?)小美是時(shí)尚OL,審美很高,不喜歡俗氣的設(shè)計(jì)。(啟發(fā):界面設(shè)計(jì)是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色?)。看,即使小美并不真實(shí)存在,但是她指引了我們的產(chǎn)品設(shè)計(jì)。接下來,我們還可以給小美增加一個(gè)頭像,在做設(shè)計(jì)時(shí)我們想象這個(gè)人就是真實(shí)存在的用戶,她會(huì)對(duì)我們的設(shè)計(jì)有什么看法。當(dāng)我們完成用戶畫像之后,還可以接著設(shè)計(jì)用戶故事:小美經(jīng)常需要在工作場(chǎng)合穿符合工作氣質(zhì)的衣服,也需要在約會(huì)時(shí)有晚禮服之類的服裝,可是小美的收入有限,她眼光較高但是對(duì)價(jià)格過高的服裝無法承擔(dān),她使用我們的APP就是為了尋找正品且價(jià)格適中的服裝。那么,小美在哪里用我們的APP呢?這就要為小美繼續(xù)設(shè)計(jì)一個(gè)用戶使用場(chǎng)景了:小美在開會(huì)時(shí)可能會(huì)打開看看、在地鐵里也會(huì)瀏覽、在清晨打開衣柜時(shí)也會(huì)瀏覽?;緛碚f是碎片時(shí)間,而且是有著裝需求時(shí)。(啟發(fā):我們是不是需要把字號(hào)調(diào)大以適應(yīng)地鐵里顛簸的閱讀環(huán)境?我們是不是需要設(shè)計(jì)省流量模式免得剛剛畢業(yè)的小美花一筆巨大的流量資費(fèi)?)

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

用戶畫像

用戶訪談

邀約用戶來回答產(chǎn)品的相關(guān)問題,并記錄作出后續(xù)分析。用戶訪談?dòng)腥N形式:結(jié)構(gòu)式訪談(根據(jù)之前寫好的問題結(jié)構(gòu))、半結(jié)構(gòu)式訪談(一半根據(jù)問題一半討論)、開放式訪談(較為深入地和用戶交流,雙方都有主動(dòng)權(quán)來探討)。用戶訪談設(shè)置時(shí)要注意:用戶不可以是互聯(lián)網(wǎng)從業(yè)的專業(yè)人員、不可以提出誘導(dǎo)性問題、不要使用專業(yè)術(shù)語。用戶訪談適合產(chǎn)品開發(fā)的全部過程。

問卷調(diào)查

可分為紙質(zhì)調(diào)查問卷、網(wǎng)絡(luò)問卷調(diào)查。依據(jù)產(chǎn)品列出需要了解的問題,制成文檔讓用戶回答。問卷調(diào)查是一種成本比較低的用戶調(diào)查方法。問卷調(diào)查適合產(chǎn)品策劃初期對(duì)目標(biāo)人群的投放,另外注意一個(gè)問題最好收集10個(gè)問卷,也就是如果你有10個(gè)問題那么至少要收集100個(gè)問卷才是有效的。要知道不是所有人都愿意耐心地填寫問卷,很可能敷衍了事的回答會(huì)擾亂我們的判斷。

焦點(diǎn)小組

焦點(diǎn)小組一般有6-12人組成,由一名專業(yè)人士主持,依照訪談提綱引導(dǎo)小組成員各抒己見,并記錄分析。并且在焦點(diǎn)小組的房間里會(huì)有一扇單向玻璃窗,用戶是看不到里面有誰的。而在里面坐著的通常是開發(fā)團(tuán)隊(duì),他們可以清晰地看到用戶是如何吐槽他們的產(chǎn)品的,但是他們沒有權(quán)利直接和用戶進(jìn)行解釋。焦點(diǎn)小組需要特殊的房間和設(shè)備,主持人也需要訓(xùn)練有素,焦點(diǎn)小組特別能夠分析出用戶在沒有我們說明的情況下如何使用我們的產(chǎn)品和對(duì)產(chǎn)品的不滿。

可用性測(cè)試

通過篩選讓不同用戶群來對(duì)產(chǎn)品進(jìn)行操作,同時(shí)觀察人員在旁邊觀察并記錄,可用性測(cè)試的要求是用戶不可以是互聯(lián)網(wǎng)從業(yè)者而應(yīng)該是真實(shí)產(chǎn)品的用戶群體。但是可用性測(cè)試一般要有一個(gè)可用的軟件版本或者原型供人測(cè)試才可以,在軟件開發(fā)的前期不適合用這個(gè)方法。

眼動(dòng)測(cè)試

使用特殊的設(shè)備眼動(dòng)儀來追蹤用戶使用產(chǎn)品時(shí)眼睛聚焦在哪里,盲區(qū)是哪里。比如一個(gè)網(wǎng)站通過眼動(dòng)測(cè)試可以知道用戶的視覺會(huì)自動(dòng)屏蔽網(wǎng)站的常見廣告位置,這時(shí)如果希望提高廣告的點(diǎn)擊,就需要把廣告位放置于用戶聚焦時(shí)間較長(zhǎng)的位置。眼動(dòng)測(cè)試的設(shè)備比較專業(yè),通常在小公司較難開展。

用戶反饋和大數(shù)據(jù)分析

根據(jù)市場(chǎng)提供的反饋和數(shù)據(jù)得出客觀的判斷和合理的推測(cè)。用戶反饋也是用戶研究的一個(gè)重點(diǎn),用戶反饋主要是用戶通過產(chǎn)品的反饋入口主動(dòng)向開發(fā)者提出的意見。

有了這些方法,我們就能更好地了解用戶和接近用戶了。但是要注意,用戶研究也是有陷阱的。比如:填寫問卷和參與調(diào)研的用戶可能并不是核心用戶;提交用戶反饋的用戶之外可能有更多沉默的用戶等??傊脩粞芯渴且粋€(gè)必要的手段,但是仍然需要產(chǎn)品團(tuán)隊(duì)來對(duì)產(chǎn)品的方向做出決斷。

用戶如何使用產(chǎn)品

使用場(chǎng)景

剛才我們介紹了用戶使用的場(chǎng)景是根據(jù)產(chǎn)品的功能和平臺(tái)決定的。電腦的使用場(chǎng)景是正襟危坐,手持鼠標(biāo)。而移動(dòng)端則是隨時(shí)隨地使用,我們的用戶可能在地鐵里、在廁所里、在吃飯時(shí)、在上課中怕老師看到把手機(jī)藏在桌洞里、在工作中領(lǐng)導(dǎo)巡視后偷偷瞄、在輾轉(zhuǎn)反側(cè)睡不著的時(shí)候沒有開燈地瀏覽等。這時(shí)我們要為用戶考慮,如果他們?cè)谑褂梦覀儺a(chǎn)品的各種場(chǎng)景中有什么需要,是不是需要省流量、是不是需要調(diào)整字號(hào)、是不是需要過濾藍(lán)光、是不是需要護(hù)眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界面目前單手不太友好、是不是掃二維碼時(shí)需要個(gè)手電功能、是不是需要語音提醒、是不是需要清除訪問記錄。一個(gè)不考慮用戶使用場(chǎng)景的產(chǎn)品一定是會(huì)遭到吐槽的。很久之前我聽同事在吃飯時(shí)抱怨過“大爺?shù)?,也不搞個(gè)提示,早晨在地鐵里用4G看流量以為是在家用WIFI,結(jié)果看了一集《甄嬛傳》花了80塊錢”、“哎?你是不是早晨開會(huì)時(shí)玩游戲了?你的比分都給我們推送了哈哈哈”。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

我的產(chǎn)品中的用戶使用場(chǎng)景表格

操作手勢(shì)

網(wǎng)頁設(shè)計(jì)所處的電腦端目前主要還是依靠鼠標(biāo)點(diǎn)擊來操作。鼠標(biāo)點(diǎn)擊的最小單位甚至可以是一像素。而移動(dòng)端不太一樣,移動(dòng)端設(shè)備中我們使用手指來操作界面。一般來說,手指點(diǎn)觸區(qū)域最小尺寸為7×7 mm,拇指最小尺寸為9×9 mm。也就是在我們@2x設(shè)計(jì)中為88px(或44pt)。這個(gè)神奇地88PX在移動(dòng)端應(yīng)用很廣泛:很多表單單項(xiàng)的高度是88ox、導(dǎo)航欄高度也是88px等等。那您可能會(huì)說,也不對(duì)吧,有些界面上的圖標(biāo)看上去沒有88px啊。是的,但是那只是視覺,我們可以通過增加圖標(biāo)點(diǎn)擊區(qū)域的方式(比如給60像素大小的圖標(biāo)左右增加22像素的透明區(qū)域)來讓圖標(biāo)更好點(diǎn)擊。千萬在設(shè)計(jì)時(shí)不要把操作區(qū)域放得特別近,可以把所有點(diǎn)擊區(qū)域用88px標(biāo)記看是否有重疊的情況,避免點(diǎn)擊一個(gè)圖標(biāo)時(shí)誤點(diǎn)另一個(gè)圖標(biāo)。除了點(diǎn)擊區(qū)域,移動(dòng)端還可以利用各種手勢(shì)來進(jìn)行各種操作的設(shè)計(jì)。主要的手勢(shì)有:

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

單點(diǎn)觸碰(Tap):點(diǎn)擊用來選擇一個(gè)元素,類似鼠標(biāo)的左鍵,是最常用的手勢(shì)。

拖曳(Drag):點(diǎn)擊某個(gè)元素然后拖拽進(jìn)行移動(dòng),類似現(xiàn)實(shí)生活中移動(dòng)物體的感覺。

快速拖曳(Flick)速度很快的拖曳操作。

滑動(dòng)(Swipe):水平或垂直方向的滑動(dòng),比如翻閱相冊(cè)和電子書翻閱的手勢(shì)。

雙擊(Double-Click):快速點(diǎn)擊一個(gè)物體,通常會(huì)在放大、縮小操作中使用。

捏(Pinch):兩根手指頭向內(nèi)捏,捏的動(dòng)作會(huì)使物體變得更小,通常在縮小操作中使用。網(wǎng)易新聞客戶端中正文頁面即可通過捏的動(dòng)作來縮小字號(hào)。

伸展(Stretch):兩根手指向外推,現(xiàn)實(shí)中這種操作會(huì)使物體向外拉伸,元素可能會(huì)變得更大,通常會(huì)在放大操作中使用。網(wǎng)易新聞客戶端中正文頁面可以通過伸展放大字號(hào)。

長(zhǎng)按(Touch and hold):手指點(diǎn)擊并按住會(huì)激發(fā)另一個(gè)操作。比如朋友圈的相機(jī)圖標(biāo)長(zhǎng)按可只發(fā)文字。但是注意,長(zhǎng)按不是一個(gè)常態(tài)操作,所以一般不太建議用戶進(jìn)行該操作。但長(zhǎng)按操作又是有需要的,所以會(huì)把刪除、只發(fā)文字狀態(tài)等操作隱藏其中。

除了用戶使用場(chǎng)景、點(diǎn)擊區(qū)域、手勢(shì),那么還有一個(gè)影響我們?cè)O(shè)計(jì)的使用情況,就是用戶怎么拿手機(jī)很重要。用戶可以:?jiǎn)问帜檬謾C(jī)、雙手拿手機(jī)、直向拿手機(jī)、橫向拿手機(jī)。我們需要考慮這些可能發(fā)生的特征進(jìn)行手勢(shì)互動(dòng)的規(guī)劃與設(shè)計(jì)。比如OFO為了讓單手(說不定是左手還是右手)操作方便,主要按鈕在下方并且做的很大,左右手都可以輕松點(diǎn)擊。而微信的很多按鈕也都是大長(zhǎng)條,方便左右手的觸發(fā)。橫屏使用場(chǎng)景一般是游戲、視頻等,所以一般的APP并不支持橫屏操作(微信、支付寶、微博均不支持橫屏操作),

格式塔:我們?nèi)绾握J(rèn)知?

我們發(fā)現(xiàn)有些用戶在使用設(shè)計(jì)好的界面時(shí)找不到一些重要的功能按鈕。“奇怪,分享功能不就在更多按鈕里面嗎?”、“用戶怎么連這個(gè)也找不到啊”你也許會(huì)說。我們要來了解一下用戶是如何認(rèn)知我們?cè)O(shè)計(jì)好的界面的。在初高中考試的時(shí)候您一定見過完形填空這種格式吧,“格式塔”源自德語“Gestalt”,意即“整體”、“完形”的意思。格式塔心理學(xué)認(rèn)為,我們?cè)谟^察的時(shí)候會(huì)自動(dòng)腦補(bǔ)出一些邏輯和含義來,會(huì)讓觀察對(duì)象變成一個(gè)完整的、整體的、常見的形狀。

"研表究明,漢字的序順并不定一能影閱響讀,比如當(dāng)你完看這句話后之,才發(fā)這現(xiàn)里的字全是都亂的。"研究格式塔心理學(xué)對(duì)我們做互聯(lián)網(wǎng)產(chǎn)品和設(shè)計(jì)有什么用呢?掌握格式塔的理論我們就可以讓用戶按照我們安排的“劇本”來交互和操作界面了。我們可以讓用戶比較容易地根據(jù)固定位置找到提交按鈕、我們也可以讓用戶不經(jīng)過太多思考在殺毒軟件中點(diǎn)擊殺毒按鈕等。格式塔心理學(xué)對(duì)于我們做好表現(xiàn)層是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個(gè)知識(shí)點(diǎn)。

接近律 law of proximity

格式塔心理學(xué)認(rèn)為,人們認(rèn)知事物的時(shí)候,會(huì)依靠它們的距離來判斷它們之間的關(guān)系。兩個(gè)元素越近就說明它們之間關(guān)系更強(qiáng)。但是接近也是有對(duì)比的,在復(fù)雜的設(shè)計(jì)中,我們要一邊考慮它們之間內(nèi)部的邏輯關(guān)系一邊來排版。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

A組和B組因?yàn)榻咏啥a(chǎn)生不同地閱讀順序

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

距離更近的信息暗示了他們有內(nèi)在的邏輯關(guān)系

相似律law of similarity

認(rèn)知事物時(shí),刺激要素(比如大小、色彩、形狀等要素)相似的元素我們傾向于把它們聯(lián)合在一起或者認(rèn)為它們是一個(gè)種類。比如,我們能輕易的分辨出撥號(hào)頁面中撥號(hào)鍵和按鍵群的區(qū)別。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

相似的元素暗示了他們屬于一個(gè)種類

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

類似外形的單元會(huì)被我們?nèi)四X默認(rèn)為同一屬類

閉合律law of closure

就算沒有外形的約束,我們也會(huì)自動(dòng)把圖形腦補(bǔ)完全。比如半個(gè)形狀或者有缺口的形狀我們不會(huì)認(rèn)為是一條線,而是一個(gè)完整的形狀。閉合是指一種完形的認(rèn)知規(guī)律。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

左邊的圖中我們會(huì)認(rèn)為是圓形有缺口而不是一條曲線

右邊的圖形中我們會(huì)認(rèn)為是圓形被三條線截?cái)嗔硕皇撬膫€(gè)圖形

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

界面設(shè)計(jì)中露出一半內(nèi)容,閉合律讓我們感知右邊還隱藏著更多內(nèi)容

連續(xù)律law of continuity

在知覺過程中人們往往傾向于使知覺對(duì)象的直線繼續(xù)成為直線,使曲線繼續(xù)成為曲線,也就是視覺的慣性。利用連續(xù)律我們可以讓用戶操作界面時(shí)不經(jīng)過思考就點(diǎn)擊一個(gè)固定的位置。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

深諳連續(xù)律的流氓軟件

成員特性律law of membership character

如果我們有很多同樣的按鈕,如何讓某個(gè)更重要的按鈕突出但是仍然讓用戶感知還是按鈕呢?那就要用到成員特性律了。成員特性律賦予了集體中某一個(gè)元素特殊的一些刺激元素從而突出它。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

獨(dú)特的外形暗示了它與別的元素有不同的功能

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

撥號(hào)頁面中撥號(hào)鍵與微博發(fā)布微博圖標(biāo)都與其他按鈕不同

記憶律:我們?nèi)绾斡洃洠?/span>

接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔心理學(xué)家沃爾夫?qū)z忘問題所作的經(jīng)典性研究得出了格式塔的三大記憶律。沃爾夫?qū)嶒?yàn)時(shí)要求實(shí)驗(yàn)體觀看樣本圖形并記住它們,然后在不同的時(shí)間里根據(jù)記憶把它們畫出來。結(jié)果發(fā)現(xiàn)實(shí)驗(yàn)體在不同的間隔時(shí)間畫出來的圖像都有不同。有時(shí)再現(xiàn)的圖畫比原來的圖畫更簡(jiǎn)單更有規(guī)則,有時(shí)原來圖畫中顯著的細(xì)節(jié)在再現(xiàn)時(shí)被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。沃爾夫把這三種記憶規(guī)律稱之為格式塔三大記憶律:“水平化”、“尖銳化”、“常態(tài)化”。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

哪個(gè)圖形才是正確的?(圖片來源:網(wǎng)絡(luò))

水平化leveling

水平化是指在記憶中我們趨向于減少知覺圖形小的不規(guī)則部分使其對(duì)稱;或趨向于減少知覺圖形中的具體細(xì)節(jié)。

尖銳化sharpening

尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中,人們往往強(qiáng)調(diào)知覺圖形的某些特征而忽視其它具體細(xì)節(jié)的過程。在有些心理學(xué)家看來,人類記憶的特征之一,就是客體中最明顯的特征在再現(xiàn)過程中往往被夸大了。

常態(tài)化normalizing

常態(tài)化是指人們?cè)谟洃浿?,往往根?jù)自己已有的記憶痕跡對(duì)知覺圖形加以修改,即一般會(huì)趨向于按照自己認(rèn)為它似乎應(yīng)該是什么樣子來加以修改的。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

情感化設(shè)計(jì)是什么?

了解格式塔會(huì)讓我們把界面做得符合用戶的心理預(yù)期,讓用戶能夠明顯地找到他應(yīng)該找到的操作。可是用戶好像還是不開心,因?yàn)橛脩粲X得界面不好看。您是不是也會(huì)陷入這樣的矛盾:可用性重要還是美感更重要?怎么樣能夠讓我們?cè)O(shè)計(jì)的界面又好用還漂亮呢?情感化設(shè)計(jì)由唐納德·A·諾曼博士提出,指的是設(shè)計(jì)中情感在所處于的重要地位以及如何讓用戶把情感投射在產(chǎn)品上來解決可用性與美感的矛盾。情感化設(shè)計(jì)是在抓住用戶注意、誘發(fā)情緒反應(yīng)以提高執(zhí)行行為的可能性的設(shè)計(jì)。比如紅色且巨大的購買按鈕能夠無意識(shí)地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網(wǎng)絡(luò)不好時(shí)的焦慮等等。情感化設(shè)計(jì)有三個(gè)水平,它們是遞進(jìn)關(guān)系,分別是:本能水平(重視設(shè)計(jì)外形)、行為水平設(shè)計(jì)(重視使用的樂趣和效率)、反思水平設(shè)計(jì)(重視自我形象、個(gè)人滿意、記憶)。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

本能水平

我們都是視覺動(dòng)物,對(duì)外形的觀察和理解是出于我們本能的。本能水平的設(shè)計(jì)就是刺激用戶的感官體驗(yàn),讓別人注意到我們的設(shè)計(jì)。這個(gè)階段的設(shè)計(jì)會(huì)更加關(guān)注外形的視覺效果。比如各大電商網(wǎng)站的專題頁面設(shè)計(jì),更加注重抓眼球和外觀的刺激。

行為水平

行為水平是功能性產(chǎn)品需要注重的。一個(gè)產(chǎn)品是否達(dá)到了行為水平,要看它是否能有效地完成任務(wù),是否是一種有樂趣的操作體驗(yàn)。優(yōu)秀行為水平設(shè)計(jì)的四個(gè)方面:功能,易懂性,可用性和物理感覺。比如好用的記事本APP等。

反思水平

反思水平的設(shè)計(jì)與用戶長(zhǎng)期感受有關(guān),這種水平的設(shè)計(jì)建立了品牌感和用戶的情感投射。反思水平設(shè)計(jì)是產(chǎn)品和用戶之間情感的紐帶,通過互動(dòng)給用戶自我形象、滿意度、記憶等體驗(yàn),讓用戶形成對(duì)品牌的認(rèn)知,培養(yǎng)對(duì)品牌的忠誠度。馬洛斯理論把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求五個(gè)層次。我認(rèn)為反思水平的設(shè)計(jì)就是提供給用戶歸屬感、尊重、自我實(shí)現(xiàn)。比如Google每逢節(jié)日就會(huì)有一些符合節(jié)日化的設(shè)計(jì)、網(wǎng)易嚴(yán)選的空狀態(tài)也會(huì)有品牌感的體現(xiàn)等。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

淘寶空狀態(tài)中的情感化設(shè)計(jì)

情感化設(shè)計(jì)的表達(dá)

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

畫面 畫面是情感化設(shè)計(jì)的重點(diǎn),讓錯(cuò)誤頁面或者空狀態(tài)都成為一幅可愛的插畫。

應(yīng)景 讓用戶在我們的產(chǎn)品中體驗(yàn)到一些和真實(shí)世界一樣的氛圍變化。

游戲感 沒有人喜歡做任務(wù)。試著讓用戶完成的任務(wù)變成游戲吧。比如每次登陸加金幣,有足夠的金幣就可以獲得什么稱號(hào)。

沖突 沖突非常能夠勾起人的情緒,營造一個(gè)競(jìng)爭(zhēng)或者對(duì)抗的氛圍,讓用戶感覺自己置身在一個(gè)比賽或者格斗中一樣。

講故事 給產(chǎn)品和無聊的圖像一些故事內(nèi)容,畢竟沒有人討厭講故事。

隱喻 用一些大家理解,隨處可見的事物表達(dá)一些無趣、生澀的概念。

互動(dòng) 給用戶和其他用戶多制造互動(dòng)機(jī)會(huì),比如排行榜、推薦等,不要讓用戶感覺孤獨(dú)。

交互八原則

當(dāng)我們了解了產(chǎn)品五要素(產(chǎn)品設(shè)計(jì)的維度問題)、格式塔心理學(xué)(用戶如何認(rèn)知的問題)、情感化設(shè)計(jì)(如何讓用戶滿意的問題)后,我還要給您介紹一大堆地交互原則。這些交互原則會(huì)幫助我們?cè)O(shè)計(jì)出更好用的界面,當(dāng)然也可以幫助我們講出這樣設(shè)計(jì)的原因。不拿出一些理論怎么能夠讓別人信服你的設(shè)計(jì),對(duì)不對(duì)?

費(fèi)茨定律(Fitts’Law)

費(fèi)茨定律指的是:光標(biāo)到達(dá)一個(gè)目標(biāo)的時(shí)間,與當(dāng)前光標(biāo)所在的位置和目標(biāo)位置的距離(D)和目標(biāo)大小(S)有關(guān)。它的數(shù)學(xué)公式是:時(shí)間 T = a + b log2(D/S+1)。這個(gè)定律是由保羅.菲茨博士(Paul M. Fitts)提出的所以得名。菲茨定律在很多領(lǐng)域都得到了應(yīng)用,特別是在互聯(lián)網(wǎng)設(shè)計(jì)中尤為深遠(yuǎn)。我們利用費(fèi)茨定律估算用戶移動(dòng)光標(biāo)到鏈接或者按鈕所需的時(shí)間,時(shí)間越短越。比如有一個(gè)按鈕在左下角,我們的操作可以細(xì)分為兩個(gè)階段:第一個(gè)階段大范圍移動(dòng)到左下方向,然后再做微調(diào)到達(dá)這個(gè)按鈕之上。所以這個(gè)時(shí)間受按鈕和鏈接所在位置與按鈕和鏈接大小影響,也就是說我們?cè)谧鲈O(shè)計(jì)時(shí)要考慮光標(biāo)默認(rèn)會(huì)放在哪里、我們的鏈接按鈕是不是太小了。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

費(fèi)茨定律說明距離越短、目標(biāo)大小越大,那么光標(biāo)到達(dá)目標(biāo)越快

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

費(fèi)茨定律在網(wǎng)頁設(shè)計(jì)中的使用

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

OFO和蘋果音樂APP都將按鈕放置手指最容易點(diǎn)擊的區(qū)域并且按鈕足夠大

希克定律(Hick’s Law)

??硕墒侵敢粋€(gè)人面臨的選擇(n)越多,所需要作出決定的時(shí)間(T)就越長(zhǎng)。它的數(shù)學(xué)公式是:反應(yīng)時(shí)間 T=a+b log2(n)。在我們的設(shè)計(jì)中如果給用戶的選擇更多,那么用戶所需要做出決定的時(shí)間就越長(zhǎng)。比如我們給出用戶菜單-子菜單-選項(xiàng),那么用戶可能會(huì)很糾結(jié);如果我們簡(jiǎn)化成菜單-選項(xiàng),就會(huì)減少用戶做選擇的時(shí)間。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

用戶反應(yīng)時(shí)間和選擇數(shù)量的關(guān)系

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

我們應(yīng)該減少用戶的選擇

7±2法則

讓我們先玩?zhèn)€游戲,請(qǐng)記憶下面的文字,一分鐘后移開視線:

掙 多 久 可 貓 風(fēng) 師 裊 崩 六 酒 望

現(xiàn)在閉上眼睛想一下剛才的文字您能回憶幾個(gè)?大概是五個(gè)到九個(gè)之間。1956年美國科學(xué)家米勒對(duì)人類短時(shí)記憶能力進(jìn)行了研究,他注意到年輕人的記憶廣度大約為5到9個(gè)單位之間,就是7±2法則。這個(gè)法則對(duì)我們做界面設(shè)計(jì)的啟迪就是如果希望用戶記住導(dǎo)航區(qū)域的內(nèi)容或者一個(gè)路徑的順序,那么數(shù)量應(yīng)該控制在七個(gè)左右,比如蘋果和站酷網(wǎng)站的導(dǎo)航個(gè)數(shù)。另外,移動(dòng)端底部Tab區(qū)域最多也是五個(gè),而頁面中的八大金剛圖標(biāo)也是八個(gè)。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

蘋果、站酷、Dribbble等網(wǎng)站導(dǎo)航數(shù)量全部是7±2

泰思勒定律(Tesler’s Law)

這個(gè)定律是說產(chǎn)品固有的復(fù)雜性存在一個(gè)臨界點(diǎn),超過了這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了。我們只能將這種復(fù)雜性轉(zhuǎn)移。比如我們?nèi)绻l(fā)現(xiàn)頁面的功能是必須的,但當(dāng)前的頁面信息過載,那么就需要將次要的功能收起或者轉(zhuǎn)移。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

Dribbble網(wǎng)站導(dǎo)航將更多功能收起在一個(gè)表示更多的圖標(biāo)內(nèi)

防錯(cuò)原則

一個(gè)表單是需要填寫完畢后方可提交的。但是用戶有時(shí)會(huì)漏填或者忘記填寫,這是用戶點(diǎn)擊提交會(huì)怎么樣?很可能有些選項(xiàng)會(huì)被清空(比如密碼選項(xiàng)基于安全考慮會(huì)清空cookies)那么用戶還得重新填寫。這時(shí)解決辦法是在用戶沒填寫完之前把按鈕設(shè)置一個(gè)看起來不能點(diǎn)擊的樣式,用戶想提交時(shí)彈窗:您還有內(nèi)容沒有填寫完哦,然后把用戶定位在沒填寫完的項(xiàng)目,讓那個(gè)表單高亮。(是不是真的做到以用戶為中心啦?)再比如推特只允許用戶填寫140個(gè)字,但用戶一寫爽了往往會(huì)超出140個(gè)字那怎么辦?解決辦法是給他在旁邊倒數(shù)還能寫幾個(gè)字??矗@些都是我們?yōu)榱朔乐褂脩舨僮鞒霈F(xiàn)錯(cuò)誤所做的努力,防錯(cuò)設(shè)計(jì)就是要減少錯(cuò)誤操作所帶來的災(zāi)難。錯(cuò)誤的提示當(dāng)然需要設(shè)計(jì)師的設(shè)計(jì)了。可是也許您不知道有些錯(cuò)誤提示含糊,用戶并不知道到底錯(cuò)的是哪里,下一步該怎么辦。比如僅僅登錄功能就可能會(huì)有用戶名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、連續(xù)三次輸入密碼錯(cuò)誤、用戶名為空等不同的錯(cuò)誤,而有些產(chǎn)品僅僅給出“出錯(cuò)了”,那么用戶當(dāng)然會(huì)不知所措了。正向的例子比如一次我在登錄Google Mail時(shí)輸錯(cuò)了密碼,它提示“密碼輸入錯(cuò)誤,提示:您在1個(gè)月前改過密碼”。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

BOO!APP輸入密碼時(shí)卡通會(huì)蒙住眼睛,輸錯(cuò)時(shí)也會(huì)有提示

奧卡姆的剃刀法則(Occam’s Razor)

奧卡姆的剃須刀法則主要就是說我們做產(chǎn)品時(shí)功能上不可以太繁瑣,應(yīng)該保證簡(jiǎn)潔和工具化。比如產(chǎn)品中為用戶提供了收藏功能是否就不需要喜歡了?提供了喜歡是否不需要點(diǎn)贊了?一定保證功能上的克制。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

QQ將更多功能收起到了頭像和加號(hào)圖標(biāo)中

防呆原則

有一個(gè)著名的交互書籍叫作《Dont make me think》,翻譯過來就是不要讓我思考。這句話一直在我做設(shè)計(jì)時(shí)響起:不要認(rèn)為用戶是專家!不要認(rèn)為用戶是專家!有時(shí)我們會(huì)覺得,點(diǎn)擊漢堡包圖標(biāo)當(dāng)然就是菜單啊!這個(gè)按鈕長(zhǎng)按不就會(huì)調(diào)出XX功能了嘛。但是我們忘記了普通用戶可能并不理解什么是漢堡包圖標(biāo)、什么是抽屜式導(dǎo)航、什么是長(zhǎng)按、雙指滑動(dòng)。更何況普通用戶并不會(huì)研究我們的APP,在他們眼中我們的產(chǎn)品只是眾多工具中的一個(gè),我們何德何能認(rèn)為自己的產(chǎn)品是值得用戶花時(shí)間學(xué)習(xí)的?一定要把交互和設(shè)計(jì)做得簡(jiǎn)單,并且讓用戶在別的地方“學(xué)習(xí)”過。每個(gè)頁面強(qiáng)調(diào)一個(gè)重要的功能而不要讓用戶做選擇題。這些都是有效防呆的好方法。防呆和不要讓我思考都講的是我們的設(shè)計(jì)要自然而然。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

運(yùn)動(dòng)APP KEEP 的頁面中總有一個(gè)按鈕是突出的

防止不耐煩原則

用戶是很容易不耐煩的,你還記得你多少次看著視頻加載條罵人嗎?如果我們需要用戶等待載入信息,一定要給一個(gè)有情感化的設(shè)計(jì)提示,避免用戶產(chǎn)生焦慮。 比如很多游戲(比如決戰(zhàn)平安京、王者榮耀等)加載時(shí)都會(huì)出現(xiàn)主角跑步的小動(dòng)畫,美團(tuán)等APP下拉刷新時(shí)也會(huì)有幾幀的動(dòng)畫來安慰用戶。動(dòng)畫要好于蘋果默認(rèn)提供給開發(fā)的“轉(zhuǎn)菊花”,因?yàn)榭ㄍㄐ蜗蟾杏H和力。但是好像還不夠,用戶需要掌控感,“哎?它一直加載,是不是死機(jī)了?”為了防止用戶沒有掌控感,我們可以為用戶設(shè)計(jì)加載條或者加載提示。加載狀態(tài)條很遺憾很多都是假的甚至是重復(fù)的,原因是其實(shí)要判斷加載了多少M(fèi)的素材的代碼更占資源!我們本來想安慰用戶等待加載的時(shí)間竟然會(huì)變得更長(zhǎng),那當(dāng)然不行啦。于是很多時(shí)候我們會(huì)做一個(gè)假的加載狀態(tài)條來安撫用戶,我想您一定看過反復(fù)加載的加載條吧!加載條下的文案其實(shí)也是可以變得非常有情感化設(shè)計(jì)感受的,比如通常是:加載場(chǎng)景資源、加載素材這樣的文案,但是有些APP需要很長(zhǎng)加載時(shí)間時(shí)會(huì)給出這樣的文案:導(dǎo)演正在準(zhǔn)備、女主角準(zhǔn)備化妝了、攝像師打開了燈光。是不是更加好玩啦?

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

美團(tuán)和網(wǎng)易嚴(yán)選的加載動(dòng)畫

總結(jié)

交互知識(shí)其實(shí)關(guān)鍵還要在應(yīng)用和分析。一方面,我們可以在工作中積累經(jīng)驗(yàn),不斷地思考如何和同事配合一起研究提高產(chǎn)品在使用時(shí)的體驗(yàn);另一方面,我們也要經(jīng)常積累一些產(chǎn)品使用時(shí)發(fā)現(xiàn)的交互。建議大家平時(shí)可以收集你覺得不錯(cuò)的情感化設(shè)計(jì)或者微交互,比如發(fā)現(xiàn)餓了么在下雨天送貨時(shí)會(huì)有電閃雷鳴和雨滴的設(shè)計(jì);OFO和滴滴打車在不同節(jié)日也會(huì)把地圖找車?yán)锏膱D標(biāo)換成節(jié)日相關(guān)的圖標(biāo);BOO!APP在輸入密碼時(shí)小怪獸會(huì)捂住眼睛;WPS在晚上寫作時(shí)(沒錯(cuò)就是現(xiàn)在)會(huì)提示你開啟過濾藍(lán)光的護(hù)眼模式等等。一個(gè)好的設(shè)計(jì)師一定是懂得交互的設(shè)計(jì)師,也應(yīng)該是非常細(xì)心的設(shè)計(jì)師,也應(yīng)該是懂得為用戶著想的設(shè)計(jì)師。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

博博

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

圖片來源:古田路9號(hào)、優(yōu)秀網(wǎng)頁設(shè)計(jì)、微博

最近設(shè)計(jì)界有兩個(gè)段子火了

甲方爸爸說:

“用PS不專業(yè)要用photoshop”

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

另一個(gè)就是

女設(shè)計(jì)師和甲方爸爸網(wǎng)戀,被騙稿??!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

講真,大大君我看到這兩個(gè)段子

默默心疼設(shè)計(jì)師幾秒鐘

如果以后還遇到這種奇葩

就把這篇文章砸他臉上

勞資設(shè)計(jì)一張海報(bào)這么難,你的臉夠本嗎?

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

今天大大君我就教大家

17種常見的海報(bào)設(shè)計(jì)技巧吧!

文字分散法則

字體分散的海報(bào)設(shè)計(jì)技巧是我們經(jīng)常見的一種設(shè)計(jì)手法,通過將字體拆分重組、改變字體大小、排版來起到吸引目光的效果。

例如下面這些

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

故障效果的設(shè)計(jì)法則

故障效果的海報(bào)設(shè)計(jì)通常會(huì)用把設(shè)計(jì)的主視覺圖形或文字,進(jìn)行幻影、扭曲、重合疊加等形式去呈現(xiàn),能迅速將人的眼球吸引過來。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

色彩疊加海報(bào)設(shè)計(jì)法則

色彩疊加法則其實(shí)是海報(bào)色彩設(shè)計(jì)技巧中的細(xì)分領(lǐng)域,其特色是利用兩種或者兩種以上的顏色進(jìn)行畫面的切割、重組、漸變、疊加等設(shè)計(jì)手法,去突出整體畫面的主焦點(diǎn),若色彩搭配好了,會(huì)起到非常震撼的視覺效果。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

文字切片海報(bào)設(shè)計(jì)法則

文字切片其實(shí)也就是把文字按視覺呈現(xiàn)的需求,進(jìn)行切割,其設(shè)計(jì)的優(yōu)勢(shì)在于字體呈現(xiàn)較為立體,畫面的節(jié)奏感強(qiáng)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

圖文疊加的海報(bào)設(shè)計(jì)法則

圖文疊加的海報(bào)設(shè)計(jì)法則,多用于電影海報(bào),將人物或者場(chǎng)景與文字疊加,營造一種重復(fù)錯(cuò)落的視覺感。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

液態(tài)效果的海報(bào)設(shè)計(jì)法則

液態(tài)效果的海報(bào)設(shè)計(jì)通常會(huì)選擇用較為豐富的顏色進(jìn)行漸變,高斯模糊或者扭曲的形式去呈現(xiàn),畫面的視覺大多以抽象的概念去呈現(xiàn)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

雙重曝光的海報(bào)設(shè)計(jì)法

雙重曝光的海報(bào)設(shè)計(jì)用人或者動(dòng)物與第三方元素進(jìn)行重合、它最大的特點(diǎn)是利用光與影的結(jié)合,打造出比較跨時(shí)空的錯(cuò)落感,這種設(shè)計(jì)手法多用于電影海報(bào)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

單字母的海報(bào)設(shè)計(jì)法則

英文字母的玩法有很多種,疊加,變形、重組等,單個(gè)的英文字母同樣也可以這樣玩,打破畫面的單一性,變得趣味性很強(qiáng)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

正負(fù)形海報(bào)設(shè)計(jì)法則

正負(fù)形的海報(bào)設(shè)計(jì)其亮點(diǎn)在于利用負(fù)空間形成巧妙構(gòu)圖。一張圖中隱藏著另一個(gè)畫面。

大多數(shù)的設(shè)計(jì)師會(huì)選用負(fù)空間的方式,將視覺中心聚焦在一個(gè)比較小的物體上,并在周圍留出視覺呼吸空間。將文本置于負(fù)空間內(nèi),來吸引視線。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

立體海報(bào)設(shè)計(jì)法則

3D視覺效果的海報(bào)設(shè)計(jì)一直都是設(shè)計(jì)師們比較熱衷的表現(xiàn)手法,將字母或者圖案加上陰影效果,讓主視覺畫面凸出來?;蛘呷谌霂缀蔚膱D形元素,將平面的主視覺變得立體化。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

文字海報(bào)設(shè)計(jì)法則

文字海報(bào)設(shè)計(jì)包含很多種表現(xiàn)形式,利用滿版、留白、S型等排版形式布局畫面,讓文字代替圖形去表達(dá)主畫面。這也是較為常見的海報(bào)設(shè)計(jì)形式。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

紙質(zhì)效果的海報(bào)設(shè)計(jì)法則

紙質(zhì)效果的海報(bào)設(shè)計(jì)其實(shí)也屬于立體海報(bào)的一種,形象和感覺的組合,是紙質(zhì)效果海報(bào)設(shè)計(jì)的關(guān)鍵。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

而紙張給人的感覺是質(zhì)感和厚重這兩種形式,所以畫面的呈現(xiàn)因圍繞這兩種形式進(jìn)行展開。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

照片切割法則

照片切割也就是和文字或圖形進(jìn)行重合、疊加、打散的表現(xiàn)手法來增加海報(bào)設(shè)計(jì)的層次感。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

透明效果海報(bào)設(shè)計(jì)法則

海報(bào)設(shè)計(jì)中,如果畫面的顏色太過單調(diào),可以將部分塊面用較為鮮艷的顏色進(jìn)行突出,這種表現(xiàn)形式通常適用于海報(bào)中文字較多的處理方式。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

復(fù)古風(fēng)格的海報(bào)設(shè)計(jì)法則

復(fù)古風(fēng)的海報(bào)設(shè)計(jì)通常會(huì)選用顏色飽和度較低的顏色,搭配毛筆字體或肌理的觸感進(jìn)行呈現(xiàn),這種設(shè)計(jì)手法,大多會(huì)用于電影海報(bào)或者藝術(shù)展覽之類的范圍。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

插畫風(fēng)格的海報(bào)設(shè)計(jì)法則

插畫風(fēng)格的海報(bào)設(shè)計(jì)具備很強(qiáng)的講故事能力,無論是小清新的畫風(fēng)還是較為夸張的插畫手法,都能將整個(gè)畫面變得生動(dòng)活潑了很多,這也是很多設(shè)計(jì)師最常用的海報(bào)設(shè)計(jì)的表現(xiàn)形式。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

漸變的海報(bào)設(shè)計(jì)法則

漸變色系的海報(bào)設(shè)計(jì),用很多種顏色進(jìn)行巧妙融合,畫面分為簡(jiǎn)潔和個(gè)性兩種形式呈現(xiàn),視覺沖擊力很強(qiáng)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!


微信贊賞淺析

博博


人人都是產(chǎn)品經(jīng)理 2018-06-06 18:13:32

今天上午,微信對(duì)于贊賞功能進(jìn)行了升級(jí)和宣傳,他的贊賞對(duì)象由公眾號(hào)變?yōu)榱俗髡?。由于大量公眾?hào)的用戶活躍度長(zhǎng)時(shí)間處于衰退期,此次“贊賞”功能升級(jí)最終目的無非是想敲醒沉睡內(nèi)容生產(chǎn)者。本文主要從它贊賞功能的升級(jí)來談?wù)勎⑿殴娞?hào)。

從“贊賞”功能升級(jí)淺析:微信公眾號(hào)如何挽留內(nèi)容生產(chǎn)者?

6月6日上午微信對(duì)“贊賞”功能升級(jí)進(jìn)行宣傳,其最大的變化是從贊賞對(duì)象由公眾號(hào)變更為作者,今后免費(fèi)轉(zhuǎn)載也有可能獲得贊賞收益。同時(shí)支持恢復(fù)iOS端打賞,其打賞金額直接到贊賞者微信賬戶期間不收手續(xù)費(fèi)。仿佛在吶喊“創(chuàng)作者們快回來吧”

根據(jù)企鵝智庫《2017自媒體趨勢(shì)報(bào)告》中數(shù)據(jù)顯示顯示:自媒體每日新增信息越來越多,加上用戶碎片化信息消費(fèi)方式,使閱讀具有較大的隨機(jī)性而缺乏粘性,不僅很多已關(guān)注的公眾號(hào)信息不一定會(huì)打開閱讀,打開閱讀的概率以及完整讀完一篇文章概率都依次遞減…..

現(xiàn)在來看看目前的整個(gè)微信公眾號(hào)主線流程:

一、核心業(yè)務(wù)

從“贊賞”功能升級(jí)淺析:微信公眾號(hào)如何挽留內(nèi)容生產(chǎn)者?

藍(lán)色部分是整個(gè)微信公眾平臺(tái)核心的發(fā)動(dòng)機(jī),由內(nèi)容生產(chǎn)者輸出內(nèi)容通過微信公眾號(hào)作為媒介傳遞給用戶,用戶反過來以留言點(diǎn)贊打賞來反饋給作者,促進(jìn)整個(gè)微信公眾號(hào)體系正常運(yùn)轉(zhuǎn)。

從本次贊賞升級(jí)上看,無非是給閉環(huán)的最后一到流程增加多了一環(huán)“打賞”,這是對(duì)原創(chuàng)作者最大的鼓勵(lì),值得一提的是今后免費(fèi)轉(zhuǎn)載也有可能獲得贊賞收益,支持和激勵(lì)原創(chuàng)作者。

下面看看公眾號(hào)另外2個(gè)核心業(yè)務(wù)。

二、運(yùn)營加速器 1 號(hào)

從“贊賞”功能升級(jí)淺析:微信公眾號(hào)如何挽留內(nèi)容生產(chǎn)者?

內(nèi)容生產(chǎn)者的優(yōu)質(zhì)內(nèi)容由公眾號(hào)信息流進(jìn)行分發(fā),可從而獲得了打賞收入,且符合一定的資格可開通流量主獲得額外的廣告收入,一定程度上也了激發(fā)和鼓勵(lì)作者提供持續(xù)優(yōu)質(zhì)內(nèi)容輸出。

同時(shí)微信公眾號(hào)提供原創(chuàng)保護(hù)機(jī)制及轉(zhuǎn)載和白名單操作,訂閱號(hào)app的上線也為作者提供更便捷的操作及互動(dòng),促進(jìn)整個(gè)內(nèi)容生態(tài)高速運(yùn)轉(zhuǎn)。

三、運(yùn)營加速器 2 號(hào)

從“贊賞”功能升級(jí)淺析:微信公眾號(hào)如何挽留內(nèi)容生產(chǎn)者?

根據(jù)用戶使用場(chǎng)景,不斷優(yōu)化給用戶更良好的體驗(yàn)去瀏覽查看,增加用戶黏性和激發(fā)活躍度,期間不斷收集意見反饋,促進(jìn)整個(gè)內(nèi)容生態(tài)高速運(yùn)轉(zhuǎn)。

四、猜測(cè)后續(xù)變化及趨勢(shì)

  1. 繼續(xù)豐富訂閱號(hào)app功能,本次贊賞賬戶的各種操作,應(yīng)該很快會(huì)在訂閱號(hào)app里發(fā)布上線,此外編輯和發(fā)布可以使用視頻目前訂閱號(hào)app也不支持,想必在短視頻上繼續(xù)發(fā)力,該功能少不了。
  2. 豐富內(nèi)容生態(tài),在原有的“公眾號(hào)消息列表”、“看一看”、“搜一搜”、“群聊及朋友圈”后繼續(xù)擴(kuò)大公眾號(hào)文章出口。
  3. 從爭(zhēng)奪用戶數(shù)量到爭(zhēng)奪用戶時(shí)間,作者的收入不僅僅只有打賞和廣告點(diǎn)擊,可能后續(xù)納入付費(fèi)閱讀,最大化協(xié)助內(nèi)容創(chuàng)作者持續(xù)生產(chǎn)高質(zhì)內(nèi)容。
  4. 僅僅按公眾號(hào)首字母排序遠(yuǎn)遠(yuǎn)不夠,優(yōu)化公眾號(hào)列表分組管理,至于由用戶手動(dòng)分類還是由微信公眾號(hào)進(jìn)行分類在此不展開陳述。
  5. 公眾號(hào)和小程序持續(xù)發(fā)酵流量互補(bǔ)。

2018年下半年的網(wǎng)頁設(shè)計(jì)趨勢(shì)

博博


人人都是產(chǎn)品經(jīng)理 2018-06-06 16:08:27

逐漸熱起來的6月,這3種設(shè)計(jì)趨勢(shì)將會(huì)流行起來……

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

設(shè)計(jì)趨勢(shì)最有意思的地方在于,它總會(huì)有一些微妙的變化,而每一種趨勢(shì)的沉寂和回歸,總會(huì)伴隨著不同的轉(zhuǎn)變,甚至?xí)?chuàng)造出一些全新的設(shè)計(jì)模式。溫度回升進(jìn)入夏季,這個(gè)六月的網(wǎng)頁設(shè)計(jì)趨勢(shì)都不是全新的東西,都是熟臉,但是仔細(xì)看看,會(huì)發(fā)現(xiàn)在細(xì)節(jié)上又略有不同。

接下來,我們看看6月流行的這3種設(shè)計(jì)趨勢(shì):

1. 全屏大圖

超大的全屏圖片在網(wǎng)頁設(shè)計(jì)中已經(jīng)不算太新鮮的東西了。不過,如果你仔細(xì)查看近期的這些使用高清全屏大圖的網(wǎng)頁設(shè)計(jì),會(huì)發(fā)現(xiàn)設(shè)計(jì)師們開始越來越多地將其他的元素從整個(gè)首屏設(shè)計(jì)中剝離,讓位于背景的圖片展示性更強(qiáng),將屏幕填充得更加徹底。

全屏大圖以外,不再有獨(dú)立的導(dǎo)航區(qū)域或者其他的元素,所有的前景元素都位于圖片的籠罩之下,網(wǎng)站的一體性更加明顯。由于前景元素的缺乏,整個(gè)背景圖片承擔(dān)了更多的視覺展示的作用,只有最好、最引人矚目和有趣的圖片才更加契合這樣的設(shè)計(jì)。

下面的三個(gè)網(wǎng)站設(shè)計(jì)案例均是如此,導(dǎo)航等功能都隱藏在大圖背景當(dāng)中,通過漢堡圖標(biāo)和其他的方式來引導(dǎo)用戶點(diǎn)擊或者吸引用戶。所以,圖片的素質(zhì)必須非常的過硬才行。

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

而這種設(shè)計(jì)手法所面對(duì)的問題也很具體,比如說大圖背景所帶來的對(duì)比度和識(shí)別度上的可用性問題,前景元素和背景圖片之間在視覺上的沖突等等。

其他的設(shè)計(jì)元素,比如線條和「查看更多」和箭頭等元素,能夠在視覺的引導(dǎo)上起到一定的作用,類似這樣的設(shè)計(jì)細(xì)節(jié)能夠很好的緩解一些上述的問題,不過需要設(shè)計(jì)師仔細(xì)斟酌。

2. 全新分屏設(shè)計(jì)

我們?cè)?jīng)在設(shè)計(jì)趨勢(shì)相關(guān)的文章中多次提到分屏設(shè)計(jì),而分屏式設(shè)計(jì)也多次作為月度設(shè)計(jì)趨勢(shì)出現(xiàn)在同系列的文章當(dāng)中。

分屏設(shè)計(jì)的好處在于它本身可以很好地呈現(xiàn)兩方面的信息,并且能夠針對(duì)不同尺寸的屏幕進(jìn)行響應(yīng)。無論是在桌面端屏幕上還是在移動(dòng)端界面上,都能一次獲取兩種不同的信息。用戶不會(huì)錯(cuò)過重要的信息。

不過在的網(wǎng)頁設(shè)計(jì)作品當(dāng)中,分屏設(shè)計(jì)本身在功能和形式上并沒有太大的變化,不過在處理方式和細(xì)節(jié)上和以往不盡相同。

首先,這些設(shè)計(jì)保留了分屏設(shè)計(jì)的基本思路和精神,也就是將屏幕分為兩個(gè)部分來呈現(xiàn)信息,但是在劃分區(qū)域的時(shí)候,設(shè)計(jì)師換了新的思路。Reach Digital 分屏采用的是對(duì)角線方向的不對(duì)稱分屏,黃白雙色對(duì)比強(qiáng)烈,而同樣采用對(duì)角線分屏的 Cap GunCup Creative 則使用了更為簡(jiǎn)約的黑白配色風(fēng)格,Weima 這個(gè)網(wǎng)站則采用了傳統(tǒng)的左右分屏,但是分割的比例是按照3:1來劃分的,這種分割方式更加有趣。

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

分屏設(shè)計(jì)的好處在于它可以應(yīng)對(duì)多種多樣的設(shè)計(jì)。無論是小型網(wǎng)站,還是大量的內(nèi)容,分屏的設(shè)計(jì)都可以讓用戶參與進(jìn)來。分屏式設(shè)計(jì)為用戶提供了兩種不同的選擇,不難理解,功能也很直觀。

3. 低透明度色彩疊加

在圖片和視頻上疊加色彩也不是什么新鮮的玩法,它是非常受歡迎的設(shè)計(jì)手法和趨勢(shì)。這種設(shè)計(jì)技法讓設(shè)計(jì)師可以更輕松地創(chuàng)建層次分明的效果,可以通過色彩疊加來創(chuàng)建更為統(tǒng)一的視覺效果,控制對(duì)比度,營造氛圍和情緒。

這種設(shè)計(jì)當(dāng)中,透明度的控制是極為關(guān)鍵的一個(gè)步驟。通常,設(shè)計(jì)師不會(huì)讓色彩疊加層透明度太低,這樣用戶就可以一目了然地看到背景的圖片信息。不過,在今天的這幾個(gè)案例當(dāng)中,用戶需要仔細(xì)分辨才能看清背景中被蓋住的內(nèi)容,因?yàn)樯石B加層的透明度不高,對(duì)背景圖片的遮蓋力很強(qiáng)。對(duì)于這種設(shè)計(jì)趨勢(shì),我們可以簡(jiǎn)單分析一下:

  • 這種設(shè)計(jì)看起來是很酷的,低透明度讓背景以紋理的形式呈現(xiàn),更加富有深度,創(chuàng)造出吸引人的視覺效果。
  • 這種設(shè)計(jì)趨勢(shì)不適合傳遞背景信息,因?yàn)榈屯该鞫却_實(shí)很難讓背景的細(xì)節(jié)清晰地傳達(dá)出來。

那么,這種設(shè)計(jì)趨勢(shì)是否值得追隨呢?這個(gè)就要具體問題具體看待了。

不要使用這種趨勢(shì)來呈現(xiàn)關(guān)鍵性的圖片信息,如果你僅僅只是要借助圖片搭配色彩疊加來強(qiáng)化層次感、增加信息量,那么另當(dāng)別論。

在下面的每個(gè)案例當(dāng)中,前景的元素都足以傳遞出清晰的內(nèi)容和信息,彩色疊加層后的圖片內(nèi)容更多是裝飾性的。圖片雖然都提供了一些附加的信息,但是這些信息都不是關(guān)鍵,它們更多的是強(qiáng)化視覺。

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

這是一個(gè)適用范圍相對(duì)較窄的趨勢(shì),如果你想使用的話,同樣需要控制好透明度。

結(jié)語

跟隨設(shè)計(jì)趨勢(shì)是一個(gè)非常有趣的事情,它可以讓你的設(shè)計(jì)保持新鮮,讓你的設(shè)計(jì)在激烈的競(jìng)爭(zhēng)中脫穎而出,它同時(shí)可能還存在一些風(fēng)險(xiǎn),需要你在使用的時(shí)候仔細(xì)衡量。


UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

博博


UI大課堂 2018-02-01 00:00:39

提到這個(gè)話題有兩層不同的討論方向,在工作中對(duì)公司項(xiàng)目進(jìn)行設(shè)計(jì)改版和利用業(yè)余時(shí)間進(jìn)行自由主題的改版練習(xí)。這次我們主要以后者為出發(fā)點(diǎn)進(jìn)行討論,其目的是為了給部分設(shè)計(jì)師在利用自己業(yè)余時(shí)間上面探索出一個(gè)新的方向。在工作項(xiàng)目中進(jìn)行UI設(shè)計(jì)改版分為團(tuán)隊(duì)發(fā)起和自我發(fā)起,這個(gè)我們下一次一起來討論。

UI設(shè)計(jì)師的自我提升來源于多方面的綜合體現(xiàn),工作項(xiàng)目中的實(shí)戰(zhàn)經(jīng)驗(yàn)、團(tuán)隊(duì)協(xié)作的互補(bǔ)學(xué)習(xí)、項(xiàng)目沉淀與反思、碎片化閱讀的查漏補(bǔ)缺、業(yè)余時(shí)間的自我驅(qū)動(dòng)、閱讀帶來的知識(shí)沉淀等等。如何充分利用自己的業(yè)余時(shí)間是被很多初入行業(yè)的設(shè)計(jì)師所忽略的,一晃三五年過去了,卻發(fā)現(xiàn)自己找不到更多的作品用來豐富簡(jiǎn)歷,很快便進(jìn)入了瓶頸期。

面對(duì)未來的自己可能會(huì)出現(xiàn)這樣的情況,我們一起提前探討一下這個(gè)話題,以 UI設(shè)計(jì)改版為突破口展開我們的話題,希望帶給即將入行和剛?cè)胄械脑O(shè)計(jì)伙伴兒一個(gè)新的方向。

目錄

1、UI改版的目的,從不做無意義的事情;

2、制定時(shí)間規(guī)劃,是為了治療懶病;

3、如何挑選改版產(chǎn)品,再也不是選“美”了;

4、體驗(yàn),這是你的第一次深度探尋;

5、功能梳理,理清流程好開工;

6、競(jìng)品分析,做好知己知彼;

7、素材采集,打開禁錮的思維;

8、體驗(yàn),走了一圈才發(fā)現(xiàn)你可以更好;

9、交互設(shè)計(jì),實(shí)現(xiàn)你心中的更好;

10、設(shè)計(jì)風(fēng)格推導(dǎo),符合產(chǎn)品的設(shè)計(jì)趨勢(shì)運(yùn)用;

11、界面設(shè)計(jì),碎片化積累;

12、審核,尋找導(dǎo)師;

13、調(diào)整優(yōu)化,不放過任何一個(gè)細(xì)節(jié);

14、包裝,整理設(shè)計(jì)思路;

15、分享,設(shè)計(jì)交流。

正文

1、UI改版的目的,從不做無意義的事情

工作中的項(xiàng)目參與對(duì)UI設(shè)計(jì)師的專業(yè)提升是非常重要的,由于很多公司都處于高速發(fā)展的階段,項(xiàng)目的周期很緊張,都希望每個(gè)支援板塊能夠具備更高的效率,推進(jìn)項(xiàng)目更快的完成迭代上線。在設(shè)計(jì)板塊,很多成熟的平臺(tái)也是愿意花費(fèi)更高的福利待遇引進(jìn)資深及以上級(jí)別的設(shè)計(jì)師支持項(xiàng)目的運(yùn)轉(zhuǎn),那么設(shè)計(jì)師的進(jìn)階之路便是你在職場(chǎng)中穩(wěn)中求進(jìn)的關(guān)鍵。

在真實(shí)的場(chǎng)景中,有一部分設(shè)計(jì)師也存在著以下情況:

  • a. 項(xiàng)目參與度低,沒有更多的機(jī)會(huì)發(fā)揮自己的專業(yè);

  • b. 公司產(chǎn)品迭代緩慢或者視覺支持較小,空余時(shí)間較多;

  • c. 沒有機(jī)會(huì)在項(xiàng)目中嘗試一些新的設(shè)計(jì)語言;

  • d. 自學(xué) UI 中,沒有真實(shí)項(xiàng)目能夠發(fā)揮;

  • e. 增強(qiáng)設(shè)計(jì)效率和產(chǎn)品設(shè)計(jì)思維等能力。

如果你擁有以上的情況之一,利用自己的業(yè)余時(shí)間進(jìn)行 APP 設(shè)計(jì)改版將會(huì)給你帶來更多的提升空間,不但可以通過練習(xí)增強(qiáng)自己的設(shè)計(jì)效率,也能體驗(yàn)更加豐富的產(chǎn)品設(shè)計(jì)。在改版中也能不斷加強(qiáng)一些交互或者產(chǎn)品的思維,可以讓你在以后的工作項(xiàng)目中不局限在視覺層面,具備更多的產(chǎn)品思考,做出更合理的設(shè)計(jì)。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

2、制定時(shí)間規(guī)劃,是為了治療懶病

如果你想要改變現(xiàn)狀,也拿出前所未有的熱度值,那就趁熱打鐵吧,制定一份時(shí)間表是必須的,千萬別忽略它的重要性,如果你不按照這個(gè)時(shí)間計(jì)劃去推進(jìn),可能這個(gè)熱度值將會(huì)被懶寶寶不斷地熄滅^_^。

制定時(shí)間規(guī)劃不僅可以合理的利用好自己的業(yè)余時(shí)間,也能更好的按照這個(gè)規(guī)劃表去逐步的推進(jìn)這次改版項(xiàng)目,把一個(gè)大的事項(xiàng)拆分為若干的小事項(xiàng),每天推進(jìn)一部分,一次改版設(shè)計(jì)很快就在不斷的推進(jìn)中被完成。

APP 改版時(shí)間規(guī)劃表大家可根據(jù)自己的習(xí)慣設(shè)置,表格形式還是簡(jiǎn)單的文字記錄都可以,進(jìn)度把控需要結(jié)合自身情況而定,確保其有效性。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

3、如何挑選改版產(chǎn)品,再也不是選“美”了

面對(duì)應(yīng)用商城里面海量的 APP 產(chǎn)品,你是否有點(diǎn)不知所措,如果選擇一個(gè)自己從來不玩的 APP,改版的時(shí)候?qū)Ξa(chǎn)品的服務(wù)模式、功能架構(gòu)、交互邏輯等都是比較陌生的,需要一定的時(shí)間進(jìn)行學(xué)習(xí)。如果選擇一些大型的產(chǎn)品,由于其自身的設(shè)計(jì)團(tuán)隊(duì)就是非常的專業(yè),你很難從中發(fā)現(xiàn)可以優(yōu)化的點(diǎn),即使勉強(qiáng)進(jìn)行改版,也會(huì)發(fā)現(xiàn)自己設(shè)計(jì)得不如原版的好,進(jìn)而打擊自己的自信心。

通過上面的分析,我們?cè)谔暨x改版產(chǎn)品的時(shí)候,需要結(jié)合自身的一些情況先做出一定的預(yù)判,然后再去挑選現(xiàn)階段相對(duì)比較符合的產(chǎn)品進(jìn)行改版練習(xí)。

a. 挑選自己接觸過的直接產(chǎn)品或者間接產(chǎn)品;

b. 對(duì) APP 里面所提供的產(chǎn)品或者服務(wù)比較認(rèn)可或者沒有一定的排斥感;

c. 挑選無論是視覺層面還是交互層面都有一定優(yōu)化空間的產(chǎn)品,別輕易嘗試精品;

d. 如果身邊有朋友使用過的產(chǎn)品優(yōu)先考慮,因?yàn)榭梢猿蔀槟阏{(diào)研數(shù)據(jù)的來源;

e. 選擇陽光積極型的產(chǎn)品,不做傳遞負(fù)能量或者違反規(guī)定的產(chǎn)品;

f. 初次嘗試 APP 改版設(shè)計(jì),從輕量級(jí)的產(chǎn)品入手,可以控制練習(xí)時(shí)間和自己的駕馭度。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

4、體驗(yàn),這是你的第一次深度探尋

當(dāng)你確定自己改版的 APP 對(duì)象以后,我們就開始做一次體驗(yàn)吧,這是你的第一次深度探尋。體驗(yàn)情況根據(jù)設(shè)計(jì)師對(duì)該產(chǎn)品的熟悉程度而定,你需要通過不斷的進(jìn)行操作把自己從小白用戶升級(jí)到專家級(jí)用戶。

這個(gè)過程需要你對(duì)產(chǎn)品有一個(gè)很深入的了解,不只是熟悉主流程操作邏輯,對(duì)一些偏冷門的功能操作也要非常的熟悉,如果是需要注冊(cè)使用的產(chǎn)品,一定不要忽略注冊(cè)會(huì)員以后的體驗(yàn)。最終達(dá)到的級(jí)別是你可以向身邊任何一位朋友輕松的進(jìn)行推薦和演說,能夠通過你的講解讓他輕松地學(xué)會(huì)使用該產(chǎn)品。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

5、功能梳理,理清流程好開工

當(dāng)你對(duì)改版 APP 進(jìn)行第一次深度體驗(yàn)之后,利用思維導(dǎo)圖軟件繪制出整個(gè)產(chǎn)品的功能結(jié)構(gòu)圖,思維導(dǎo)圖軟件種類很多,大家自行選擇,我常用的是 MindNode。第一次進(jìn)行功能梳理無需進(jìn)行增刪處理,真實(shí)還原產(chǎn)品現(xiàn)有功能即可,其目的是整理自家“倉庫”,做到心中有數(shù)。

在進(jìn)行功能梳理的時(shí)候,如果遇到操作復(fù)雜的功能需要備注信息,以便自己后期預(yù)覽時(shí)能夠快速理解其含義。如果是第一次做功能結(jié)構(gòu)圖越詳細(xì)越好,這將有助于你充分理解每個(gè)功能傳達(dá)的含義。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

6、競(jìng)品分析,做好知己知彼

深度體驗(yàn)完改版 APP 之后,做了功能結(jié)構(gòu)圖,此時(shí)你對(duì)所需要改版的 APP 以及這個(gè)行業(yè)的產(chǎn)品都有一定的認(rèn)知,此時(shí)你再去體驗(yàn)直接競(jìng)品和間接競(jìng)品必然是以一個(gè)專家級(jí)用戶的水平去探尋。在體驗(yàn)過程中需要結(jié)合改版產(chǎn)品的功能進(jìn)行對(duì)比,可能第一遍體驗(yàn)無法很好的進(jìn)行對(duì)比,所以需要至少體驗(yàn) 3 次以上才能很好的得出對(duì)比的結(jié)論。

體驗(yàn)產(chǎn)品時(shí)需要注意的幾個(gè)維度:

  • a. 不要急于進(jìn)行總結(jié),先進(jìn)行至少 3 次以上體驗(yàn);

  • b. 先看整體布局再分析局部細(xì)節(jié);

  • c. 重點(diǎn)功能交互形式需要提取出來進(jìn)行對(duì)比;

  • d. 主界面的各版塊布局設(shè)計(jì)需要進(jìn)行對(duì)比;

  • e. 配色分析,作為改版時(shí)的配色優(yōu)化指導(dǎo);

  • f. 圖標(biāo)和組件庫的分析,找出細(xì)節(jié)的優(yōu)化方向。

進(jìn)行競(jìng)品體驗(yàn)時(shí),盡可能多的找出差異化的設(shè)計(jì)形式,作為改版 APP 優(yōu)化的指導(dǎo)方向。由于作為 UI 設(shè)計(jì)師進(jìn)行 APP 改版練習(xí)更多是視覺優(yōu)化為主,交互優(yōu)化為輔,所以我們需要在相同模塊上面找出更多不同的設(shè)計(jì)樣式,作為視覺優(yōu)化的方向。

如果你自身交互能力較好,也可以以交互優(yōu)化為主,視覺優(yōu)化為輔,這個(gè)可以結(jié)合自身情況選擇。在進(jìn)行競(jìng)品體驗(yàn)的時(shí)候也要根據(jù)優(yōu)化目的的不同,著重的轉(zhuǎn)移體驗(yàn)的重心。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

7、素材采集,打開禁錮的思維

通過競(jìng)品體驗(yàn)?zāi)銜?huì)總結(jié)出改版 APP 各個(gè)模塊的差異化,相同的功能模塊各自產(chǎn)品的交互形式、布局樣式、視覺風(fēng)格都存在各自的差異。此時(shí),你對(duì)改版 APP 中的很多設(shè)計(jì)都一個(gè)初步的優(yōu)化清單,你需要再深入一步,因?yàn)楦?jìng)品的設(shè)計(jì)樣式不一定就是值得借鑒的,我們需要尋找更多的靈感,打開自己禁錮的思維。

通過國內(nèi)外的一些設(shè)計(jì)平臺(tái)、素材網(wǎng)站等我們可以去采集更多的設(shè)計(jì)樣式作為靈感借鑒,日常的一個(gè)采集收藏習(xí)慣也就變得尤為重要了,作為一個(gè)優(yōu)秀的 UI 設(shè)計(jì)師,我們需要養(yǎng)成這樣的習(xí)慣。個(gè)人平時(shí)經(jīng)常訪問的設(shè)計(jì)平臺(tái)有站酷、UI中國、致設(shè)計(jì)、Dribbble、Behance等,采集收藏靈感會(huì)經(jīng)常用Pinterest和花瓣,都是一些大家經(jīng)常訪問的平臺(tái),所以不是別人知道你所不知的優(yōu)秀平臺(tái),而是你沒有他的良好習(xí)慣。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

8、體驗(yàn),走了一圈才發(fā)現(xiàn)你可以更好

采集完一些靈感素材之后,我們又回到體驗(yàn)改版 APP 的起點(diǎn),走了一圈之后你會(huì)發(fā)現(xiàn)改版 APP 中很多你可以入手優(yōu)化的方向,比起第一次體驗(yàn),你會(huì)更加有信心能夠做出一個(gè)不一樣的設(shè)計(jì)作品。再次進(jìn)行產(chǎn)品體驗(yàn)的時(shí)候,你需要帶著腦海中處理相同功能板塊的不同設(shè)計(jì)表現(xiàn)形式進(jìn)行思考,尋找出更好的設(shè)計(jì)表現(xiàn)形式來解決這個(gè)功能模塊。

在構(gòu)思優(yōu)化樣式的時(shí)候,可以繪制一些簡(jiǎn)單的草圖,以防后期進(jìn)行交互輸出的時(shí)候遺漏靈感細(xì)節(jié)。在進(jìn)行設(shè)計(jì)優(yōu)化的時(shí)候先從靈感庫中尋找較為符合的樣式進(jìn)行思維嵌套,然后再發(fā)散思維,融入自己原創(chuàng)性的思維,形成自己的原創(chuàng)思路。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

9、交互設(shè)計(jì),實(shí)現(xiàn)你心中的更好

通過前期的準(zhǔn)備工作,我們即將進(jìn)入重要的設(shè)計(jì)部分,大家不要忽略前期的準(zhǔn)備階段,只有思路成熟且清晰,后面的設(shè)計(jì)工作才能更加順暢。

作為 UI 設(shè)計(jì)師最終輸出的必然是高保真的視覺稿,那么交互原型設(shè)計(jì)是為了快速的把自己的思路展現(xiàn)出來,所以不局限于原型軟件的繪制,哪怕是紙上的草圖繪制也是可行的方案。最終的交互稿是給自己看的,所以能看懂就能達(dá)到最終的目的。

如果你考慮后期進(jìn)行作品包裝展示時(shí),希望能展示出交互思維,那你花點(diǎn)時(shí)間適當(dāng)?shù)膶?duì)低保真交互原型進(jìn)行繪制也是不錯(cuò)的選擇,也能鍛煉自己原型制作軟件的操作能力^_^。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

10、設(shè)計(jì)風(fēng)格推導(dǎo),符合產(chǎn)品的設(shè)計(jì)趨勢(shì)運(yùn)用

在開始進(jìn)入界面視覺設(shè)計(jì)時(shí),我們需要對(duì)整體 APP 設(shè)計(jì)做風(fēng)格推導(dǎo),這將直接關(guān)系著最終界面呈現(xiàn)的效果。如果你是一位對(duì)行業(yè)趨勢(shì)關(guān)注的設(shè)計(jì)師,各種設(shè)計(jì)趨勢(shì)呈現(xiàn)在你腦海中,你需要進(jìn)行篩選,結(jié)合改版產(chǎn)品的屬性選擇合適的設(shè)計(jì)語言去表達(dá),切不可為了趨勢(shì)而犧牲產(chǎn)品定位。

在進(jìn)行風(fēng)格確定的時(shí)候,顏色的選擇也占據(jù)一定的因素,我們可以選擇改版 APP 現(xiàn)有的主色進(jìn)行優(yōu)化,也可以進(jìn)行推翻重選。如果是重新選擇配色方案,我們可以通過情緒版的方式在身邊朋友或者各種群里進(jìn)行。也可以與競(jìng)品形成視覺差異化,選擇一些形成對(duì)比的配色方案,方式很多,大家根據(jù)自己的條件和思路自行展開。

確定好配色方案之后,我們需要考慮設(shè)計(jì)的表現(xiàn)形式,無論是何種設(shè)計(jì)形式都需要符合產(chǎn)品的屬性。比如大標(biāo)題、大圓角卡片、大投影等設(shè)計(jì)表現(xiàn)形式會(huì)在視覺層面帶來不錯(cuò)的效果,卻需要考慮信息量的因素,如果本身改版 APP 就屬于信息量很大的產(chǎn)品,在選擇時(shí)就要綜合考慮。根據(jù) APP 的風(fēng)格定位,比如文藝類、娛樂類、兒童類等,那么設(shè)計(jì)的風(fēng)格也會(huì)對(duì)產(chǎn)品風(fēng)格定位起到一定的影響。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

11、界面設(shè)計(jì),碎片化積累

當(dāng)你打開設(shè)計(jì)軟件進(jìn)行界面設(shè)計(jì)的時(shí)候,剩下的就是“滿血復(fù)活”的激情,為了能夠充分利用好業(yè)余時(shí)間,我們需要把數(shù)十個(gè)界面分配到具體的日程中,的利用碎片化的時(shí)間進(jìn)行積累。規(guī)定自己一天完成兩個(gè)界面,就要嚴(yán)格執(zhí)行,只有這樣你才能具備超強(qiáng)的戰(zhàn)斗力。

提到界面設(shè)計(jì)很多設(shè)計(jì)師會(huì)糾結(jié)在軟件的選擇上面,總會(huì)問老司機(jī)們你們用什么軟件,其實(shí)軟件的選擇并不是問題,它只是一個(gè)工具,用的順手即可,現(xiàn)在很多軟件都能帶來最終的目的。隨著很多輕量級(jí)的軟件不斷豐富多樣,軟件的操作也更加簡(jiǎn)單便捷,只要你充分的利用互聯(lián)網(wǎng)資源,軟件的學(xué)習(xí)只是熟練度的問題,設(shè)計(jì)的思路與技巧才是需要更多的學(xué)習(xí)、研究和總結(jié)。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

12、審核,尋找導(dǎo)師

歷盡艱辛你收獲了希望,一套 APP 改版設(shè)計(jì)作品初步完成,接下來你需要尋找到一位導(dǎo)師,俗話說當(dāng)局者迷,你自己構(gòu)思出來的東西需要得到驗(yàn)證,尋找一位資深的設(shè)計(jì)老司機(jī)給你指點(diǎn)作品,將會(huì)給你的成長(zhǎng)帶來很大的幫助。他們會(huì)站在更高的專業(yè)角度給你指出一些優(yōu)化建議,也能使你的作品更加成熟。

導(dǎo)師在哪里?

  • a. 可以是身邊的同事,別以為導(dǎo)師一定是大神,旁觀者的意見都是具有一定的思考價(jià)值;

  • b. 通過一些設(shè)計(jì)交流群尋求意見,建群的意義其實(shí)就是交流設(shè)計(jì)(可是現(xiàn)在演變?yōu)闀痴勅松?(ㄒoㄒ)/~~);

  • c. 通過設(shè)計(jì)平臺(tái)尋找那些活躍的老司機(jī),只要是真誠的設(shè)計(jì)交流,他們都會(huì)樂于分享;

  • d. 機(jī)緣巧合下加上的大神微信或者QQ,平時(shí)要注意不要群發(fā)小廣告去騷擾他們,他們關(guān)鍵時(shí)候會(huì)樂于給你專業(yè)性的指點(diǎn);

  • e. 相信你能找到更多的方法,尋求幫助。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

13、調(diào)整優(yōu)化,不放過任何一個(gè)細(xì)節(jié)

通過不同形式的意見反饋,我們即將面臨一次調(diào)整優(yōu)化,在眾多的反饋意見中,我們也不能盲目的進(jìn)行修改。我們要做有思考能力的設(shè)計(jì)師,去分析這些修改意見,遇到意見相左的修改建議要結(jié)合自己前期的調(diào)研進(jìn)行把控,因?yàn)樘嵋庖姷娜瞬灰欢芟衲阋粯邮煜ぎa(chǎn)品,可能存在一定的主觀性。

選擇性的進(jìn)行修改,也要保持自己的自信度,適度的自信可以增強(qiáng)你對(duì)作品的信任度,我們不能總是質(zhì)疑自己的能力,只要保持不斷努力學(xué)習(xí)的心態(tài),有時(shí)候也要相信自己的專業(yè)能力,相信自己就能給作品帶來自信度,你的需求方才能被你的專業(yè)意見所引導(dǎo)。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

14、包裝,整理設(shè)計(jì)思路

作品包裝總是會(huì)被很多設(shè)計(jì)師所忽略,在進(jìn)行作品展示的時(shí)候也比較隨意,沒有充分利用作品包裝的優(yōu)勢(shì)傳達(dá)出作品自身的價(jià)值。我們將作品展示出來進(jìn)行交流時(shí),需要通過適當(dāng)?shù)陌b把作品更好的一面清晰的傳遞給讀者。

在進(jìn)行作品包裝的時(shí)候,可以加入自己的設(shè)計(jì)思路輔助傳達(dá)出作品背后的故事,讓讀者更容易走進(jìn)你的作品。通過包裝把原本單調(diào)的獨(dú)立界面進(jìn)行解剖,利用整體布局、局部提煉、細(xì)節(jié)展示、文案描述、思路整理等形式,讓作品呈現(xiàn)效果更加豐富多樣。

作品包裝中一些簡(jiǎn)單的設(shè)計(jì)技巧:

  • a. 作品包裝設(shè)計(jì)中的版面布局需要舍得,適當(dāng)加大留白會(huì)給版面更強(qiáng)的呼吸感;

  • b. 局部提煉,對(duì)界面設(shè)計(jì)中的一些視覺表現(xiàn)力強(qiáng)的樣式提取出來獨(dú)立展示,豐富作品的細(xì)節(jié)展示;

  • c. 精心挑選樣機(jī),讓作品展示效果更佳,有時(shí)候也可以自己繪制更加簡(jiǎn)練的樣機(jī)模型;

  • d. 設(shè)計(jì)組建選擇性展示,增刪挑選的組建讓布局更加整體,視覺效果更加協(xié)調(diào),整體組合形成塊面感;

  • e. 利用對(duì)比突出重點(diǎn),不要使整體布局都處于平面化;

  • f. 裝飾元素的運(yùn)用,可以利用輔助圖形、短線等進(jìn)行設(shè)計(jì)裝飾;

  • g. 加強(qiáng)頭圖設(shè)計(jì)的視覺表現(xiàn),提高讀者的注意力。

作品包裝設(shè)計(jì)分為平臺(tái)型作品包裝和作品集包裝,也是需要我們?cè)O(shè)計(jì)師加以重視的一個(gè)板塊,以后我們單獨(dú)進(jìn)行這方面的研究分享。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

15、分享,設(shè)計(jì)交流

此時(shí),你已經(jīng)完成了這次 APP 改版之旅,恭喜你擊敗了懶寶寶,相信下一次你會(huì)具備更強(qiáng)的自我驅(qū)動(dòng)力。完成一次作品你可以選擇封印在冰冷的硬盤,也可以選擇分享給更多的設(shè)計(jì)朋友,大家互相學(xué)習(xí)和討論,個(gè)人比較傾向于后者。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

博博


天極網(wǎng) 2018-06-04 18:18:17

5月31日,小米在發(fā)布會(huì)上推出一代操作系統(tǒng)——MIUI10。近日,小編順利通過了MIUI10的內(nèi)測(cè)申請(qǐng),于是將手里的小米5第一時(shí)間更新,一起來看看官方給新系統(tǒng)定義的幾大更新亮點(diǎn)吧。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

首先,在更新MIUI10內(nèi)測(cè)版之后,老旗艦手機(jī)小米5煥然一新,變得流暢許多。此次新系統(tǒng)主要是針對(duì)全面屏做的設(shè)計(jì),具體表現(xiàn)在狀態(tài)欄和多任務(wù)的排版上,UI設(shè)計(jì)結(jié)合了Andrid P和iOS風(fēng)格,整體比較清新。在點(diǎn)按之后,圖標(biāo)會(huì)變成藍(lán)色,開關(guān)按鈕采用了翻頁的形式,而且可以容納的數(shù)量也比以前多了。雖然在風(fēng)格上進(jìn)行了大量的修改與整合,不過最終還是沒能逃脫“蘋果味”。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

小編覺得MIUI10最大的變化就是多任務(wù)面板,之前的MIUI9、MIUI8等版本均為橫向布局,而此次MIUI10變?yōu)榱丝v向布局,交互方式上有些變化。官方宣稱這是可以在一塊屏幕上看到更多的多任務(wù)。其實(shí)就是迎合了全面屏的理念,而又不想太過抄襲蘋果的多任務(wù),最終就出現(xiàn)了這樣的產(chǎn)物。說實(shí)話,小米5上的MIUI10多任務(wù)面板不是很好看,但是使用效果還不錯(cuò),多任務(wù)左右滑動(dòng)是關(guān)閉,長(zhǎng)按就有分屏,鎖定和設(shè)置三個(gè)按鈕。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

接下來是本次新增的駕車模式和小愛同學(xué)。之前MIUI9也有語音助手,不過稍顯“智障”,并沒有太多實(shí)用性。MIUI10上,小愛同學(xué)增加了訓(xùn)練計(jì)劃,可也設(shè)定提問他要回答的答案,實(shí)用性大大增強(qiáng)。駕車模式應(yīng)該是廣大司機(jī)朋友最關(guān)注的功能,全新的駕車模式在小愛同學(xué)的幫助下,可以做到邊開車邊回復(fù)消息,同時(shí)還能保證開車的安全性,非常實(shí)用。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

再來說說小編遇到的問題吧,因?yàn)槭荕IUI10內(nèi)測(cè)第一批版本,BUG多也是可以理解的。剛小米5升級(jí)MIUI10后,雖然操作確實(shí)很順滑,不過頭疼的BUG使得系統(tǒng)整體性沒那么強(qiáng)。有幾個(gè)BUG甚至把傳統(tǒng)的16:9手機(jī)當(dāng)成18:9的手機(jī)來顯示。需要提升的地方還有很多,比如消息通知會(huì)跑到下面來,就像有虛擬的劉海,還有充電的時(shí)候電量小圓圈也只能顯示四分之一,還有改不了熱點(diǎn)的名字和密碼。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

最后總結(jié)一下這幾天的使用體驗(yàn),MIUI10系統(tǒng)的外觀設(shè)計(jì)與流暢性自然不必多說,提升蠻大的。最讓小編印象深刻的還是殺后臺(tái)情況,3G內(nèi)存的小米5在MIUI9系統(tǒng)下殺后臺(tái)現(xiàn)象非常嚴(yán)重。在MIUI10下,這種情況改善了許多,使用時(shí)沒有以前那么“虛”,強(qiáng)烈推薦老旗艦手機(jī)升級(jí)。另外,小編發(fā)現(xiàn)“小愛同學(xué)”貫穿在了MIUI10中,許多地方都能見到AI智能的身影,相比MIUI9“聰明”了許多??偟膩碚f,內(nèi)測(cè)版MIUI10的升級(jí)非常到位,煥然一新的UI設(shè)計(jì)以及交互方式,提升顏值的同時(shí)也提高了檔次。

從月薪3000到月薪30000,設(shè)計(jì)師更該專注什么

博博

從月薪3000到月薪30000,設(shè)計(jì)師更該專注什么

SODO學(xué)堂 2017-09-11 19:17:47

從月薪3000到月薪30000,設(shè)計(jì)師更該專注什么

又是一篇長(zhǎng)文,但有用

花5min讀完,你會(huì)有收獲

我知道很多人看了這個(gè)題目可能是沖著“月薪3000到月薪30000”來的,想看看一個(gè)人的成功背后的故事。但是今天恐怕要說,一個(gè)人的成功有TA自己的機(jī)會(huì)和運(yùn)氣,而方法論才是更重要的。

讓自己成為一個(gè)更值錢的人才是要緊事,任何一個(gè)職業(yè)都一樣。

所以,今天就來說說,怎樣讓自己成為一個(gè)“更值錢”的人,以及想要充實(shí)自己,你應(yīng)該抓緊每一個(gè)周末甚至平日的時(shí)間做點(diǎn)什么。

01

關(guān)心收入之前先確保自己有能力

總有人在后臺(tái)也好,在知乎也好,在各種能私信的地方問我:

“我學(xué)的是xx專業(yè),現(xiàn)在在哪里哪里做著一份如何如何的工作,工作了1年多,我怎么才能讓自己快速增加更多的收入呢?”

一般說來,本著切合實(shí)際的原則,我也會(huì)告訴他們:“工作才1年多,最重要的是要先穩(wěn)定自己的設(shè)計(jì)水平,持續(xù)有高質(zhì)量的輸出,然后積累自己的作品,增加自己的設(shè)計(jì)能力。然后再關(guān)心所謂的賺錢和收入?!?

簡(jiǎn)而言之,先有能力,再談機(jī)會(huì)和收入。

從月薪3000到月薪30000,設(shè)計(jì)師更該專注什么

所以,這么看來,這些人應(yīng)該優(yōu)先轉(zhuǎn)化一下自己思考問題的出發(fā)點(diǎn),比如下面這樣的問題會(huì)更具體、更符合實(shí)情:

“我應(yīng)該報(bào)什么樣培訓(xùn)班,應(yīng)該快速獲得什么樣的專業(yè)能力,才能在工作中有賺更多錢的可能?”

“工資1w+的設(shè)計(jì)師,做出來的東西是什么樣?我怎么才能盡快做出同樣的設(shè)計(jì)?”

但其實(shí),這樣的問題我也并沒有一個(gè)一概而論的答案,不同公司的規(guī)模不同,大平臺(tái)和小公司所需要的能力、技能、水平都不同。

舉個(gè)例子,一般大公司的設(shè)計(jì)師職位劃分可能是非常細(xì)致的,每個(gè)人就干小范圍那一類活兒;小公司就比較雜了,可能設(shè)計(jì)稿你要做、市場(chǎng)溝通你要做,還要懂一些運(yùn)營知識(shí)等等。

像是1w+這種以薪酬來論能力的情況并沒有統(tǒng)一標(biāo)準(zhǔn)的答案,和公司、行業(yè)、環(huán)境、城市、專業(yè)、競(jìng)爭(zhēng)力等等很多因素都有關(guān)系。

這里給大家一個(gè)建議,如果你想知道一定收入的設(shè)計(jì)師達(dá)到什么樣的水平??梢匀フ衅杆阉骶W(wǎng)站按照薪資去排查搜索,會(huì)出來一批公司的list;然后再相應(yīng)去找每一家你感興趣的公司的官網(wǎng)或者電商網(wǎng)站(某寶之類)看具體出來的是什么感覺的設(shè)計(jì),這是最簡(jiǎn)單也直觀的方法。

所以,下次問類似問題的同學(xué),應(yīng)該知道怎么辦了。

02

不要為了多那一點(diǎn)收入而耗光自己的精力

我發(fā)現(xiàn)有很多同學(xué)都很迷茫一個(gè)事兒。大家似乎都想快點(diǎn)賺到更多收入:“作為設(shè)計(jì)師是不是可以利用私人或周末時(shí)間接點(diǎn)私單?這樣還能認(rèn)識(shí)更多的人,有額外收入,還能積累到更豐富的設(shè)計(jì)經(jīng)驗(yàn)?”

有這種想法的人應(yīng)該挺多的,畢竟設(shè)計(jì)師1-3年內(nèi)都很少能讓自己攢下什么錢,社會(huì)加注給每個(gè)人的經(jīng)濟(jì)壓力都很大,也無可厚非。

但是,我個(gè)人的看法是,如果你想要“吃更大的蛋糕、做更大的事情”,那么不要為了多那一點(diǎn)點(diǎn)收入,而在這個(gè)階段因?yàn)榻铀絾味馁M(fèi)掉自己太多的額外精力。

從月薪3000到月薪30000,設(shè)計(jì)師更該專注什么

為什么這么說?

一般有這種想法的人,基本上都處在設(shè)計(jì)水平中等偏下的位置,也有一點(diǎn)設(shè)計(jì)項(xiàng)目的經(jīng)驗(yàn)了,也有那么些稿子了,但是每一個(gè)項(xiàng)目做的不算出彩。知識(shí)不夠扎實(shí)、資源不夠豐富、人脈半上不下,又一心想要賺多點(diǎn)錢,所以才想著跑去接私單。一般,還只能接廉價(jià)的私單。

但是基本上都會(huì)面臨被私單逼瘋的境地,具體表現(xiàn)為:

1. 因?yàn)榱畠r(jià)私單單主逼格不高,所以瞎指揮的情況較多,改稿無數(shù)是常態(tài)

2. 改稿會(huì)經(jīng)過反復(fù)溝通協(xié)調(diào),又耗費(fèi)掉大量時(shí)間,溝通不善的情況也較多

3. 廉價(jià)私單越多,品味會(huì)越來越差,陷入喪失信心還沒時(shí)間充電的焦慮中

總之,如果你想保持個(gè)人精進(jìn),最好還是抽出時(shí)間來充電和充實(shí)自己,不要想著眼皮子底下那一點(diǎn)點(diǎn)收入。心態(tài)的差異與專注執(zhí)行在哪兒,是造成月薪3000→4000還是月薪3000→30000的本質(zhì)原因。

03

讓自己更專注在這些事情上

既然堅(jiān)持走在設(shè)計(jì)的道路上,那么真正保持讓自己有核心競(jìng)爭(zhēng)力、讓自己可以持續(xù)創(chuàng)造更多財(cái)富的做法,大家可以參考并嘗試以下幾個(gè)方面:

觀察優(yōu)秀人群,學(xué)習(xí)并模仿

如果你和我們一樣不是天生自帶尚方寶劍含著金湯匙出生的人,就不要在起跑線上幻想自己可以很快靠做圖成為“設(shè)計(jì)界的馬云”。最好還是踏踏實(shí)實(shí)穩(wěn)中求進(jìn),這樣比較不會(huì)帶來那么多消極情緒。

正常說來,在一個(gè)人的社交圈中,周圍總有人的水準(zhǔn)是高于自己,也有低于自己的。而你要關(guān)注的就是設(shè)計(jì)水平和能力高于自己的人,用心觀察和留心他們的習(xí)慣,感受自己究竟還有哪里可以進(jìn)步,學(xué)到這些人的長(zhǎng)處并且活用。

不要光是說想學(xué)習(xí)然后只是放嘴炮,要踏實(shí)地付出行動(dòng)。一般說來,值得被學(xué)習(xí)的方面有:

執(zhí)行力強(qiáng)多于嘴炮

期待并擁抱改變

自我驅(qū)動(dòng)力做事

積極樂觀熱愛光做

關(guān)注設(shè)計(jì)行業(yè)信息

說到這個(gè),又想起來周末有個(gè)同學(xué)私信我問什么是“時(shí)尚管理”,是不是從國外學(xué)習(xí)這個(gè)專業(yè)畢業(yè)之后就能進(jìn)品大公司,在品牌強(qiáng)大的背書下?lián)]斥方遒。

我記得我跟她說:“有人覺得自己在圣馬丁服裝設(shè)計(jì)專業(yè)一畢業(yè)就能成為約翰·加利亞諾,怎么會(huì)如此天真?

后來我真誠地建議她“多去看一些行業(yè)信息,比如BOF,這樣你至少能對(duì)這一行究竟是哪一行、做什么事兒、市場(chǎng)行情啥樣有最基本的了解和判斷。”

不知道不可怕,可怕的是單純地活在自己幻想的世界里不肯去了解真相。

選擇一個(gè)方向,堅(jiān)持越久越幸運(yùn)

很多同學(xué)覺得學(xué)設(shè)計(jì)也不一定非得只做高級(jí)設(shè)計(jì)師,聽說學(xué)設(shè)計(jì)還有很多其他的出路,比如做設(shè)計(jì)培訓(xùn)行業(yè)的老師、注冊(cè)賬號(hào)做設(shè)計(jì)類自媒體、自己設(shè)計(jì)自創(chuàng)品牌、做freelancer到處走穴等等等等。也不知道到底哪個(gè)算是真正滴適合自己,于是每一個(gè)為期半年,都試一試,不成功就換下一個(gè)。

不過試的越多越發(fā)現(xiàn),似乎都沒成功,哪個(gè)試到一半都覺得就那樣,總是會(huì)有各種各樣的問題和自己最理想中的狀態(tài)有區(qū)別。

在這個(gè)跳槽說跳就跳的年代,腳踏實(shí)地去慢慢積累的人正在越來越少。

但沒有100%理想狀態(tài)的工作的,培訓(xùn)參差不齊容易入坑、自媒體競(jìng)爭(zhēng)慘烈千篇一律、自創(chuàng)品牌需要人脈財(cái)力持續(xù)支持、自由職業(yè)者要面對(duì)強(qiáng)大的自控力和專注力考驗(yàn)……不論選哪個(gè)都會(huì)有自己賺錢的方式也會(huì)遇到自己的問題

你需要做的,只是選定一個(gè)方向。愿意多點(diǎn)點(diǎn)耐心在一個(gè)方向上積累和沉淀自己,別把精力分得太散,先做好手頭上的事兒再說。

知道自己哪里最強(qiáng)、哪里

設(shè)計(jì)師應(yīng)該都聽說過要保持自己的核心競(jìng)爭(zhēng)力,要讓自己的活兒做得原來越精良,越來越好。但是只有這一點(diǎn)我覺得還不夠,你應(yīng)該在明確自己的核心競(jìng)爭(zhēng)力之外,還知道自己的的差異化競(jìng)爭(zhēng)力在哪兒。

比如,同樣是UI設(shè)計(jì)師,你的UI界面做得好是你的核心競(jìng)爭(zhēng)力,此外,你有產(chǎn)品設(shè)計(jì)學(xué)習(xí)基礎(chǔ)同時(shí)又超級(jí)會(huì)做總結(jié),寫文案你也不在話下,那么,你的差異化競(jìng)爭(zhēng)力就包括了“ID設(shè)計(jì)基礎(chǔ)、會(huì)做總結(jié)、會(huì)寫文案”3項(xiàng)加分點(diǎn)。

當(dāng)你明白了這一點(diǎn),你也知道原來做好設(shè)計(jì)本身之外還有好多可以精進(jìn)可以學(xué)。

總之,多去想想該如何提升自己的設(shè)計(jì)能力,保持的優(yōu)勢(shì),同時(shí)盡可能深耕下去走得久一點(diǎn),做到這些,你的收入自然如水到渠成般地增值翻翻。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

博博


番茄匠APP 2018-05-18 15:07:48

美麗的獲獎(jiǎng)網(wǎng)站

1. Feed

獎(jiǎng)勵(lì):Awwwards當(dāng)日的場(chǎng)地(6/6/2015)

Feed不僅是一個(gè)有趣的概念,它還有一個(gè)令人驚嘆的執(zhí)行過程,它挑戰(zhàn)了我們對(duì)網(wǎng)絡(luò)上的可能性的理解。通過動(dòng)畫和視頻的創(chuàng)意融合,該網(wǎng)站讓用戶沉浸在非常吸引人的體驗(yàn)中。作為一個(gè)非典型的網(wǎng)站,它還包含幾個(gè)獨(dú)特的可用性元素,其中包括一個(gè)導(dǎo)航,可以作為滾動(dòng)進(jìn)度條加倍。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

2. crypton.trading

獎(jiǎng)項(xiàng):Awwwards當(dāng)日的場(chǎng)地(4/3/2018)

認(rèn)識(shí)你的機(jī)器人會(huì)計(jì)師crypton.trading。

Crypton.trading是比特幣等加密貨幣的交易中心,它使用人工智能來預(yù)測(cè)貨幣價(jià)值的變化并確定關(guān)鍵的購買和銷售機(jī)會(huì)。該網(wǎng)站因其開發(fā)和設(shè)計(jì)而被評(píng)為高,因?yàn)樗饾u向更多的下游游客滾動(dòng),更多地解釋了開發(fā)者的方法。

這個(gè)屢獲殊榮的網(wǎng)站讓熟悉技術(shù)的訪問者在主頁上出現(xiàn)Crypt的問候時(shí)感到賓至如歸,每次只有一封信。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

3. ETQ

獎(jiǎng)勵(lì):Awwwards當(dāng)日的場(chǎng)地(5/19/2015)

ETQ采用非常簡(jiǎn)約的電子商務(wù)方式,在精簡(jiǎn)的網(wǎng)站上放置大量引人注目的產(chǎn)品視頻。簡(jiǎn)單,平坦,基于顏色的背景伴隨著強(qiáng)大的印刷術(shù),有助于將注意力集中在用戶到達(dá)的地方:鞋子。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

4. Mikiya Kobayashi

獎(jiǎng)勵(lì):Awwwards當(dāng)日的場(chǎng)地(7/4/2015)

Mikiya是一位產(chǎn)品設(shè)計(jì)師,擁有簡(jiǎn)約的作品集,通過強(qiáng)大的攝影和微妙的動(dòng)畫展示了他的作品。他的全部網(wǎng)站最初是用日文創(chuàng)作的,然后翻譯成英文,這有助于展示他設(shè)計(jì)的國際可擴(kuò)展性。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

5. Inside Abbey Road

獎(jiǎng)項(xiàng):最佳音樂網(wǎng)站,2016年威比獎(jiǎng)

谷歌通過這個(gè)高度互動(dòng)的網(wǎng)站將它從公園打出來,讓用戶可以進(jìn)入Abbey Road Studios。輝煌的聲音設(shè)計(jì),導(dǎo)航機(jī)制以及混合了通常的“Google風(fēng)格”的視覺效果都有助于吸引訪問者訪問這個(gè)制作精良的網(wǎng)絡(luò)媒體資源。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

6. Citrix: The New Mobile Workforce

獎(jiǎng):每日網(wǎng)站(11/23/2017),最佳網(wǎng)站圖庫

這個(gè)網(wǎng)站致力于紅牛與基于云計(jì)算軟件公司思杰的合作,這是非常了不起的。

新移動(dòng)員工隊(duì)是思杰旗下的一個(gè)網(wǎng)站,它使用全景攝影技術(shù)向觀眾展示思杰如何支持紅牛車隊(duì)的新賽車。即使你不是賽車愛好者,該網(wǎng)站的巧妙動(dòng)畫也可以解釋復(fù)雜的汽車技術(shù),這一點(diǎn)很難忽略。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

7. The History of Climate Change

獎(jiǎng)勵(lì):Awwwards當(dāng)日網(wǎng)站(6/23/2015)

按照Luc Jacquet的腳步,Wild-Touch將帶您參觀關(guān)于全球氣候變化歷史的視覺和教育之旅。歷史媒體和獨(dú)特動(dòng)畫的混合有助于講述故事。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

8. Beagle

獎(jiǎng):每日網(wǎng)站(4/19/2015),最佳網(wǎng)站圖庫

比格爾以一種簡(jiǎn)單易懂的方式在視覺上和逐步地講述他們產(chǎn)品的故事方面做得非常出色。這對(duì)許多創(chuàng)業(yè)公司來說是一個(gè)重大挑戰(zhàn),特別是當(dāng)他們將新概念引入現(xiàn)有市場(chǎng)時(shí)。人們想知道,“你的產(chǎn)品是什么?它是如何工作的?為什么我在乎?” 比格爾回答所有這些問題,同時(shí)展示他們的產(chǎn)品并強(qiáng)制用戶購買。另外,他們是實(shí)際上正確實(shí)施“滾動(dòng)劫持”的幾個(gè)網(wǎng)站之一。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

9. Southwest: Heart of Travel

獎(jiǎng):最佳視覺設(shè)計(jì) - 審美,2018年威比獎(jiǎng)

當(dāng)西南航空想要證明其客戶不僅僅是一個(gè)美元符號(hào)時(shí),該公司創(chuàng)建了一個(gè)網(wǎng)站,其設(shè)計(jì)使用客戶航線的形狀進(jìn)行組裝。

這個(gè)名為“旅行之心 ”的網(wǎng)站甚至允許游客在他們計(jì)劃參加的旅行中創(chuàng)建自己的作品。這樣,西南航空的網(wǎng)站就是他們最忠誠的乘客的產(chǎn)品。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

10. Woven Magazine

獎(jiǎng):每日網(wǎng)站(4/4/2015),最佳網(wǎng)站圖庫

Woven是一個(gè)在線刊物,為藝術(shù)家,工匠和制作人員提供贊美。對(duì)我而言,他們代表了一種確認(rèn),即出版物可以(也應(yīng)該)擁有美觀且引人入勝的網(wǎng)站,內(nèi)容易于閱讀。這個(gè)網(wǎng)站沒有像彈出窗口和突兀的廣告這樣的分心,而是關(guān)于內(nèi)容本身的體驗(yàn)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

11. JOHO's Bean

獎(jiǎng)勵(lì):當(dāng)日FWA(2015年8月8日),網(wǎng)站獎(jiǎng)

JOHO's Bean的網(wǎng)站有令人難以置信的圖像,交互性,講故事,視覺設(shè)計(jì),最重要的是音響工程。這些都聚集在一起,創(chuàng)造出一個(gè)引人入勝,情緒化和引人入勝的網(wǎng)站,講述咖啡豆之旅的故事。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

12. NOWNESS

獎(jiǎng)項(xiàng):最佳文化博客/網(wǎng)站,2017年威比獎(jiǎng)

Nowness可能是當(dāng)今互聯(lián)網(wǎng)上最酷的眾包視頻博客。那真是一口......所有這些意味著什么?

NOWNESS的“眾包”性質(zhì)是其獲獎(jiǎng)?wù)叩囊徊糠?。這意味著其大部分內(nèi)容來自獨(dú)立廣告素材 - 這是企業(yè)發(fā)布內(nèi)容的一種日益流行的方式。NOWNESS也是一個(gè)視頻博客,這意味著它的所有博客內(nèi)容都是視頻格式??傊@些品質(zhì)有助于使Nowness成為各個(gè)品牌努力講述的故事的迷人中心。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

13. Virgin America

獎(jiǎng)項(xiàng):最重要的行業(yè)演變,2014 UX獎(jiǎng)

在一個(gè)已知航空網(wǎng)站充斥著主要可用性問題的世界中,維珍美國公司擁有推動(dòng)可用性,可訪問性和快速響應(yīng)設(shè)計(jì)的最佳網(wǎng)站之一。事實(shí)上,它被命名為第一個(gè)真正快速響應(yīng)的航空公司網(wǎng)站,這是該行業(yè)的一個(gè)新的先例。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

14. World of SWISS

獎(jiǎng)項(xiàng):最佳用戶界面,2015年威比獎(jiǎng)

另一家航空公司?發(fā)生什么事?!是的,瑞航的航空公司建立了一個(gè)令人難以置信的身臨其境的網(wǎng)站,講述他們的故事,并描述與他們一起飛行的感覺 - 而且他們的工作太過繁重,無人理睬。強(qiáng)大的視覺效果和動(dòng)畫將用戶介紹到網(wǎng)站的不同部分,這些部分除了通常的銷售和市場(chǎng)營銷信息外,還包含了今天如此常見的信息。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

15. Reductress

獎(jiǎng)項(xiàng):最佳幽默網(wǎng)站,2018年威比獎(jiǎng)

在互聯(lián)網(wǎng)上嘲笑別人并不難,我們?cè)诰W(wǎng)上閱讀和消費(fèi)的東西很多都是為了娛樂。但是對(duì)于大量觀眾來說,很難一致地做到這一點(diǎn)。Reductress是一本諷刺雜志,其頭條和一般閱讀體驗(yàn)是幽默部門的 - 使網(wǎng)站本身成為一個(gè)高質(zhì)量的財(cái)產(chǎn)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

其他酷網(wǎng)站設(shè)計(jì)

16. Minimums

Minimums采用非常大膽的方式展示他們的內(nèi)容,利用基于網(wǎng)格的網(wǎng)站設(shè)計(jì),大字體和全幅高質(zhì)量圖像。他們的網(wǎng)站是如何正確執(zhí)行網(wǎng)格結(jié)構(gòu),同時(shí)在設(shè)計(jì)中保持良好的視覺層次結(jié)構(gòu)的一個(gè)非常好的例子。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

17. Guillaume Tomasi

作為蒙特利爾的攝影師,Guillaume Tomasi建立了一個(gè)真正適合他的獨(dú)特而令人敬畏的攝影作品。他超現(xiàn)實(shí)的照片風(fēng)格與簡(jiǎn)單,平坦,空洞,簡(jiǎn)約的組合設(shè)計(jì)并列,將所有的焦點(diǎn)放在作品本身上。

他獨(dú)特的系列導(dǎo)航加上藝術(shù)畫廊風(fēng)格的作品介紹和完美的滾動(dòng)互動(dòng)讓人聯(lián)想到真實(shí)畫廊的體驗(yàn)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

18. The District

這家品牌代理機(jī)構(gòu)認(rèn)真對(duì)待它的形象,它應(yīng)該 - 為客戶處理所有媒體渠道。該地區(qū)的網(wǎng)站,是通過一些你見過的最美麗的藝術(shù)品和攝影的旅程。

當(dāng)你探索網(wǎng)站時(shí),這些挑釁性的瓷磚變化很快,而且他們看起來更加奇特,對(duì)你學(xué)習(xí)過去的工作越感興趣。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

19. Tej Chauhan

Tej Chauhan通過這個(gè)有趣的網(wǎng)站將印象派藝術(shù)品變成了商業(yè)模式。該產(chǎn)品開發(fā)人員主頁上的每張圖片都會(huì)滑出以覆蓋上一張圖片,從而為您現(xiàn)在在您面前看到的物體提供很少的背景信息。

但是,是不是缺乏正確的背景知識(shí),讓你想了解更多?標(biāo)語“近期未來的紀(jì)念品”表明這些物品是他們產(chǎn)品線的一部分 - 這是您將這些創(chuàng)新物品帶入您的生活的機(jī)會(huì)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

20. Amanda Martocchio Architecture

一家建筑公司可能并不專注于網(wǎng)站開發(fā),但其網(wǎng)站仍應(yīng)展示其對(duì)視覺上令人愉悅的設(shè)計(jì)的承諾。這個(gè)華麗的網(wǎng)站讓阿曼達(dá)·馬托基奧把它放在心上。

Amanda Martocchio Architecture喜歡它的作品并不是什么秘密- 它網(wǎng)站主頁上的每張圖片都是公司設(shè)計(jì)的房屋的迷人鏡頭。該網(wǎng)站標(biāo)出了每個(gè)房屋的滾動(dòng)條件,以及各種建筑物的各種角度。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

Dribbble 界面設(shè)計(jì)靈感 33

博博


UI設(shè)計(jì)愛好者 2018-05-03 16:58:07

作者:設(shè)計(jì)達(dá)人(ID:shejidaren888)

這次 Dribbble UI 靈感主要精選網(wǎng)頁、APP 以及一些后臺(tái)管理界面,每個(gè)精選出來的界面設(shè)計(jì)的贊數(shù)都是幾百+或者幾 K ~

PS:當(dāng)你看中某作品時(shí),你可以點(diǎn)擊作者名稱來查看該設(shè)計(jì)師更多作品。(微信公眾號(hào)不支持外鏈,只能點(diǎn)「閱讀原文」來查看所有鏈接)

Dribbble 界面設(shè)計(jì)靈感 #33

Dribbble 界面設(shè)計(jì)靈感 33

個(gè)人主頁設(shè)計(jì) by Mike

Dribbble 界面設(shè)計(jì)靈感 33

CRM 管理系統(tǒng)界面設(shè)計(jì) by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

EverDo 應(yīng)用界面 by Jakub Reis

Dribbble 界面設(shè)計(jì)靈感 33

接上,EverDo 界面的一些表單元素 by Balkan Brothers

Dribbble 界面設(shè)計(jì)靈感 33

隨機(jī)實(shí)驗(yàn) by Nick Franchi

Dribbble 界面設(shè)計(jì)靈感 33

Coindesk by uixNinja

Dribbble 界面設(shè)計(jì)靈感 33

一套 UI 素材:Planguru by Patryk Pustol

Dribbble 界面設(shè)計(jì)靈感 33

酒店 APP 后臺(tái)(iPhoneX) by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

B3Sound 網(wǎng)站著陸頁設(shè)計(jì) by Outcrowd

Dribbble 界面設(shè)計(jì)靈感 33

Smart Security Camera App by Ionut Zamfir

Dribbble 界面設(shè)計(jì)靈感 33

Iterable 插畫草圖 by Ramotion

Dribbble 界面設(shè)計(jì)靈感 33

后臺(tái)界面 by uixNinja

Dribbble 界面設(shè)計(jì)靈感 33

Dating 應(yīng)用項(xiàng)目 by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

Benti by Jakub Dziedzic ??

Dribbble 界面設(shè)計(jì)靈感 33

Surf Guide Mobile Swipe Distort by Nathan Riley

Dribbble 界面設(shè)計(jì)靈感 33

C / Sen Design Lab by Mike | Creative Mints

Dribbble 界面設(shè)計(jì)靈感 33

Chripcase 后臺(tái)界面 by Goutham

Dribbble 界面設(shè)計(jì)靈感 33

Raika Plant by Nicola Baldo

Dribbble 界面設(shè)計(jì)靈感 33

網(wǎng)頁聊天應(yīng)用界面 by Michal Parulski

Dribbble 界面設(shè)計(jì)靈感 33

網(wǎng)頁版的音樂 UI by Giga Tamarashvili

Dribbble 界面設(shè)計(jì)靈感 33

Music UI by Giga Tamarashvili

Dribbble 界面設(shè)計(jì)靈感 33

Blockсhain revolution by Dmitrii Kharchenko

Dribbble 界面設(shè)計(jì)靈感 33

USB Types by Gal Shir

Dribbble 界面設(shè)計(jì)靈感 33


23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

博博


UI設(shè)計(jì)愛好者 2018-05-07 11:31:09

在2013年的時(shí)候使用全屏背景或者大圖片的網(wǎng)頁開始流行起來,到了今年,還是經(jīng)??吹竭@類風(fēng)格的頁面出現(xiàn),可見這個(gè)趨勢(shì)還是很流行的,值得運(yùn)用。

一張大圖再配合一個(gè)優(yōu)秀的排版布局,這樣一個(gè)美麗的頁面就形成了,比起視差網(wǎng)頁、動(dòng)效網(wǎng)頁成本低了很多,但視覺效果還是能令人滿意的,下面精選一些優(yōu)秀的大背景網(wǎng)頁設(shè)計(jì)作品給你欣賞,也行會(huì)給你帶來更多靈感哦!

這于高清圖片素材建議大家去設(shè)計(jì)導(dǎo)航里面的免費(fèi)圖片素材上查找。

Nike – Ge? Kendini

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Edwin Europe

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Esprit Cox

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Feed

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Truth Labs Portfolio

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Natural Food & Beverages

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

La Plus GRANDE Cave à Bière Du Monde

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Ice And Sky : The History Of Climate Change

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Fivefootsix

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

For Better Coffee

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Brdr. Krüger

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

The Boat

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Beagle – Better Proposals

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Webdesign Agency Weblounge

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Words Can Save

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Well Storied

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Fabrica

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Alexander Engzell Portfolio

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Cartelle Amsterdam

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Printemps Du Polar

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

Ashworth GOLF/MAN

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

HBM FiberSensing

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

查看網(wǎng)頁

The | Marmalade

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

日歷

鏈接

個(gè)人資料

存檔