首頁

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

博博


聽云 2016-04-18 10:49:28

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

1、可見性原則

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

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

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

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

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

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

2、場景貼切原則

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

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

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

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

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

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

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

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

3、可控原則

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

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

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

4、一致性原則:

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

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

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

5、放錯原則

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

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

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

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

7、靈活的原則

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

移動端的用戶大多數(shù)不是專家級用戶,也不是小白用戶。對頁面的設(shè)計要更側(cè)重于滿足對大多數(shù)用戶的需求,不宜復(fù)雜,也不宜過于簡單無提示。

8、易掃原則

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

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

9、容錯性

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

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

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

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

10、人性化幫助原則

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

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

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

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

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

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

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

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

博博


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

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

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

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

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

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

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

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

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

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

toast

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

使用場景:

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

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

例如簡書在沒有上傳專題封面時就點擊創(chuàng)建專題按鈕,出現(xiàn)toast提示,提示用戶要先上傳專題封面才能創(chuàng)建專題。

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

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

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

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

alert 警示提示

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

使用場景:

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

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

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

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

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

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

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

dialog對話框

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

使用場景:

  1. 用戶在進行重要操作的時,需要進行二次確認。

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

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

windows系統(tǒng)的確定按鈕一般在左邊,而Mac OS的確定一般在右邊。因為這個原因,導(dǎo)致我們平時看到的確定有時候在左邊,有時候在右邊。

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

dialog對話框,有三種常見的使用場景。其中表單對話框、提示類、輕量級提示類、表單類樣式都是基于二次確認類對話框樣式的改變而得到不同的樣式。

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

Notification通知提醒框

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

使用場景:

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

  2. 帶有交互的通知,給出用戶下一步的行動點。

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

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

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

tooltip 文字提示

定義:簡單輕量的的文字提示。

使用場景:

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

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

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

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

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

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


UI設(shè)計的4個角度與14點思考

博博


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

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

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

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

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

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

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

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考

UI設(shè)計的4個角度與14點思考


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

博博

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

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

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

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

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

懶人福利

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

可以直接翻到文末

專門為大家整理好的

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

免費送!

機會就一次,錯過可以不用等下年了

因為活動就這一次

常用素材

一、免費可商用圖片

1、https://pixabay.com

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

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

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

優(yōu)點:種類很多,質(zhì)量高

缺點:下載需注冊,加載慢

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

2、https://unsplash.com

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

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

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

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

缺點:加載慢

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

3、https://www.pexels.com

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

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

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

優(yōu)點:種類多,每日更新,不需注冊

缺點:加載慢

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

4、http://foter.com

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

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

這里的圖片給我的感覺就是有趣,獨特,有很多圖片都很適合做海報。

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

優(yōu)點:分類明確,質(zhì)量很高

缺點:加載超慢,種類不多

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

5、https://burst.shopify.com

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

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

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

優(yōu)點:風(fēng)格獨特,質(zhì)量高,分類明確

缺點:數(shù)量不多

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

6、https://negativespace.co

7、http://superfamous.com

8、http://librestock.com

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

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

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

二、字體

1、https://fontsup.com

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

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

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

優(yōu)點:種類多,質(zhì)量高,免費下載

缺點:加載稍慢,廣告有點多

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

2、http://www.myfonts.com

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

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

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

優(yōu)點:種類多,質(zhì)量高

缺點:付費

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

3、http://comicneue.com

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

免費手寫可愛字體下載

優(yōu)點:質(zhì)量高,字體可愛

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

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

4、http://www.zhaozi.cn

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

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

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

優(yōu)點:種類很多,方便查閱

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

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

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

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

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

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

優(yōu)點:覆蓋中英文字體、種類多

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

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

UI設(shè)計素材

一、圖標(biāo)類

1、http://www.iconfont.cn

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

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

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

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

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

缺點:不能打包下載、需注冊

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

2、https://www.flaticon.com

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

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

優(yōu)點:種類豐富,質(zhì)量可靠,免費下載

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

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

3、http://fontello.com

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

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

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

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

4、https://thenounproject.com

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

優(yōu)點:種類豐富,質(zhì)量超高,免費下載

缺點:英文搜索,加載慢,不能打包下載

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

5、https://icomoon.io

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

優(yōu)點:種類豐富,質(zhì)量一般,免費下載

缺點:英文搜索,加載超慢,操作復(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)驗設(shè)計師教你如何尋找高質(zhì)量素材

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

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

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

