首頁(yè)

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

博博


聽(tīng)云 2016-04-18 10:49:28

早在1995年,尼爾森的十大可用性原則就已問(wèn)世,雖然當(dāng)時(shí)針對(duì)的是web交互設(shè)計(jì),但易用性對(duì)任何擁有用戶界面的東西來(lái)說(shuō)都適用。不管是網(wǎng)站,程序,移動(dòng)頁(yè)面或其他,具體的規(guī)則可能不同,但總的原則都源自人類(lèi)上萬(wàn)年進(jìn)化所形成的思維方式。

1、可見(jiàn)性原則

用戶在網(wǎng)頁(yè)上的任何操作,不論是單擊、滾動(dòng)還是按下鍵盤(pán),頁(yè)面應(yīng)即時(shí)給出反饋?!凹磿r(shí)”是指頁(yè)面響應(yīng)時(shí)間小于用戶能忍受的等待時(shí)間。保證頁(yè)面內(nèi)容的可見(jiàn)性、狀態(tài)的可見(jiàn)性、狀態(tài)變化的可見(jiàn)性。

在用戶與應(yīng)用的交互過(guò)程中,系統(tǒng)需要即時(shí)的給予用戶反饋。如果用戶在操作過(guò)程中,頁(yè)面出現(xiàn)一片空白,不清楚應(yīng)用是否給予了用戶反饋,這時(shí)候用戶就會(huì)感到焦慮、恐慌,這些都是不符合可見(jiàn)原則的。看起來(lái)非?;A(chǔ)的要求,其實(shí)很多產(chǎn)品都做不到或者沒(méi)做好。

有一部分App,在弱網(wǎng)情況下信息未加載完成時(shí),顯示空白頁(yè),無(wú)法給用戶任何信息。

現(xiàn)在來(lái)看一款可見(jiàn)性做的比較好的App

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

如上圖,關(guān)掉WIFI在2.5G的網(wǎng)絡(luò)情況下首次進(jìn)入這個(gè)App,主頁(yè)面內(nèi)容雖然遲遲加載不出內(nèi)容,但是有一個(gè)提示能夠告訴用戶,當(dāng)前正在做什么,是怎樣的進(jìn)度。并且“內(nèi)容煉成中”這句有二次元味道的提示,使App的整體感非常好,而且圖片一定程度上分散了注意力,使用戶對(duì)加載的時(shí)間不那么的敏感,為弱網(wǎng)環(huán)境下內(nèi)容的加載爭(zhēng)取了時(shí)間。

2、場(chǎng)景貼切原則

網(wǎng)頁(yè)的一切表現(xiàn)和表述,應(yīng)該盡可能貼近用戶所在的環(huán)境(年齡、學(xué)歷、文化、時(shí)代背景)。此外,還應(yīng)該使用易懂和約定俗成的表達(dá)。

在做產(chǎn)品設(shè)計(jì)的時(shí)候,主要考慮到的是用戶使用場(chǎng)景。產(chǎn)品的功能要貼近目標(biāo)用戶的真實(shí)使用環(huán)境,這一點(diǎn)非常重要。用兩款導(dǎo)航類(lèi)產(chǎn)品舉例:

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

還原一下導(dǎo)航時(shí)部分使用場(chǎng)景,比如在一個(gè)陌生的城市開(kāi)車(chē),需要使用導(dǎo)航,輸入目的地,大部分的情況下手機(jī)不是手持狀態(tài),觀察的模式也是以眼睛掃描為主。

在這個(gè)頁(yè)面上的設(shè)計(jì),大部分的信息對(duì)我第一訴求導(dǎo)航并沒(méi)有直接的幫助,如果要輸入一個(gè)目的地,需要用尋找的方式去使用它。輸入框非常窄,不好找到,使用場(chǎng)景下導(dǎo)航并不貼切。

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

相比之下看到錘子駕駛的界面,作為一款導(dǎo)航類(lèi)的應(yīng)用,它教科書(shū)式的講解了什么是場(chǎng)景貼切原則。在開(kāi)車(chē)的時(shí)候只要用眼睛掃一下手機(jī)屏幕就可以知道要導(dǎo)航的功能位置,并且可點(diǎn)擊區(qū)域巨大,非常容易選中。

選中導(dǎo)航后優(yōu)先用語(yǔ)音搜索目的地,這樣可以減少對(duì)駕駛的影響。下方巨大的List也讓用戶比較容易的去點(diǎn)擊最近去過(guò)的地方。這樣就非常符合用戶在駕駛中,或者說(shuō)非手持狀態(tài)的使用習(xí)慣。

3、可控原則

為了避免用戶的誤用和誤擊,網(wǎng)頁(yè)應(yīng)提供撤銷(xiāo)和重做功能。用戶對(duì)當(dāng)前的狀況很好地控制了解和掌控,并且有足夠的自由。

掌握、可控、自由是人類(lèi)安全感的重要來(lái)源,如果使用一款產(chǎn)品的時(shí)候提心吊膽的,生怕點(diǎn)擊了某個(gè)按鈕就發(fā)生了錯(cuò)誤,很難相信這樣的一款A(yù)pp有好的用戶體驗(yàn)。有一個(gè)用戶交互的金句:操作前可預(yù)知、操作中可有反饋、操作后可撤銷(xiāo)。

像iPhone 的出現(xiàn),為可控原則做了最好的注解,Home鍵也是教科書(shū)式的可控原則的體現(xiàn)。無(wú)論你在哪里,遇到了什么問(wèn)題,一鍵回到桌面,一切重新開(kāi)始。

4、一致性原則:

同一用語(yǔ)、功能、操作保持一致。用戶需要在同一個(gè)產(chǎn)品中,接受同一套規(guī)范、邏輯。

這樣做的一個(gè)好處是可以讓用戶對(duì)App有一個(gè)整體的感知,在相同的背景下做相同的操作會(huì)有可預(yù)期的結(jié)果,這樣大大的降低了用戶的學(xué)習(xí)成本。如下圖這個(gè)出行類(lèi)App,點(diǎn)擊了旅行休閑,結(jié)果跳轉(zhuǎn)了一個(gè)莫名其妙的頁(yè)面。內(nèi)容與旅行沒(méi)有關(guān)系,違背了一致性。

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

5、放錯(cuò)原則

通過(guò)網(wǎng)頁(yè)的設(shè)計(jì)、重組或特別提醒或安排,防止用戶出錯(cuò)。

這方面很多成熟的實(shí)體產(chǎn)品都比較好。App中這種防錯(cuò)設(shè)計(jì)隨處可見(jiàn),比如訂票軟件,已經(jīng)過(guò)去的日期顯示為灰色,以防訂錯(cuò)機(jī)票的錯(cuò)誤。

6、協(xié)助用戶記憶原則

在需要記憶某些信息時(shí),產(chǎn)品功能上要幫助用戶記憶。盡可能減少用戶回憶負(fù)擔(dān),把需要記憶的內(nèi)容擺上臺(tái)面。

7、靈活的原則

中級(jí)用戶的數(shù)量遠(yuǎn)高于初級(jí)和高級(jí)用戶數(shù)。為大多數(shù)用戶設(shè)計(jì),不要低估,也不可輕視,保持靈活。

移動(dòng)端的用戶大多數(shù)不是專(zhuān)家級(jí)用戶,也不是小白用戶。對(duì)頁(yè)面的設(shè)計(jì)要更側(cè)重于滿足對(duì)大多數(shù)用戶的需求,不宜復(fù)雜,也不宜過(guò)于簡(jiǎn)單無(wú)提示。

8、易掃原則

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁(yè)的動(dòng)作不是讀,不是看,而是掃。易掃,意味著突出重點(diǎn),弱化和剔除無(wú)關(guān)信息。

在時(shí)候用一款陌生產(chǎn)品的時(shí)候,用戶絕大多數(shù)是使用掃描的方式而不是閱讀的方式來(lái)理解內(nèi)容。如果想讓用戶快速發(fā)現(xiàn)想要的信息,就一定要保證頁(yè)面足夠清晰,簡(jiǎn)約。如果有較多的信息需要展示,那么一定要分清主次,要求界面足夠簡(jiǎn)單,突出重點(diǎn),內(nèi)容易讀。

