他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

首頁

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

博博


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

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

1、可見性原則

用戶在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋。“即時”是指頁面響應時間小于用戶能忍受的等待時間。保證頁面內容的可見性、狀態的可見性、狀態變化的可見性。

在用戶與應用的交互過程中,系統需要即時的給予用戶反饋。如果用戶在操作過程中,頁面出現一片空白,不清楚應用是否給予了用戶反饋,這時候用戶就會感到焦慮、恐慌,這些都是不符合可見原則的。看起來非常基礎的要求,其實很多產品都做不到或者沒做好。

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

現在來看一款可見性做的比較好的App

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

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

2、場景貼切原則

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

在做產品設計的時候,主要考慮到的是用戶使用場景。產品的功能要貼近目標用戶的真實使用環境,這一點非常重要。用兩款導航類產品舉例:

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

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

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

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

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

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

3、可控原則

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

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

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

4、一致性原則:

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

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

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

5、放錯原則

通過網頁的設計、重組或特別提醒或安排,防止用戶出錯。

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

6、協助用戶記憶原則

在需要記憶某些信息時,產品功能上要幫助用戶記憶。盡可能減少用戶回憶負擔,把需要記憶的內容擺上臺面。

7、靈活的原則

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

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

8、易掃原則

互聯網用戶瀏覽網頁的動作不是讀,不是看,而是掃。易掃,意味著突出重點,弱化和剔除無關信息。

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

9、容錯性

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

例如各類應用中要恢復出廠設置,是一個比較重大的操作

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

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

10、人性化幫助原則

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

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

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

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

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

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

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

設計規范 | Web端設計組件篇-反饋類

博博


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

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

設計規范 | Web端設計組件篇-反饋類

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

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

  2. 統一用戶體驗:由于使用了統一的組件規范,所以保證了的視覺和交互設計統一性,保證整體的用戶體驗性。

  3. 提升設計綜合能力:由于減少了做組件重復性勞動,交互設計師/PM 可以將更多時間和精力放在討論業務、設計方法、設計思維、定義產品等綜合能力方面。從而驅動業務創新。

根據組件的用途,可以分為六大類:Feedback 反饋、from 表單、basic 基礎、data 數據 、navigation 導航、other 其他。

設計規范 | Web端設計組件篇-反饋類

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

toast

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

使用場景:

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

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

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

設計規范 | Web端設計組件篇-反饋類

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

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

設計規范 | Web端設計組件篇-反饋類

alert 警示提示

定義:當用戶進行某種操作時,網站會出現對應的警告信息提示用戶,該提示信息的狀態不會主動消失。

使用場景:

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

  2. 非浮層的靜態展現形式,始終展現,不會自動消失,有的組件用戶可以點擊關閉。

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

設計規范 | Web端設計組件篇-反饋類

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

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

設計規范 | Web端設計組件篇-反饋類

dialog對話框

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

使用場景:

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

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

  3. 承載少量的表單填寫類,減少頁面的跳轉。

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

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

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

設計規范 | Web端設計組件篇-反饋類

Notification通知提醒框

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

使用場景:

  1. 較為復雜的通知內容。

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

  3. 系統主動推送。

Notification通知提醒框出現在網頁右上角,一般4-5s消失,也可以點擊叉號進行關閉。

設計規范 | Web端設計組件篇-反饋類

tooltip 文字提示

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

使用場景:

  1. 鼠標移入則立即顯示提示,移出則立即消失,不承載復雜文本和操作。

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

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

設計規范 | Web端設計組件篇-反饋類

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

設計規范 | Web端設計組件篇-反饋類


UI設計的4個角度與14點思考

博博


設計師檸檬 2018-04-26 15:22:57

寫在前面的話:文章內容源于網絡,由檸檬整理發布,如有侵權請聯系設計師檸檬刪除

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

本文重點:1.學著像產品經理的角度思考

2.學著像交互設計師的角度思考

3.學著在用戶的角度思考

4.學著在自己的角度思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考

UI設計的4個角度與14點思考


10年經驗設計師教你如何尋找高質量素材

博博

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

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

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

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

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

懶人福利

如果你覺得這些網站下載太麻煩

可以直接翻到文末

專門為大家整理好的

1000G高質量精選設計素材

免費送!

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

因為活動就這一次

常用素材

一、免費可商用圖片

1、https://pixabay.com

10年經驗設計師教你如何尋找高質量素材

全網共一百多萬張免費圖片素材,且質量非常高,種類繁多,適合每一個行業使用。

10年經驗設計師教你如何尋找高質量素材

優點:種類很多,質量高

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

推薦指數:★★★★★ 4.5

2、https://unsplash.com

10年經驗設計師教你如何尋找高質量素材

全世界的優秀圖片網站,所以圖片風格很豐富,而且大部分質量都很高,分分種可以用來做壁紙!