優(yōu)點:質(zhì)量高,免費下載

缺點:種類少,部分素材有重復(fù)

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

2、TOSKETCH.COM

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

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

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

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

缺點:只提供Sketch資源

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

3、UI8.NET

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

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

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

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

缺點:付費(充值是個問題),加載稍慢,下載稍麻煩

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

4、PRINCIPLEREPO.COM

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

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

優(yōu)點:質(zhì)量高,數(shù)量豐富,免費下載

缺點:加載很慢,只有動效資源

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

5、UISHE.CN

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

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

優(yōu)點:種類很多,質(zhì)量高,下載方便

缺點:付費

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

6、MOCKUP.ZONE

7、GRAPHBERRY.COM

8、GRAPHICTWISTER.COM

9、SKETCHAPPSOURCES.COM

10、DUNNK.COM

平面設(shè)計素材

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

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

優(yōu)點:種類超多、質(zhì)量高、免費下載、主題分類

缺點:非會員每日有數(shù)量限制

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

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

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

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

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

缺點:非會員每日有數(shù)量限制

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

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

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

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

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

優(yōu)點:種類多,專業(yè)提供免摳PNG源文件

缺點:非會員每日有數(shù)量限制

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

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

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

博博


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

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

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

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

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

一、減少用戶出錯

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

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

二、易學(xué)性

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

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

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

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

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

2、覆蓋式教程是另一種介紹方式,很簡單的透明薄皮,少許箭頭,少許注釋,指出關(guān)鍵重點之處。

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

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

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

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

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

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

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

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

四、輸入方式更簡單

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

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

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

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

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

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

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

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

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

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

六、做好反饋

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

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

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

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

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

七、內(nèi)容為先

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

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

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

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

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

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

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

博博


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

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

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

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

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

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

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

  1. SKETCH

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

2.PS

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

3.AI

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

4.AE

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

用智能化登錄頁面提升數(shù)字營銷轉(zhuǎn)化率,Instapage獲1500萬美元A輪融資

博博


36氪 

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

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

設(shè)計登陸頁面似乎并不是創(chuàng)業(yè)者感興趣的風(fēng)口,但Instapage創(chuàng)始人兼首席執(zhí)行官Tyson Quick表示,這對于營銷人員來說卻是一個真正的問題。

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

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

“這有點荒謬,因為他們已經(jīng)點擊了廣告,往往具有明確的消費意向?!盦uick說。而采用針對核心客戶群的個性化登錄頁面之后,Jounce轉(zhuǎn)化率提高到了20%左右。

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

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

用智能化登錄頁面提升數(shù)字營銷轉(zhuǎn)化率,Instapage獲1500萬美元A輪融資

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

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

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

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


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

博博


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

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

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

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

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

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

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

input 短文本

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

使用場景:

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

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

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

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

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

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

常見的表單類排版都是左右排版,同時表單之間,標(biāo)題采用左對齊,輸入框左對齊的情況比較多。有時候標(biāo)題名字過長這樣話 左右排列就不夠好,這時候需要采用上下排列。

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

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

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

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

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

InputAutocomplete 短文本聯(lián)想

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

使用場景:

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

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

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

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

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

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

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

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

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

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

InputMultiline 長文本

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

使用場景:

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

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

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

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

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

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

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

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

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

select 選擇器

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

使用場景:

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

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

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

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

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

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

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

有時候存在一個場景。用戶對需要填寫的選項設(shè)為空選項,則需要空值的選項。

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

有時候存在一個場景。用戶選擇了一個選項,但是后面想去掉選擇的選項,不進行選擇。

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

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

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

Loading設(shè)計思路分享

博博


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

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

Loading設(shè)計思路分享

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

Loading設(shè)計思路分享

Loading種類:

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

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

By Piotr Adam Kwiatkowski

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

Loading設(shè)計思路分享

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

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

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

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

Loading設(shè)計思路分享

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

Loading設(shè)計思路分享

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

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

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

Loading設(shè)計思路分享

經(jīng)過分析我們得出了第一條小球的運動路經(jīng)是一個無限的符號。

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

由于實例中,小球會受到重力以及加速度的影響,并非勻速運動,但在實際Loading制作過程中,為了視覺效果,我們希望小球做勻速運動

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

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

Loading設(shè)計思路分享

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

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

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

看起來怪怪的。。。。。

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

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

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

界面欣賞

博博

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

    萬聚制作 2018-05-15 13:30:00

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