9、容錯(cuò)性

幫助用戶從錯(cuò)誤中恢復(fù),將損失降到。如果無(wú)法自動(dòng)挽回,則提供詳盡的說(shuō)明文字和指導(dǎo)方向,而非代碼,比如404。

例如各類(lèi)應(yīng)用中要恢復(fù)出廠設(shè)置,是一個(gè)比較重大的操作

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

所以在恢復(fù)出場(chǎng)設(shè)置前需要輸入解鎖圖案。這就是容錯(cuò)性的一個(gè)體現(xiàn)。對(duì)于用戶正在進(jìn)行的操作有著明顯的提示,避免了誤按誤點(diǎn)操作造成的損失。

10、人性化幫助原則

幫助性提示最好的方式是:1、無(wú)需提示2、一次性提示3、常駐提示4、幫助文檔。

一個(gè)系統(tǒng)或者是產(chǎn)品,如果不需要文檔或是提示是最好的,一切都是自然而然發(fā)生的。但是在很多情況下,需要對(duì)內(nèi)容做一個(gè)提示或者幫助,來(lái)便于用戶更好的使用App。

幫助和提示在哪里用的比較多呢?設(shè)置。在設(shè)置頁(yè)面里,可以看到無(wú)線網(wǎng)絡(luò)、定位服務(wù)等是否打開(kāi),而中間遇到比較復(fù)雜的操作,用戶對(duì)此一知半解,這時(shí)候就需要有相關(guān)的幫助提示。

現(xiàn)在幾乎所有的移動(dòng)端交互設(shè)計(jì)全部基于用戶體驗(yàn),而在定位準(zhǔn)、細(xì)分市場(chǎng)準(zhǔn),遵守了尼爾森十大原則的情況下,還有一些問(wèn)題是每個(gè)產(chǎn)品研發(fā)團(tuán)隊(duì)不能避免且無(wú)法解決的。

在每個(gè)產(chǎn)品的不同生命周期中,側(cè)重點(diǎn)也會(huì)不同。初期注重種子用戶的培養(yǎng)與新功能的增加。到了成長(zhǎng)期會(huì)經(jīng)歷版本的頻繁發(fā)布,系統(tǒng)不夠穩(wěn)定。這時(shí)候就需要用到更加專(zhuān)業(yè)的第三方工具去幫助應(yīng)用發(fā)布后的性能問(wèn)題進(jìn)行管理。

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

在產(chǎn)品真正上線后可以及時(shí)進(jìn)行崩潰分析、網(wǎng)絡(luò)請(qǐng)求與錯(cuò)誤分析,交互分析等等通過(guò)App的總體性能評(píng)分與在同行業(yè)競(jìng)爭(zhēng)中所處的位置來(lái)不斷迭代產(chǎn)品,改進(jìn)用戶體驗(yàn)。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

博博


企服盒 2018-04-08 10:52:48

本篇講述的是feedback反饋類(lèi);反饋就是用戶做了某項(xiàng)操作之后,系統(tǒng)給用戶的一個(gè)響應(yīng)。這個(gè)響應(yīng)根據(jù)場(chǎng)景的不同會(huì)有不同的響應(yīng)形式和不同作用。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

設(shè)計(jì)規(guī)范中最重要的部分就是組件規(guī)范了,制定組件的規(guī)范有哪些好處呢?

  1. 簡(jiǎn)單:熟悉了解組件的用法之后,在做界面設(shè)計(jì)時(shí),只需要合理運(yùn)用組件就可以快速搭建web端界面,無(wú)差錯(cuò)。由于有成套的組件規(guī)范,所以在交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)過(guò)程中無(wú)需每次都重復(fù)勞動(dòng)。

  2. 統(tǒng)一用戶體驗(yàn):由于使用了統(tǒng)一的組件規(guī)范,所以保證了的視覺(jué)和交互設(shè)計(jì)統(tǒng)一性,保證整體的用戶體驗(yàn)性。

  3. 提升設(shè)計(jì)綜合能力:由于減少了做組件重復(fù)性勞動(dòng),交互設(shè)計(jì)師/PM 可以將更多時(shí)間和精力放在討論業(yè)務(wù)、設(shè)計(jì)方法、設(shè)計(jì)思維、定義產(chǎn)品等綜合能力方面。從而驅(qū)動(dòng)業(yè)務(wù)創(chuàng)新。

根據(jù)組件的用途,可以分為六大類(lèi):Feedback 反饋、from 表單、basic 基礎(chǔ)、data 數(shù)據(jù) 、navigation 導(dǎo)航、other 其他。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

本篇講述的是feedback反饋類(lèi);反饋就是用戶做了某項(xiàng)操作之后,系統(tǒng)給用戶的一個(gè)響應(yīng)。這個(gè)響應(yīng)根據(jù)場(chǎng)景的不同會(huì)有不同的響應(yīng)形式和不同作用。

toast

定義:用戶產(chǎn)生操作,出現(xiàn)toast提示,一般2-3s消失;通過(guò)toast中的提示語(yǔ)告知用戶需要了解的信息。讓用戶的行為在使用過(guò)程中得到反饋和幫助。

使用場(chǎng)景:

  1. 可提供成功、警告或錯(cuò)誤等反饋信息。

  2. 頂部居中顯示并自動(dòng)消失,是一種不打斷用戶操作的輕量級(jí)提示方式。

例如簡(jiǎn)書(shū)在沒(méi)有上傳專(zhuān)題封面時(shí)就點(diǎn)擊創(chuàng)建專(zhuān)題按鈕,出現(xiàn)toast提示,提示用戶要先上傳專(zhuān)題封面才能創(chuàng)建專(zhuān)題。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

toast的消息提示分類(lèi)一共有三種類(lèi)型:成功類(lèi)、失敗類(lèi)、常規(guī)類(lèi)。

組件樣式有兩種:可以點(diǎn)擊操作使其消失、不可點(diǎn)擊操作使其消失。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

alert 警示提示

定義:當(dāng)用戶進(jìn)行某種操作時(shí),網(wǎng)站會(huì)出現(xiàn)對(duì)應(yīng)的警告信息提示用戶,該提示信息的狀態(tài)不會(huì)主動(dòng)消失。

使用場(chǎng)景:

  1. 當(dāng)某個(gè)頁(yè)面需要向用戶顯示警告的信息時(shí)。

  2. 非浮層的靜態(tài)展現(xiàn)形式,始終展現(xiàn),不會(huì)自動(dòng)消失,有的組件用戶可以點(diǎn)擊關(guān)閉。

例如淘寶購(gòu)物車(chē),刪除之后,會(huì)出現(xiàn)alert警示提示,淘寶的例子屬于alert的變種,用戶可以點(diǎn)擊“撤銷(xiāo)本次刪除 ”進(jìn)行還原之前的毀滅性操作。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

alert警示提示的消息分類(lèi)一共有三種類(lèi)型:成功類(lèi)、失敗類(lèi)、常規(guī)類(lèi)。當(dāng)然也可以不含有icon操作,含有icon操作的話警示性會(huì)更強(qiáng)。

alert警示組件樣式有兩種:帶有刪除操作,不帶有刪除操作。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

dialog對(duì)話框

定義:用于提示用戶當(dāng)前操作,或是完成某個(gè)任務(wù)時(shí)需要的一些其他額外的信息。對(duì)話框可以用確定/取消的簡(jiǎn)單的應(yīng)答模式,也可以是自定義復(fù)雜的模式,例如表單的填寫(xiě)。

使用場(chǎng)景:

  1. 用戶在進(jìn)行重要操作的時(shí),需要進(jìn)行二次確認(rèn)。

  2. 用于重要的反饋提示,讓用戶知道信息提示。

  3. 承載少量的表單填寫(xiě)類(lèi),減少頁(yè)面的跳轉(zhuǎn)。