10年經驗設計師教你如何尋找高質量素材

優點:質量高且優秀,數量多,風格獨特

缺點:加載慢

推薦指數:★★★★ 4

3、https://www.pexels.com

10年經驗設計師教你如何尋找高質量素材

每日會更新100張高質量的照片在首頁展示,無論風光還是人物,這里應有盡有。

10年經驗設計師教你如何尋找高質量素材

優點:種類多,每日更新,不需注冊

缺點:加載慢

推薦指數:★★★★ 4

4、http://foter.com

10年經驗設計師教你如何尋找高質量素材

網站開始會將素材分為商業、動物和風景三大類,如果你需要尋找其他圖片,可以直接在搜索欄直接搜索關鍵詞。

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

10年經驗設計師教你如何尋找高質量素材

優點:分類明確,質量很高

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

推薦指數:★★★★ 4

5、https://burst.shopify.com

10年經驗設計師教你如何尋找高質量素材

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

10年經驗設計師教你如何尋找高質量素材

優點:風格獨特,質量高,分類明確

缺點:數量不多

推薦指數:★★★★ 4

6、https://negativespace.co

7、http://superfamous.com

8、http://librestock.com

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

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

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

二、字體

1、https://fontsup.com

10年經驗設計師教你如何尋找高質量素材

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

10年經驗設計師教你如何尋找高質量素材

優點:種類多,質量高,免費下載

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

推薦指數:★★★★ 4.5

2、http://www.myfonts.com

10年經驗設計師教你如何尋找高質量素材

網站提供的商業字體,質量很高很漂亮,數量也很多。

10年經驗設計師教你如何尋找高質量素材

優點:種類多,質量高

缺點:付費

推薦指數:★★★★ 4

3、http://comicneue.com

10年經驗設計師教你如何尋找高質量素材

免費手寫可愛字體下載

優點:質量高,字體可愛

缺點:數量較少,下載稍麻煩

推薦指數:★★★★ 3.5

4、http://www.zhaozi.cn

10年經驗設計師教你如何尋找高質量素材

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

10年經驗設計師教你如何尋找高質量素材

優點:種類很多,方便查閱

缺點:使用時注意商用版權,僅中文字體

推薦指數:★★★★ 4

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

10年經驗設計師教你如何尋找高質量素材

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

10年經驗設計師教你如何尋找高質量素材

優點:覆蓋中英文字體、種類多

缺點:網站廣告稍多,沒有注明版權范圍

推薦指數:★★★★ 4

UI設計素材

一、圖標類

1、http://www.iconfont.cn

10年經驗設計師教你如何尋找高質量素材

阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺,內含一百多萬個圖標!

設計師將圖標上傳到Iconfont平臺,用戶可以自定義下載多種格式的icon,平臺也可將圖標轉換為字體,便于前端工程師自由調整與調用。

10年經驗設計師教你如何尋找高質量素材

優點:種類豐富,質量超高,免費下載,中文界面,阿里旗下

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

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

2、https://www.flaticon.com

10年經驗設計師教你如何尋找高質量素材

大型圖標網站,里面擁有將近50萬個圖標,一萬多個圖標集!種類豐富,質量超高,且支持在線編輯。

優點:種類豐富,質量可靠,免費下載

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

推薦指數:★★★★★ 4.5

3、http://fontello.com

覆蓋絕大部分網上可能應用到的圖標,也就是說任何你需要的網站類圖標都可以在這里找到。

優點:網站圖標齊全,質量高,免費下載

缺點:加載稍慢,僅有黑白圖標

推薦指數:★★★★ 4

4、https://thenounproject.com

擁有一百多萬個圖標的大型圖標網站,而且圖標都是由全世界各地設計師設計,質量非常高!而且里面有很多有趣的圖標,例如下面鳥籠類圖標集,非常卡哇伊!

優點:種類豐富,質量超高,免費下載

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

推薦指數:★★★★ 4

5、https://icomoon.io

聚合類圖標網站,里面集合了不同網站的不同圖標,付費免費都有,種類超多。

優點:種類豐富,質量一般,免費下載

缺點:英文搜索,加載超慢,操作復雜

推薦指數:★★★★ 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年經驗設計師教你如何尋找高質量素材

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

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

10年經驗設計師教你如何尋找高質量素材

優點:質量高,免費下載

缺點:種類少,部分素材有重復

推薦指數:★★★★ 4

2、TOSKETCH.COM

10年經驗設計師教你如何尋找高質量素材

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

10年經驗設計師教你如何尋找高質量素材

優點:質量超高,更新快,中文界面,百度云下載

缺點:只提供Sketch資源

推薦指數:★★★★ 4

3、UI8.NET

10年經驗設計師教你如何尋找高質量素材

U18是設計素材圈的網紅,提供大量漂亮的超高質量商業設計素材,但并非免費,絕大部分都需要付費。