windows系統(tǒng)的確定按鈕一般在左邊,而Mac OS的確定一般在右邊。因?yàn)檫@個(gè)原因,導(dǎo)致我們平時(shí)看到的確定有時(shí)候在左邊,有時(shí)候在右邊。

微博和微信公眾號(hào)后臺(tái)的的對(duì)話框,確定在左邊,而淘寶的對(duì)話框在右邊。微信公眾號(hào)的對(duì)話框是小浮層彈窗,避免了遮罩出現(xiàn),同時(shí)對(duì)話框也出現(xiàn)在操作按鈕的附近,對(duì)用戶的干擾性也是最弱的。

dialog對(duì)話框,有三種常見(jiàn)的使用場(chǎng)景。其中表單對(duì)話框、提示類(lèi)、輕量級(jí)提示類(lèi)、表單類(lèi)樣式都是基于二次確認(rèn)類(lèi)對(duì)話框樣式的改變而得到不同的樣式。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

Notification通知提醒框

定義:懸浮出現(xiàn)在網(wǎng)頁(yè)右上角,用于全局的提醒式通知。常見(jiàn)于服務(wù)器異常、操作失敗等

使用場(chǎng)景:

  1. 較為復(fù)雜的通知內(nèi)容。

  2. 帶有交互的通知,給出用戶下一步的行動(dòng)點(diǎn)。

  3. 系統(tǒng)主動(dòng)推送。

Notification通知提醒框出現(xiàn)在網(wǎng)頁(yè)右上角,一般4-5s消失,也可以點(diǎn)擊叉號(hào)進(jìn)行關(guān)閉。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

tooltip 文字提示

定義:簡(jiǎn)單輕量的的文字提示。

使用場(chǎng)景:

  1. 鼠標(biāo)移入則立即顯示提示,移出則立即消失,不承載復(fù)雜文本和操作。

  2. 常用于解釋操作按鈕的文字說(shuō)明。

還有一種tooltip是瀏覽器自帶的,瀏覽器自帶的和本篇的tooltip的區(qū)別是:瀏覽器自帶的鼠標(biāo)移入一般2s才顯示,多用于折行打點(diǎn)的文字提示。例如簡(jiǎn)書(shū),而本篇的tooltip鼠標(biāo)移入就出現(xiàn),切組件風(fēng)格和瀏覽器自帶完全不一樣。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

tooltip組件按照需要解釋說(shuō)明的對(duì)象位置不同,可以有以下不同的樣式。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)


UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

博博


設(shè)計(jì)師檸檬 2018-04-26 15:22:57

寫(xiě)在前面的話:文章內(nèi)容源于網(wǎng)絡(luò),由檸檬整理發(fā)布,如有侵權(quán)請(qǐng)聯(lián)系設(shè)計(jì)師檸檬刪除

都說(shuō)UI設(shè)計(jì)是用戶看到產(chǎn)品的第一個(gè)門(mén),從進(jìn)入手機(jī)應(yīng)用商店到下載界面再到產(chǎn)品的首頁(yè),設(shè)計(jì)師不考慮一下真的用交互稿和產(chǎn)品直接做么,從圖標(biāo)在應(yīng)用商店的吸引展示力和用戶的軟件留存率,這些哪個(gè)不是和UI設(shè)計(jì)師有關(guān)系?

本文重點(diǎn):1.學(xué)著像產(chǎn)品經(jīng)理的角度思考

2.學(xué)著像交互設(shè)計(jì)師的角度思考

3.學(xué)著在用戶的角度思考

4.學(xué)著在自己的角度思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考


10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

博博

UI妹兒 2018-02-22 11:13:02

我們平時(shí)做設(shè)計(jì)的時(shí)候,都會(huì)遇到挑選素材這個(gè)難題。

做UI的同學(xué),會(huì)瀏覽動(dòng)效網(wǎng)站尋找靈感又或者去挑選適合的圖標(biāo);做平面的同學(xué),特別是電商廣告的同學(xué),就會(huì)下載電商banner,還有高質(zhì)量的圖片;另外還有絕大部分的人都會(huì)在做報(bào)告的時(shí)候,下載漂亮的PPT和Word模版。如果剛好那時(shí)候你在找工作,還需要找精美的簡(jiǎn)歷模版……

但這些素材到底在什么地方找呢,又在什么地方找到高質(zhì)量又免費(fèi)好用的素材呢?

這次,我早已為大家準(zhǔn)備好。下面是我花費(fèi)大量時(shí)間精力整理而成的素材網(wǎng)站,全部都是親身試用后的精選出來(lái)的。希望能幫大家在找素材這條路上節(jié)省更多的時(shí)間,找到更適合自己的那些素材。

懶人福利

如果你覺(jué)得這些網(wǎng)站下載太麻煩

可以直接翻到文末

專(zhuān)門(mén)為大家整理好的

1000G高質(zhì)量精選設(shè)計(jì)素材

免費(fèi)送!

機(jī)會(huì)就一次,錯(cuò)過(guò)可以不用等下年了

因?yàn)榛顒?dòng)就這一次

常用素材

一、免費(fèi)可商用圖片

1、https://pixabay.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

全網(wǎng)共一百多萬(wàn)張免費(fèi)圖片素材,且質(zhì)量非常高,種類(lèi)繁多,適合每一個(gè)行業(yè)使用。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類(lèi)很多,質(zhì)量高

缺點(diǎn):下載需注冊(cè),加載慢

推薦指數(shù):★★★★★ 4.5

2、https://unsplash.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

全世界的優(yōu)秀圖片網(wǎng)站,所以圖片風(fēng)格很豐富,而且大部分質(zhì)量都很高,分分種可以用來(lái)做壁紙!

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):質(zhì)量高且優(yōu)秀,數(shù)量多,風(fēng)格獨(dú)特

缺點(diǎn):加載慢

推薦指數(shù):★★★★ 4

3、https://www.pexels.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

每日會(huì)更新100張高質(zhì)量的照片在首頁(yè)展示,無(wú)論風(fēng)光還是人物,這里應(yīng)有盡有。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類(lèi)多,每日更新,不需注冊(cè)

缺點(diǎn):加載慢

推薦指數(shù):★★★★ 4

4、http://foter.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

網(wǎng)站開(kāi)始會(huì)將素材分為商業(yè)、動(dòng)物和風(fēng)景三大類(lèi),如果你需要尋找其他圖片,可以直接在搜索欄直接搜索關(guān)鍵詞。

這里的圖片給我的感覺(jué)就是有趣,獨(dú)特,有很多圖片都很適合做海報(bào)。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):分類(lèi)明確,質(zhì)量很高

缺點(diǎn):加載超慢,種類(lèi)不多

推薦指數(shù):★★★★ 4

5、https://burst.shopify.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

網(wǎng)站最大好處在于幫你分成非常多的類(lèi)別,盡管數(shù)量比不上其他網(wǎng)站那么多,但這里的圖片風(fēng)格都很統(tǒng)一,很有質(zhì)量,感覺(jué)看上去就很年輕化。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):風(fēng)格獨(dú)特,質(zhì)量高,分類(lèi)明確

缺點(diǎn):數(shù)量不多

推薦指數(shù):★★★★ 4

6、https://negativespace.co

7、http://superfamous.com

8、http://librestock.com

9、http://www.sozai-page.com(日本食物類(lèi)網(wǎng)站)

10、https://www.foodiesfeed.com(美食)

11、https://www.sitebuilderreport.com(一次性搜索31多家免費(fèi)可商用圖片的網(wǎng)站)

二、字體

1、https://fontsup.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

提供大量免費(fèi)的英文字體,質(zhì)量很高,也很有特色,每個(gè)字體還有一個(gè)詳情頁(yè),非常用心

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類(lèi)多,質(zhì)量高,免費(fèi)下載

缺點(diǎn):加載稍慢,廣告有點(diǎn)多

推薦指數(shù):★★★★ 4.5

2、http://www.myfonts.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

網(wǎng)站提供的商業(yè)字體,質(zhì)量很高很漂亮,數(shù)量也很多。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類(lèi)多,質(zhì)量高

缺點(diǎn):付費(fèi)

推薦指數(shù):★★★★ 4

3、http://comicneue.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

免費(fèi)手寫(xiě)可愛(ài)字體下載

優(yōu)點(diǎn):質(zhì)量高,字體可愛(ài)

缺點(diǎn):數(shù)量較少,下載稍麻煩

推薦指數(shù):★★★★ 3.5

4、http://www.zhaozi.cn

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

找字網(wǎng),種類(lèi)豐富,基本上可以找到市面上的所有字體。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類(lèi)很多,方便查閱

缺點(diǎn):使用時(shí)注意商用版權(quán),僅中文字體

推薦指數(shù):★★★★ 4

5、http://www.17ziti.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

綜合性字體下載網(wǎng)站,里面包括英文字體、中文字體,甚至是手機(jī)字體。數(shù)量很多,唯一不足就是沒(méi)有注明版權(quán)范圍,所以商用的時(shí)候要注意。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):覆蓋中英文字體、種類(lèi)多

缺點(diǎn):網(wǎng)站廣告稍多,沒(méi)有注明版權(quán)范圍

推薦指數(shù):★★★★ 4

UI設(shè)計(jì)素材

一、圖標(biāo)類(lèi)

1、http://www.iconfont.cn

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺(tái),內(nèi)含一百多萬(wàn)個(gè)圖標(biāo)!

設(shè)計(jì)師將圖標(biāo)上傳到Iconfont平臺(tái),用戶可以自定義下載多種格式的icon,平臺(tái)也可將圖標(biāo)轉(zhuǎn)換為字體,便于前端工程師自由調(diào)整與調(diào)用。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類(lèi)豐富,質(zhì)量超高,免費(fèi)下載,中文界面,阿里旗下

缺點(diǎn):不能打包下載、需注冊(cè)

推薦指數(shù):★★★★★ 4.5(滿分5星,下同)

2、https://www.flaticon.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

大型圖標(biāo)網(wǎng)站,里面擁有將近50萬(wàn)個(gè)圖標(biāo),一萬(wàn)多個(gè)圖標(biāo)集!種類(lèi)豐富,質(zhì)量超高,且支持在線編輯。

優(yōu)點(diǎn):種類(lèi)豐富,質(zhì)量可靠,免費(fèi)下載

缺點(diǎn):英文搜索,加載稍慢,打包下載需注冊(cè)(科學(xué)上網(wǎng))

推薦指數(shù):★★★★★ 4.5

3、http://fontello.com

覆蓋絕大部分網(wǎng)上可能應(yīng)用到的圖標(biāo),也就是說(shuō)任何你需要的網(wǎng)站類(lèi)圖標(biāo)都可以在這里找到。

優(yōu)點(diǎn):網(wǎng)站圖標(biāo)齊全,質(zhì)量高,免費(fèi)下載

缺點(diǎn):加載稍慢,僅有黑白圖標(biāo)

推薦指數(shù):★★★★ 4

4、https://thenounproject.com

擁有一百多萬(wàn)個(gè)圖標(biāo)的大型圖標(biāo)網(wǎng)站,而且圖標(biāo)都是由全世界各地設(shè)計(jì)師設(shè)計(jì),質(zhì)量非常高!而且里面有很多有趣的圖標(biāo),例如下面鳥(niǎo)籠類(lèi)圖標(biāo)集,非??ㄍ垡粒?

優(yōu)點(diǎn):種類(lèi)豐富,質(zhì)量超高,免費(fèi)下載

缺點(diǎn):英文搜索,加載慢,不能打包下載

推薦指數(shù):★★★★ 4

5、https://icomoon.io

聚合類(lèi)圖標(biāo)網(wǎng)站,里面集合了不同網(wǎng)站的不同圖標(biāo),付費(fèi)免費(fèi)都有,種類(lèi)超多。

優(yōu)點(diǎn):種類(lèi)豐富,質(zhì)量一般,免費(fèi)下載

缺點(diǎn):英文搜索,加載超慢,操作復(fù)雜

推薦指數(shù):★★★★ 3.5

6、https://useiconic.com/open

7、http://dryicons.com/free-icons

8、http://www.iconarchive.com

9、http://www.entypo.com

10、http://glyphicons.com

二、其他

1、UIKIT.ME

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

各種免費(fèi)高質(zhì)量UI資源下載,Sketch、PSD甚至AE素材都有!

這個(gè)網(wǎng)站除了提供高質(zhì)量的素材以外,還提供超人性化的下載方式:(百度云)

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):質(zhì)量高,免費(fèi)下載

缺點(diǎn):種類(lèi)少,部分素材有重復(fù)

推薦指數(shù):★★★★ 4

2、TOSKETCH.COM

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

網(wǎng)站給我的感覺(jué)就是干凈,高大上!里面提供了工具包,網(wǎng)頁(yè),移動(dòng),模型和圖標(biāo)等其他素材,而且這些素材都有一個(gè)特點(diǎn),就是質(zhì)量高且新鮮!所有素材都是上傳的,這個(gè)有點(diǎn)了不起。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):質(zhì)量超高,更新快,中文界面,百度云下載

缺點(diǎn):只提供Sketch資源

推薦指數(shù):★★★★ 4

3、UI8.NET

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

U18是設(shè)計(jì)素材圈的網(wǎng)紅,提供大量漂亮的超高質(zhì)量商業(yè)設(shè)計(jì)素材,但并非免費(fèi),絕大部分都需要付費(fèi)。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):質(zhì)量超高、數(shù)量豐富、界面清爽

缺點(diǎn):付費(fèi)(充值是個(gè)問(wèn)題),加載稍慢,下載稍麻煩

推薦指數(shù):★★★★ 4

4、PRINCIPLEREPO.COM

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

高質(zhì)量Principle原型和動(dòng)效設(shè)計(jì)資源的網(wǎng)站,特別是動(dòng)效,每一個(gè)都非常漂亮,很有參考價(jià)值。

優(yōu)點(diǎn):質(zhì)量高,數(shù)量豐富,免費(fèi)下載

缺點(diǎn):加載很慢,只有動(dòng)效資源

推薦指數(shù):★★★★ 3.5

5、UISHE.CN

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

UI社,網(wǎng)站提供主題包、圖標(biāo)、界面和樣機(jī)素材等素材,屬于綜合性的素材下載網(wǎng)站。因?yàn)閲?guó)內(nèi)的網(wǎng)站,大家不用擔(dān)心加載慢等問(wèn)題啦。

優(yōu)點(diǎn):種類(lèi)很多,質(zhì)量高,下載方便

缺點(diǎn):付費(fèi)

推薦指數(shù):★★★★ 4

6、MOCKUP.ZONE

7、GRAPHBERRY.COM

8、GRAPHICTWISTER.COM

9、SKETCHAPPSOURCES.COM

10、DUNNK.COM

平面設(shè)計(jì)素材

1、千圖網(wǎng)(www.58pic.com)

國(guó)內(nèi)大型素材網(wǎng)站,素材幾乎覆蓋所有類(lèi)目、廣告設(shè)計(jì)、電商設(shè)計(jì)和辦公室素材等。逢節(jié)假日都有提供主題素材提供下載,且質(zhì)量很高!

優(yōu)點(diǎn):種類(lèi)超多、質(zhì)量高、免費(fèi)下載、主題分類(lèi)

缺點(diǎn):非會(huì)員每日有數(shù)量限制

推薦指數(shù):★★★★★ 4.5