10年經驗設計師教你如何尋找高質量素材

優點:質量超高、數量豐富、界面清爽

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

推薦指數:★★★★ 4

4、PRINCIPLEREPO.COM

10年經驗設計師教你如何尋找高質量素材

高質量Principle原型和動效設計資源的網站,特別是動效,每一個都非常漂亮,很有參考價值。

優點:質量高,數量豐富,免費下載

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

推薦指數:★★★★ 3.5

5、UISHE.CN

10年經驗設計師教你如何尋找高質量素材

UI社,網站提供主題包、圖標、界面和樣機素材等素材,屬于綜合性的素材下載網站。因為國內的網站,大家不用擔心加載慢等問題啦。

優點:種類很多,質量高,下載方便

缺點:付費

推薦指數:★★★★ 4

6、MOCKUP.ZONE

7、GRAPHBERRY.COM

8、GRAPHICTWISTER.COM

9、SKETCHAPPSOURCES.COM

10、DUNNK.COM

平面設計素材

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

國內大型素材網站,素材幾乎覆蓋所有類目、廣告設計、電商設計和辦公室素材等。逢節假日都有提供主題素材提供下載,且質量很高!

優點:種類超多、質量高、免費下載、主題分類

缺點:非會員每日有數量限制

推薦指數:★★★★★ 4.5

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

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

10年經驗設計師教你如何尋找高質量素材

優點:種類齊全,質量超高,免費下載,全站正版可商用

缺點:非會員每日有數量限制

推薦指數:★★★★★ 4.5

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

10年經驗設計師教你如何尋找高質量素材

大型素材網站,可能是國內唯一一家專業設計師提供免摳圖PNG素材,全站2000萬+高質量素材無限下載,推薦!

10年經驗設計師教你如何尋找高質量素材

優點:種類多,專業提供免摳PNG源文件

缺點:非會員每日有數量限制

推薦指數:★★★★ 4.5

另外國內還有付費的昵圖網和我圖網,免費的有站長素材等等素材網站,數量很多這里就不一一舉例了。

7條產品設計原則:純干貨總結,實用到沒朋友

博博


人人都是產品經理 2016-05-16 10:07:04

來人人都是產品經理【起點學院】,BAT實戰派產品總監手把手系統帶你學產品、學運營。

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

7條產品設計原則:純干貨總結,實用到沒朋友

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

一、減少用戶出錯

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

7條產品設計原則:純干貨總結,實用到沒朋友

二、易學性

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

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

1、導覽教程是通過一組有序的圖片介紹應用功能,或者指引用戶完成一個目標。

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

7條產品設計原則:純干貨總結,實用到沒朋友

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

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

7條產品設計原則:純干貨總結,實用到沒朋友

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

三、美學一致性、完整性

應用的完整性一致性就是外觀和里面不同模塊之間都有相似的外觀、感覺和氣質。產品的完整性一致性會讓產品更易學易用。

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

2、從應用內部看,一致的用詞、風格、色調、圖標會給用戶建立具有凝聚力的視覺系統,帶來在產品上一致的體驗。

7條產品設計原則:純干貨總結,實用到沒朋友

四、輸入方式更簡單

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

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

7條產品設計原則:純干貨總結,實用到沒朋友

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

7條產品設計原則:純干貨總結,實用到沒朋友

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

五、為停止做準備

當人們全身心的投入到活動場景中,會對周圍的干擾視而不見,這種狀態被稱為“流”,用戶在這種狀態下會有輕松的、溫和的快感,處理任務,完成目標也是會非常的,但是很不幸的是,我們使用的手機,使用移動應用的場景,就是會因為各種事情而打斷。想象一下,錄下精彩的視頻,發送時網絡卡住了,不響應了;發微博發到一半手機停電了;網購付款時老板的電話來了,這在我們日常生活中太常見,所以聰明的、體貼的產品,是隨時為停止做好準備的。

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

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

六、做好反饋

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

反饋可以分為過程反饋和結果反饋。

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

7條產品設計原則:純干貨總結,實用到沒朋友

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

七、內容為先

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

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

7條產品設計原則:純干貨總結,實用到沒朋友

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

7條產品設計原則:純干貨總結,實用到沒朋友

人人都是產品經理也是以UGC為主的產品,正所謂內容為王,吧啦吧啦,算了不說了,投稿去了。

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

博博


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

在學軟件操作的時候,要說什么最繁瑣?那當然是軟件操作的指令了。

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

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

這么全的快捷方式,還不快快收藏轉發?

如果有喜歡UI設計的同學,可以私信學霸姐姐:UI設計,即可領取超過600G的UI設計零基礎高清教學視頻,學霸姐姐會一一回復的!

快快行動起來,將快捷方式轉發給你的同學朋友們吧!

  1. SKETCH

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