2、包圖網(wǎng)(http://ibaotu.com)

包圖網(wǎng),大型素材下載網(wǎng)站。全網(wǎng)站提供原創(chuàng)免費(fèi)可商用的素材下載,種類(lèi)齊全且質(zhì)量超高,每日更新1000張!

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類(lèi)齊全,質(zhì)量超高,免費(fèi)下載,全站正版可商用

缺點(diǎn):非會(huì)員每日有數(shù)量限制

推薦指數(shù):★★★★★ 4.5

3、千庫(kù)網(wǎng)(http://588ku.com/)

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

大型素材網(wǎng)站,可能是國(guó)內(nèi)唯一一家專(zhuān)業(yè)設(shè)計(jì)師提供免摳圖PNG素材,全站2000萬(wàn)+高質(zhì)量素材無(wú)限下載,推薦!

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類(lèi)多,專(zhuān)業(yè)提供免摳PNG源文件

缺點(diǎn):非會(huì)員每日有數(shù)量限制

推薦指數(shù):★★★★ 4.5

另外國(guó)內(nèi)還有付費(fèi)的昵圖網(wǎng)和我圖網(wǎng),免費(fèi)的有站長(zhǎng)素材等等素材網(wǎng)站,數(shù)量很多這里就不一一舉例了。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

博博


人人都是產(chǎn)品經(jīng)理 2016-05-16 10:07:04

來(lái)人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】,BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營(yíng)。

一定有很多朋友在和我思考過(guò)一個(gè)同樣的問(wèn)題:優(yōu)秀的產(chǎn)品是怎樣定義的?周鴻祎給出答案:第一滿足剛需、痛點(diǎn)、高頻,第二要有良好的用戶體驗(yàn)。第一點(diǎn)很好理解,我們今天主要來(lái)聊聊第二點(diǎn)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

參照產(chǎn)品設(shè)計(jì)原則,可避免產(chǎn)品設(shè)計(jì)師走彎路,設(shè)計(jì)出具有良好用戶體驗(yàn)的產(chǎn)品。產(chǎn)品設(shè)計(jì)原則會(huì)隨著社會(huì)的進(jìn)步而更新迭代,以下是我在學(xué)習(xí)和工作中對(duì)產(chǎn)品設(shè)計(jì)原則的思考總結(jié),希望可以給你帶來(lái)參考和啟發(fā)。

一、減少用戶出錯(cuò)

錯(cuò)誤對(duì)話框是最令人討厭的交互方式,也是很多產(chǎn)品中濫用最多的。錯(cuò)誤對(duì)話框一般不會(huì)給用戶指明正確的道路,僅僅在保護(hù)程序不陷入麻煩。而且錯(cuò)誤對(duì)話框打斷了用戶的注意流,愚蠢地停止了進(jìn)度。用戶犯錯(cuò)誤的時(shí)候,不應(yīng)該受到訓(xùn)斥,這個(gè)時(shí)候,他需要的是幫助和正確的引導(dǎo),那么我們要做的就是幫助用戶避免錯(cuò)誤,告訴用戶如何把事情做好。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

二、易學(xué)性

好的應(yīng)用像極了藍(lán)顏知已,能看透你的心,在你需要的時(shí)候或者合適的的時(shí)間,用合適的方式提供暖心的幫助,指引你披荊斬棘,打怪升級(jí)。

幫助界面大概分為兩種,導(dǎo)覽教程和覆蓋式教程。

1、導(dǎo)覽教程是通過(guò)一組有序的圖片介紹應(yīng)用功能,或者指引用戶完成一個(gè)目標(biāo)。

新應(yīng)用或者更新后用戶,為了解決用戶初始問(wèn)題,絕大部分應(yīng)用采用了幫助引導(dǎo)頁(yè)面,然而真的是必要的么?我覺(jué)得未必??赡苡械漠a(chǎn)品經(jīng)理也覺(jué)得沒(méi)必要,但這是種主流,所以還是選擇加上。有的則僅僅為告訴用戶產(chǎn)品是做什么的。其實(shí)用戶可能根本沒(méi)有那么多耐心去閱讀好幾頁(yè)的產(chǎn)品說(shuō)明,就算有耐心看完,也大多記不準(zhǔn)。所以把引導(dǎo)放到使用情景中,在用戶使用到此功能時(shí)展示給用戶,也可把引導(dǎo)收起來(lái),用戶需要幫助時(shí)呼出。微習(xí)慣在引導(dǎo)方面,給用戶驚喜。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、覆蓋式教程是另一種介紹方式,很簡(jiǎn)單的透明薄皮,少許箭頭,少許注釋?zhuān)赋鲫P(guān)鍵重點(diǎn)之處。

此方法不錯(cuò),用戶看起來(lái)明了易學(xué)。免費(fèi)日程極簡(jiǎn)的箭頭和引導(dǎo)告訴用戶功能及使用。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

做好后可以自我檢測(cè)思考,用戶學(xué)習(xí)的成本是不是足夠低了?給用戶的學(xué)習(xí)方式是不是最科學(xué)合理的?還有沒(méi)有什么地方需要修改?還有沒(méi)有更好的方式?用戶學(xué)過(guò)一次后還需不需要重復(fù)學(xué)習(xí)?文案確定通俗易懂?

三、美學(xué)一致性、完整性

應(yīng)用的完整性一致性就是外觀和里面不同模塊之間都有相似的外觀、感覺(jué)和氣質(zhì)。產(chǎn)品的完整性一致性會(huì)讓產(chǎn)品更易學(xué)易用。

1、從應(yīng)用外部看,產(chǎn)品完整性一致性,容易培養(yǎng)用戶圍繞這點(diǎn)形成強(qiáng)烈的品牌意識(shí),傳播產(chǎn)品風(fēng)格就是在傳播品牌,可深入人心。一致不代表僵化,可圍繞產(chǎn)品主線進(jìn)行成長(zhǎng)和演化。

2、從應(yīng)用內(nèi)部看,一致的用詞、風(fēng)格、色調(diào)、圖標(biāo)會(huì)給用戶建立具有凝聚力的視覺(jué)系統(tǒng),帶來(lái)在產(chǎn)品上一致的體驗(yàn)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

四、輸入方式更簡(jiǎn)單

移動(dòng)端產(chǎn)品的使用場(chǎng)景,公車(chē)上,行走中,單手操作等,導(dǎo)致用戶在使用手機(jī)時(shí)受到很多環(huán)境上的干擾,所以注定會(huì)在輸入方式上給用戶造成很多的不便和出錯(cuò),為使用戶減少使用手寫(xiě)或者鍵盤(pán)輸入,減少浪費(fèi)更多的時(shí)間和精力,改變移動(dòng)端的輸入方式就變得尤為關(guān)鍵。

1、減少移動(dòng)端的文字輸入,輸入時(shí)可采用建議或者事件記憶。聰明的應(yīng)用會(huì)根據(jù)用戶之前的行為和信息給用戶提出建議,根據(jù)記憶靈活地為用戶當(dāng)前的行為顯示信息,使得用戶在效率和滿意度方面得到大大的提升。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、為提供用戶完成目標(biāo)的效率,更為了減少用戶出錯(cuò),轉(zhuǎn)變輸入方式,改輸入為選擇或手勢(shì)方式。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

3、使用手機(jī)已有的傳感器輸入。輸入文字搜索關(guān)注二維碼,改變成長(zhǎng)按識(shí)別二維碼,減少輸入麻煩和出錯(cuò)的問(wèn)題。

五、為停止做準(zhǔn)備

當(dāng)人們?nèi)硇牡耐度氲交顒?dòng)場(chǎng)景中,會(huì)對(duì)周?chē)母蓴_視而不見(jiàn),這種狀態(tài)被稱(chēng)為“流”,用戶在這種狀態(tài)下會(huì)有輕松的、溫和的快感,處理任務(wù),完成目標(biāo)也是會(huì)非常的,但是很不幸的是,我們使用的手機(jī),使用移動(dòng)應(yīng)用的場(chǎng)景,就是會(huì)因?yàn)楦鞣N事情而打斷。想象一下,錄下精彩的視頻,發(fā)送時(shí)網(wǎng)絡(luò)卡住了,不響應(yīng)了;發(fā)微博發(fā)到一半手機(jī)停電了;網(wǎng)購(gòu)付款時(shí)老板的電話來(lái)了,這在我們?nèi)粘I钪刑R?jiàn),所以聰明的、體貼的產(chǎn)品,是隨時(shí)為停止做好準(zhǔn)備的。

1、編輯中斷、網(wǎng)絡(luò)中斷時(shí),盡可能地保持之前狀態(tài),并存儲(chǔ)好用戶數(shù)據(jù)。我們總的原則就是讓用戶付出的勞動(dòng)不至于付之東流,也減少用戶的重復(fù)操作。例如美拍上傳視頻時(shí)網(wǎng)絡(luò)中斷,可幫用戶存到草稿箱,用戶稍后可重新編輯上傳。

2、誤操作或其他原因跳到錯(cuò)誤頁(yè)時(shí),不要讓用戶無(wú)路可走,最好給用戶下一步的選擇。產(chǎn)品程序無(wú)法使用,那么告訴用戶發(fā)生錯(cuò)誤的原因是什么,給出用戶選擇,他們還能做點(diǎn)什么,并給出解決方法。百度之前有個(gè)很好的體驗(yàn),在找不到頁(yè)面的時(shí)候,展示幫找失聯(lián)兒童的頁(yè)面,頁(yè)面找不到,可以幫忙找找孩子,很人性化的體驗(yàn)。

六、做好反饋

反饋是用產(chǎn)品的語(yǔ)言告訴用戶應(yīng)用正在做什么,進(jìn)展怎么樣了,接下來(lái)的操作會(huì)有什么結(jié)果。我們使用應(yīng)用,就像用戶與應(yīng)用的交談,用戶肯定不希望應(yīng)用是冷冰冰,無(wú)回應(yīng)的。

反饋可以分為過(guò)程反饋和結(jié)果反饋。

1、過(guò)程反饋。用戶在操作過(guò)程中,界面對(duì)操作進(jìn)行反饋,告訴用戶操作的狀態(tài)變化,用戶可根據(jù)反饋對(duì)任務(wù)進(jìn)行下一步選擇操作,一定要做到輕量,不突兀,細(xì)膩地反饋。富視覺(jué)非模態(tài)反饋,是用的比較多的一種反饋方式,通常為動(dòng)態(tài),視覺(jué)上很輕松地顯示反饋,不需要用戶做其他操作。我們看IOS的下載更新,就是這樣。免費(fèi)日程的發(fā)送邀約等待也是一種富視覺(jué)非模態(tài)反饋。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、結(jié)果反饋。用戶在完成操作后,告訴用戶操作結(jié)果,使得產(chǎn)品看起來(lái)很貼心,很有生命力。結(jié)果反饋也避免了用戶因?yàn)椴淮_認(rèn)而造成重新操作。連貫的動(dòng)畫(huà)和聲音都可以為用戶提供反饋。舉個(gè)刪除的例子,例如mac在刪除成功后,會(huì)有收走到垃圾桶的動(dòng)畫(huà),伴隨著粉碎的聲音,這種標(biāo)志性反饋會(huì)給用戶留下獨(dú)特的印象。

七、內(nèi)容為先

《移動(dòng)優(yōu)先》作者Luke,說(shuō)設(shè)計(jì)原則為“內(nèi)容優(yōu)先,之后才是導(dǎo)航”。這句話是什么意思,這是在產(chǎn)品設(shè)計(jì)中一個(gè)經(jīng)常容易犯的錯(cuò)誤。如何讓用戶找到內(nèi)容,所以造成了導(dǎo)航優(yōu)先,而忽略了用戶真正關(guān)心的內(nèi)容。在移動(dòng)設(shè)計(jì)中,可能你的產(chǎn)品界面很美觀,圖標(biāo)很精致,動(dòng)畫(huà)很流暢,設(shè)計(jì)獨(dú)到到令人耳目一新,用戶可能會(huì)對(duì)此充滿新鮮感,但是新鮮感終究有期限,用戶不會(huì)為了這個(gè)而去一直使用你的產(chǎn)品,沒(méi)有內(nèi)容的產(chǎn)品就像一本只有華麗封面卻沒(méi)有內(nèi)容的書(shū),所以用戶內(nèi)容才是最核心的。

1、突出內(nèi)容,使界面內(nèi)容更開(kāi)闊,使用戶完成目標(biāo)更專(zhuān)注。IOS備忘錄中,采用點(diǎn)聚式導(dǎo)航,用戶需要時(shí)才呼出,沒(méi)有無(wú)關(guān)雜亂的內(nèi)容,給界面一種開(kāi)闊的感覺(jué)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、提升屏幕利用率,把焦點(diǎn)放在用戶更注重的內(nèi)容上。對(duì)于手機(jī)來(lái)說(shuō),屏幕資源利用率的提升要做到優(yōu)化提升。知乎是以UGC為主的產(chǎn)品,用戶在上劃瀏覽內(nèi)容時(shí)搜索消失,當(dāng)用戶需要時(shí)向下滑即可顯現(xiàn)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

人人都是產(chǎn)品經(jīng)理也是以UGC為主的產(chǎn)品,正所謂內(nèi)容為王,吧啦吧啦,算了不說(shuō)了,投稿去了。

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

博博


我是你們的學(xué)霸姐 2018-04-20 14:19:23

在學(xué)軟件操作的時(shí)候,要說(shuō)什么最繁瑣?那當(dāng)然是軟件操作的指令了。

學(xué)霸姐姐在網(wǎng)絡(luò)上搜集許久,終于搜集完整了快捷方式的圖解!今天就用圖解的方式幫助大家將快捷方式一網(wǎng)打盡!

UI設(shè)計(jì)需要學(xué)習(xí)的主體軟件:Sketch,PS,AI,AE,每一個(gè)軟件的快捷方式都用圖表總結(jié)的方式送給大家,希望大家喜歡。

這么全的快捷方式,還不快快收藏轉(zhuǎn)發(fā)?

如果有喜歡UI設(shè)計(jì)的同學(xué),可以私信學(xué)霸姐姐:UI設(shè)計(jì),即可領(lǐng)取超過(guò)600G的UI設(shè)計(jì)零基礎(chǔ)高清教學(xué)視頻,學(xué)霸姐姐會(huì)一一回復(fù)的!

快快行動(dòng)起來(lái),將快捷方式轉(zhuǎn)發(fā)給你的同學(xué)朋友們吧!

  1. SKETCH

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

2.PS

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

3.AI

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

4.AE

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

用智能化登錄頁(yè)面提升數(shù)字營(yíng)銷(xiāo)轉(zhuǎn)化率,Instapage獲1500萬(wàn)美元A輪融資

博博


36氪 

今日,登錄頁(yè)面制作初創(chuàng)公司Instapage宣布他們完成了Morgan Stanley Expansion Capital投資的1500萬(wàn)美元的A輪。

Instapage是一家由數(shù)據(jù)分析引擎驅(qū)動(dòng)的,提供個(gè)性化登錄頁(yè)面模板,幫助企業(yè)提高數(shù)字營(yíng)銷(xiāo)轉(zhuǎn)化率的公司。Instapage目前擁有超過(guò)15,000名客戶,平均轉(zhuǎn)化率約為22%。

設(shè)計(jì)登陸頁(yè)面似乎并不是創(chuàng)業(yè)者感興趣的風(fēng)口,但I(xiàn)nstapage創(chuàng)始人兼首席執(zhí)行官Tyson Quick表示,這對(duì)于營(yíng)銷(xiāo)人員來(lái)說(shuō)卻是一個(gè)真正的問(wèn)題。

登陸頁(yè)面(Landing Page)又被稱(chēng)為引導(dǎo)頁(yè),是指在數(shù)字營(yíng)銷(xiāo)中,當(dāng)潛在用戶點(diǎn)擊廣告或者利用搜索引擎搜索后顯示給用戶的網(wǎng)頁(yè)。而在網(wǎng)站運(yùn)營(yíng)的邏輯里,最重要的三個(gè)因素是拉新、轉(zhuǎn)化和留存,那么,作為第一個(gè)關(guān)卡的登錄頁(yè)面就顯得尤為重要。