2.PS

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

3.AI

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

4.AE

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

用智能化登錄頁面提升數字營銷轉化率,Instapage獲1500萬美元A輪融資

博博


36氪 

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

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

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

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

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

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

2012年,Quick決定將公司業務的重點轉移到Instapage,現在Instapage成為了一個更廣泛的平臺,用于創建和測試針對不同訪問者個性化目標網頁。

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

用智能化登錄頁面提升數字營銷轉化率,Instapage獲1500萬美元A輪融資

圍繞Quick所謂的“點擊廣告后就引導轉化”,Instapage開發了三個關鍵組件——可擴展創建,頁面優化和個性化。而像Optimizely可能只會解決其中的一些問題,而Instapage將三者結合了起來。

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

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

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


設計規范|Web端設計組件篇—文本與選擇器

博博


人人都是產品經理 2018-04-23 00:00:00

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

設計規范|Web端設計組件篇—文本與選擇器

根據組件的用途,可以分為六大類:Feedback 反饋、form 表單、basic 基礎、data 數據 、navigation 導航、other 其他。

設計規范|Web端設計組件篇—文本與選擇器

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

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

input 短文本

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

使用場景:

  1. 用戶需要輸入字符時
  2. 通過鼠標鍵盤輸入內容
  3. 輸入的文本通常置于輸入框

例如網易考拉優惠券兌換的表單填寫,就是短文本輸入組件,前面是標題,后面是文本輸入框。

設計規范|Web端設計組件篇—文本與選擇器

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

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

設計規范|Web端設計組件篇—文本與選擇器

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

設計規范|Web端設計組件篇—文本與選擇器

標題和輸入框上下排版時,存在狀態和左右排列是一致的。

設計規范|Web端設計組件篇—文本與選擇器

當沒有標題時,存在狀態同左右排列的規則和邏輯。

設計規范|Web端設計組件篇—文本與選擇器

InputAutocomplete 短文本聯想

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

使用場景:

  1. 需要用戶輸入文本時。
  2. 提供聯想匹配文本,減少用戶輸入成本。
  3. 在輸入過程中根據用戶輸入的內容,出現匹配選項,提交的數據是文本而非枚舉項。

例如百度搜索,在輸入框輸入關鍵詞時會出現對應的聯想匹配文本。

設計規范|Web端設計組件篇—文本與選擇器

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

標題和輸入框左右排列時,InputAutocomplete 短文本聯想組件存在的狀態有:初始態、激活態、報錯態、完成態和禁用態。

設計規范|Web端設計組件篇—文本與選擇器

上下排列的狀態和規則邏輯同左右排列。

設計規范|Web端設計組件篇—文本與選擇器

不含標題的狀態和規則邏輯同左右排列。

設計規范|Web端設計組件篇—文本與選擇器

InputMultiline 長文本

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

使用場景:

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

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

設計規范|Web端設計組件篇—文本與選擇器

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

設計規范|Web端設計組件篇—文本與選擇器

上下排列邏輯和規則同左右排列。

設計規范|Web端設計組件篇—文本與選擇器

不含標題的邏輯同左右排列。

設計規范|Web端設計組件篇—文本與選擇器

select 選擇器

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

使用場景:

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

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

設計規范|Web端設計組件篇—文本與選擇器

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

設計規范|Web端設計組件篇—文本與選擇器

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

設計規范|Web端設計組件篇—文本與選擇器

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

設計規范|Web端設計組件篇—文本與選擇器

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

設計規范|Web端設計組件篇—文本與選擇器

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

設計規范|Web端設計組件篇—文本與選擇器

Loading設計思路分享

博博


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

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

Loading設計思路分享

Loading作為一個常見,并且帶有排他性的動畫,已經被各路大神表現的淋漓盡至。那么如何在眾優秀作品下,做出一個性化的Loading動畫?

Loading設計思路分享

Loading種類:

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

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

By Piotr Adam Kwiatkowski

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

Loading設計思路分享

無狀態類的Loaing以菊花為代表,通常都是一組可以無限循環播放的動畫。

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

我們的App需要一個無狀態的Loading。

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

Loading設計思路分享

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

Loading設計思路分享

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

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

為此我們搜索了一下現實中的扔球效果:

Loading設計思路分享

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

工作路經確定后,導入C4D中進行單球運動軌跡測

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

發現問題:小球在中心焦點位置出現明顯卡頓

起初我們認為是速度曲線沒有調整好所導致的,但我們嘗試幾版后發現并不是這樣,最后我們發現導致這個問題的原因是路經節點問題。

Loading設計思路分享

調整節點

通過調整節點后,不難發現,中心焦點處的卡頓明顯不見了

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

看起來怪怪的。。。。。

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

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

藍藍設計m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

界面欣賞

博博

  • 如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

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

素材源自網絡

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

藍藍設計m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