Quick之前曾在一家名為Jounce的營(yíng)銷(xiāo)產(chǎn)品上工作,他發(fā)現(xiàn),即使有人點(diǎn)擊了Jounce廣告并最終進(jìn)入了公司網(wǎng)站,其中只有3%的轉(zhuǎn)化率。

“這有點(diǎn)荒謬,因?yàn)樗麄円呀?jīng)點(diǎn)擊了廣告,往往具有明確的消費(fèi)意向?!盦uick說(shuō)。而采用針對(duì)核心客戶群的個(gè)性化登錄頁(yè)面之后,Jounce轉(zhuǎn)化率提高到了20%左右。

2012年,Quick決定將公司業(yè)務(wù)的重點(diǎn)轉(zhuǎn)移到Instapage,現(xiàn)在Instapage成為了一個(gè)更廣泛的平臺(tái),用于創(chuàng)建和測(cè)試針對(duì)不同訪問(wèn)者個(gè)性化目標(biāo)網(wǎng)頁(yè)。

“我們可以成為廣告技術(shù)與傳統(tǒng)營(yíng)銷(xiāo)和銷(xiāo)售技術(shù)之間的橋梁,”Quick說(shuō),“這些技術(shù)能夠幫助廣告投放商鎖定核心用戶。一旦用戶點(diǎn)擊廣告,自動(dòng)化營(yíng)銷(xiāo)就會(huì)啟動(dòng),將這些用戶納入企業(yè)的CRM系統(tǒng)。這是以往的技術(shù)中缺失的轉(zhuǎn)換點(diǎn)?!?

用智能化登錄頁(yè)面提升數(shù)字營(yíng)銷(xiāo)轉(zhuǎn)化率,Instapage獲1500萬(wàn)美元A輪融資

圍繞Quick所謂的“點(diǎn)擊廣告后就引導(dǎo)轉(zhuǎn)化”,Instapage開(kāi)發(fā)了三個(gè)關(guān)鍵組件——可擴(kuò)展創(chuàng)建,頁(yè)面優(yōu)化和個(gè)性化。而像Optimizely可能只會(huì)解決其中的一些問(wèn)題,而Instapage將三者結(jié)合了起來(lái)。

而談及如何采集用戶數(shù)據(jù),為企業(yè)訂制個(gè)性化登錄頁(yè)面時(shí),Quick認(rèn)為公司不需要詳細(xì)的用戶數(shù)據(jù):“個(gè)性化的標(biāo)簽來(lái)自廣告本身。我們可以從他們點(diǎn)擊的廣告中收集到數(shù)據(jù)?!?

之前,Instapage已經(jīng)獲得了200萬(wàn)美元的種子資金。而且目前該公司盈利,Quick說(shuō)每年的經(jīng)常性收入為1200萬(wàn)美元,并沒(méi)有融資需求。但是,他發(fā)現(xiàn)Morgan Stanley Expansion Capital愿意挖掘并了解Instapage的業(yè)務(wù)。

Morgan Stanley Expansion Capital主管Pete Chung表示,“Instapage專(zhuān)注于提高數(shù)字營(yíng)銷(xiāo)效率這個(gè)細(xì)分領(lǐng)域,并且可以在不需要外部或技術(shù)資源的情況下進(jìn)行更精準(zhǔn)的廣告活動(dòng),創(chuàng)造了令人印象深刻的產(chǎn)品?!?


設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

博博


人人都是產(chǎn)品經(jīng)理 2018-04-23 00:00:00

本文作者主要講解表單中的文本和選擇器,enjoy~

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

根據(jù)組件的用途,可以分為六大類(lèi):Feedback 反饋、form 表單、basic 基礎(chǔ)、data 數(shù)據(jù) 、navigation 導(dǎo)航、other 其他。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能;用戶需要填寫(xiě)輸入數(shù)據(jù)并且提交到數(shù)據(jù)庫(kù),則這種組件就是表單類(lèi)。

本文主要講解表單中的文本和選擇器,其中文本分為input短文本、InputAutocomplete 短文本聯(lián)想和InputMultiline 長(zhǎng)文本。

input 短文本

定義:用于用戶文本輸入,并以字符串的方式提交到數(shù)據(jù)庫(kù)。

使用場(chǎng)景:

  1. 用戶需要輸入字符時(shí)
  2. 通過(guò)鼠標(biāo)鍵盤(pán)輸入內(nèi)容
  3. 輸入的文本通常置于輸入框

例如網(wǎng)易考拉優(yōu)惠券兌換的表單填寫(xiě),就是短文本輸入組件,前面是標(biāo)題,后面是文本輸入框。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

input短文本組件的展示形式可以分為三類(lèi)。第1類(lèi)是標(biāo)題和輸入框左右排列;第二類(lèi)是標(biāo)題和輸入框上下排列;第三列不需要標(biāo)題的排列。

標(biāo)題和輸入框左右排列時(shí),短文本組件存在的狀態(tài)有:初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

常見(jiàn)的表單類(lèi)排版都是左右排版,同時(shí)表單之間,標(biāo)題采用左對(duì)齊,輸入框左對(duì)齊的情況比較多。有時(shí)候標(biāo)題名字過(guò)長(zhǎng)這樣話 左右排列就不夠好,這時(shí)候需要采用上下排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

標(biāo)題和輸入框上下排版時(shí),存在狀態(tài)和左右排列是一致的。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

當(dāng)沒(méi)有標(biāo)題時(shí),存在狀態(tài)同左右排列的規(guī)則和邏輯。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

InputAutocomplete 短文本聯(lián)想

定義:用戶用于文本輸入,在輸入過(guò)程中會(huì)聯(lián)想匹配文本選項(xiàng),并以字符串的方式提交到數(shù)據(jù)庫(kù)。

使用場(chǎng)景:

  1. 需要用戶輸入文本時(shí)。
  2. 提供聯(lián)想匹配文本,減少用戶輸入成本。
  3. 在輸入過(guò)程中根據(jù)用戶輸入的內(nèi)容,出現(xiàn)匹配選項(xiàng),提交的數(shù)據(jù)是文本而非枚舉項(xiàng)。

例如百度搜索,在輸入框輸入關(guān)鍵詞時(shí)會(huì)出現(xiàn)對(duì)應(yīng)的聯(lián)想匹配文本。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

和input短文本組件相比,InputAutocomplete 短文本聯(lián)想唯一的不同就是新增了聯(lián)想匹配選項(xiàng),并且提交的是文本而非枚舉項(xiàng)。

標(biāo)題和輸入框左右排列時(shí),InputAutocomplete 短文本聯(lián)想組件存在的狀態(tài)有:初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

上下排列的狀態(tài)和規(guī)則邏輯同左右排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

不含標(biāo)題的狀態(tài)和規(guī)則邏輯同左右排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

InputMultiline 長(zhǎng)文本

定義:用戶用于長(zhǎng)文本輸入,并以文本的方式提交到數(shù)據(jù)庫(kù)。

使用場(chǎng)景:

  1. 多段文字輸入
  2. 需要換行
  3. 輸入的文本通常置于輸入框中

例如新浪微博,在輸入框發(fā)微博時(shí),就是長(zhǎng)文本輸入,可以換行。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

標(biāo)題和輸入框左右排列時(shí),InputMultiline 長(zhǎng)文本存在的狀態(tài)有:初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。在輸入過(guò)程中一般有字?jǐn)?shù)統(tǒng)計(jì),超過(guò)限制字?jǐn)?shù),不允許用戶輸入。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

上下排列邏輯和規(guī)則同左右排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

不含標(biāo)題的邏輯同左右排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

select 選擇器

定義:用戶通過(guò)選擇枚舉項(xiàng),提交到服務(wù)器。后端存儲(chǔ)為枚舉項(xiàng)。

使用場(chǎng)景:

  1. 彈出一個(gè)下拉選項(xiàng)給用戶選擇操作
  2. 當(dāng)選項(xiàng)少時(shí)(少于 5 項(xiàng)),建議直接將選項(xiàng)平鋪,使用 Radio 是更好的選擇。

例如淘寶賣(mài)家后臺(tái)篩選訂單的狀態(tài)時(shí),點(diǎn)擊選擇器,出現(xiàn)下拉列表。這就是一個(gè)常見(jiàn)的選擇器,選擇器分為多選和單選兩大類(lèi)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

下圖為選擇器基本樣式,就是簡(jiǎn)單的下拉選項(xiàng),不可進(jìn)行關(guān)鍵詞的搜索。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

下圖是可以搜索的選擇器,當(dāng)輸入框處于激活態(tài)時(shí),浮出下拉列表。在輸入過(guò)程中,出現(xiàn)匹配枚舉項(xiàng),點(diǎn)擊枚舉項(xiàng),則輸入的關(guān)鍵詞清空,同時(shí)下拉選項(xiàng)收起。輸入框出現(xiàn)選擇的選項(xiàng)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

有時(shí)候存在一個(gè)場(chǎng)景。用戶對(duì)需要填寫(xiě)的選項(xiàng)設(shè)為空選項(xiàng),則需要空值的選項(xiàng)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

有時(shí)候存在一個(gè)場(chǎng)景。用戶選擇了一個(gè)選項(xiàng),但是后面想去掉選擇的選項(xiàng),不進(jìn)行選擇。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

選擇器多選組件中需要注意的一點(diǎn)就是:用戶在輸入關(guān)鍵詞中,選擇對(duì)應(yīng)下拉選項(xiàng),則輸入的字符串清空,同時(shí)出現(xiàn)該選項(xiàng)tag。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

Loading設(shè)計(jì)思路分享

博博


UI妹兒 2018-05-04 10:44:21

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

Loading設(shè)計(jì)思路分享

Loading作為一個(gè)常見(jiàn),并且?guī)в信潘缘膭?dòng)畫(huà),已經(jīng)被各路大神表現(xiàn)的淋漓盡至。那么如何在眾優(yōu)秀作品下,做出一個(gè)性化的Loading動(dòng)畫(huà)?

Loading設(shè)計(jì)思路分享

Loading種類(lèi):

1.狀態(tài)類(lèi)(進(jìn)度條):通常數(shù)據(jù)量很大,客戶端已知加載量,并能根據(jù)當(dāng)前加載速度計(jì)算出何時(shí)加載完成。

狀態(tài)型的Loading以進(jìn)度條類(lèi)為基準(zhǔn),可以為用戶提供預(yù)期時(shí)間,多伴隨百分比進(jìn)度出現(xiàn)。進(jìn)度條的形式以線性的形式出現(xiàn),已知總量,降低用戶對(duì)期待時(shí)間的感受。無(wú)聊的等待會(huì)讓人厭煩,作為一個(gè)UI設(shè)計(jì)師需要關(guān)注每一個(gè)細(xì)節(jié),尤其是用戶的情緒并將引導(dǎo)到加載后的頁(yè)面。

By Piotr Adam Kwiatkowski

2.無(wú)狀態(tài)類(lèi)(菊花):通常數(shù)據(jù)量比較小,客戶端無(wú)法預(yù)知加載量。

Loading設(shè)計(jì)思路分享

無(wú)狀態(tài)類(lèi)的Loaing以菊花為代表,通常都是一組可以無(wú)限循環(huán)播放的動(dòng)畫(huà)。

無(wú)狀態(tài)類(lèi)的Loaing如有需要可以做的特別一些:https://dribbble.com/search?q=loading

我們的App需要一個(gè)無(wú)狀態(tài)的Loading。

我始終相信設(shè)計(jì)的直覺(jué)很重要,抓住直覺(jué)的爆發(fā)點(diǎn),是一個(gè)成熟設(shè)計(jì)師必備的素質(zhì)。于是先按照最初的想法快速做了一版。

Loading設(shè)計(jì)思路分享

相信很多人對(duì)這個(gè)Loaing眼熟,當(dāng)然,這肯定不是我們要的效果,不過(guò)在制作這Loading的時(shí)候不斷的推翻自己的想法,時(shí)而清醒時(shí)而模糊,感覺(jué)突然找到了方向但瞬間也可能煙消云散。這種不斷反復(fù)的過(guò)程中還是收獲了很多。

Loading設(shè)計(jì)思路分享

既然是無(wú)限,循環(huán),表現(xiàn)上就不能過(guò)于缺乏趣味,這個(gè)度很難把握。形式感上面設(shè)計(jì)要簡(jiǎn)單,又要通過(guò)最直接的方法創(chuàng)造空間感,偶然間發(fā)現(xiàn)馬戲團(tuán)的拋球表演。突然間有了靈感,于是就沿著這個(gè)思路開(kāi)始動(dòng)手設(shè)計(jì):

我嘗試去直接模仿拋棄的運(yùn)動(dòng),但是效果并不是很好,但是從Demo中可以看出,值得很入研究。

為此我們搜索了一下現(xiàn)實(shí)中的扔球效果:

Loading設(shè)計(jì)思路分享

經(jīng)過(guò)分析我們得出了第一條小球的運(yùn)動(dòng)路經(jīng)是一個(gè)無(wú)限的符號(hào)。

工作路經(jīng)確定后,導(dǎo)入C4D中進(jìn)行單球運(yùn)動(dòng)軌跡測(cè)

由于實(shí)例中,小球會(huì)受到重力以及加速度的影響,并非勻速運(yùn)動(dòng),但在實(shí)際Loading制作過(guò)程中,為了視覺(jué)效果,我們希望小球做勻速運(yùn)動(dòng)

發(fā)現(xiàn)問(wèn)題:小球在中心焦點(diǎn)位置出現(xiàn)明顯卡頓

起初我們認(rèn)為是速度曲線沒(méi)有調(diào)整好所導(dǎo)致的,但我們嘗試幾版后發(fā)現(xiàn)并不是這樣,最后我們發(fā)現(xiàn)導(dǎo)致這個(gè)問(wèn)題的原因是路經(jīng)節(jié)點(diǎn)問(wèn)題。

Loading設(shè)計(jì)思路分享

調(diào)整節(jié)點(diǎn)

通過(guò)調(diào)整節(jié)點(diǎn)后,不難發(fā)現(xiàn),中心焦點(diǎn)處的卡頓明顯不見(jiàn)了

為了加強(qiáng)透視效果,我們將球的大小和顏色進(jìn)行了關(guān)鍵幀處理,這已處理增加的景深對(duì)視覺(jué)的沖擊,使得空間感更強(qiáng)了。

看起來(lái)怪怪的。。。。。

為了使整個(gè)運(yùn)動(dòng)規(guī)律更加精準(zhǔn),我們發(fā)現(xiàn)運(yùn)動(dòng)的起點(diǎn)距離是關(guān)鍵,不懈的追求完美的情況下,總是會(huì)有頓悟的時(shí)刻,幸運(yùn)的是找到了問(wèn)題的所在

三個(gè)球勻速運(yùn)動(dòng)的情況下,應(yīng)該保證每相鄰兩個(gè)球之間路經(jīng)上的距離是相同的。

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

界面欣賞

博博

  • 如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

    萬(wàn)聚制作 2018-05-15 13:30:00

素材源自網(wǎng)絡(luò)

這是我們收集UI / UX交互的一周時(shí)間,以增強(qiáng)您的用戶界面靈感。我們專(zhuān)注于酷炫的動(dòng)畫(huà),布局設(shè)計(jì),用戶體驗(yàn)思考等等。我們正在從靜態(tài),動(dòng)態(tài)甚至是現(xiàn)場(chǎng)原型混合它,這可能是一個(gè)偉大的每周系列書(shū)簽!本周,我們對(duì)交互/轉(zhuǎn)換的關(guān)注較少。本周我們一直在挖掘一些動(dòng)畫(huà),但我們發(fā)現(xiàn)的主要是靜態(tài)的。我們有各種各樣的組合,恰到好處地為您提供創(chuàng)意提升。

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

用戶界面靈感:國(guó)外設(shè)計(jì)大神UI設(shè)計(jì)作品欣賞,每一張都是壁紙!

日歷

鏈接

個(gè)人資料

存檔