亚洲欧美香蕉在线日韩精选_www在线观看美女视频_娇妻的呻吟大团结内裤奇缘_免费a漫禁漫h漫在线

首頁

用Airbnb 的產品,幫你快速理解尼爾森10大可用性原則!

資深UI設計者

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

本文聚焦 Airbnb 產品,描述10大可用性原則的應用場景,希望能夠幫助你更系統地理解10大可用性原則。

一、系統狀態的可見性

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson

系統應該在合理的時間內通過適當的反饋,始終讓用戶了解正在發生的事情。

這項原則通常被遵循并使用在如下幾個場景:

  • 系統導航、Toast。讓用戶明確知道「我在哪」;
  • 按鈕、圖片等元素可被交互的表達與反饋。通過視覺、與空間上的反饋,向用戶傳達頁面元素是可以被交互的,引導用戶前往下一站;
  • 用戶完成交互動作和系統操作后,系統需要給予用戶對應的反饋。比如操作成功、完成注冊等;

Airbnb 的房源詳情頁頂部導航,可以通過點擊快速定位到房源的某類信息,讓用戶清晰地知道「我在哪?我還能去哪?」

在發布房源時,系統頂部模擬了進度條,顯示出了當前步驟,以及當前的發布進度。

二、貼近用戶的真實環境

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.——Nielson

系統應該說用戶的語言,用戶熟悉的單詞,短語和概念,而不是系統導向的術語。遵循現實世界的約定,使信息以自然和合乎邏輯的順序出現。

這項原則說的直白一些,就是:「說人話」。

產品簡單到傻瓜也能操作,是喬布斯和張小龍做產品的核心理念。坐擁10億用戶的微信之父張小龍說過,做產品要有傻瓜心態。不要炫耀自己的智商,不要讓用戶覺得自己是白癡,請用最簡單直白的語言描述狀況;就好比自然世界里,你和他人說話的時候必然使用簡單的白話文進行直白的溝通以保證交流順暢。

在房源的詳情頁、Airbnb PLUS 介紹頁,系統用了大量高質量的攝影圖片傳達一種空間氛圍感。同時,在介紹文案的措辭方面,簡潔易懂,語言邏輯清晰。

三、用戶有控制和來去自由的權利

User control and freedom

Users often choose system functions by mistake and will need a clearly marked 「emergency exit」 to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.——Nielson

用戶通常會錯誤地選擇了系統的某個功能,并且需要一個明確標記的」緊急出口「來離開不想要的狀態,而不必進行擴展對話。支持撤消和重做。

用戶擁有自由使用和控制系統的權利,最為常見的就是系統會為用戶提供「撤銷、重做、返回」的入口。

在故事專欄,當用戶在瀏覽器當前標簽頁進入下一級頁面時,系統都為用戶提供了返回按鈕,一方面方便用戶來去自由,另一方營造出了一定的沉浸式瀏覽體驗。

四、系統的一致性

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson

用戶不應該懷疑不同的話語、情況或行為是否在表達同樣的一件事情。系統設計需遵循平臺慣例。

  • 移動端 APP 內的返回按鈕位置通常會被放在左上角,當然有些 APP 會將返回按鈕統一放在左下角,雖然返回按鈕的位置不同于大多數 APP,但對于此 APP 的返回交互來說,其實還是一致的;
  • 除常用按鈕位置需要符合一致性原則外,icon 的視覺設計也要遵循一致性原則,一個對象對應一個 icon.

在房源、故事集列表頁,系統統一用了卡片式的視覺風格,并且每個卡片里的文字與背景圖片的層次也都保持一致。

在房源詳情頁,系統使用了統一的 iocn 風格和文字風格,傳達房源的設施屬性。

五、防止錯誤

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.——Nielson

比良好的錯誤提示信息更好的方法是:一個走心的設計可以提前防止錯誤的發生。系統要么消除容易出錯的情況,要么檢查它們,并在用戶采取行動之前向用戶提供確認選項。

  • 比如某些操作不能進行,那就置灰或隱藏,不要在用戶點擊后才提醒不能操作。如果有某些內容不能選擇,就置灰或者隱藏,不要等用戶點擊完成時才告知不能使用;
  • 同樣,在用戶容易出現錯誤操作的場景下,需要給出二次確認,如:刪除和取消重要信息的操作。

如果房源在某天或多天已被預定或暫時不開放,則日歷里將這些不可預定的日期置灰。

用戶在修改個人重要信息后,系統會讓用戶輸入密碼二次確認。

六、系統識別勝過用戶記憶

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.——Nielson

通過使用對象,動作和選項的可視化表達,最大限度地減輕用戶的記憶負擔。用戶不應該記住從對話的一部分到另一部分的信息。

  • 為用戶保留查看和搜索歷史是一個很常見的系統識別的例子;
  • 用戶在填寫一個長頁面表單時,系統可以根據實際情況提供一個實時預覽的功能,避免出現用戶填了下面忘了上面的情況;
  • 用戶在填寫完表單(比如訂單頁面)后,系統可以再次向用戶展示所填信息,以最終確認;
  • 用戶為了完成一項目標任務,從一個頁面跳轉到另一個頁面后,系統可以再次展示上一個頁面內與目標任務相關的核心信息,以減輕用戶的記憶負擔。

系統會在首頁第一屏為用戶展示瀏覽歷史(登錄后)。

搜索框也會保留最近5次的搜索歷史。

七、靈活易用的使用體驗

Flexibility and efficiency of use

Accelerators?—?unseen by the novice user?—?may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.——Nielson

一些被精心設計的體驗也許會被專家用戶察覺到,使系統需要能夠滿足無經驗和有經驗的用戶。允許用戶進行頻繁的操作。

當用戶在滾動屏幕瀏覽房源詳細信息時,系統將預定的基本信息(如:價格、日期、人數等)固定在瀏覽器的右側,方便用戶在瀏覽過程中隨時開始預定步驟。

八、美觀和簡約的設計

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.——Nielson

對話中不應該包含無關緊要或很少需要的信息。在對話中每增加一個相對重要的信息,就意味著需要弱化其他信息。

高顏值不需要理由。

九、幫助用戶識別,診斷,并從錯誤中恢復

Help users recognize, diagnose,and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.——Nielson

錯誤信息應該用通俗易懂的語言表達(不要用代碼),較準確的反應問題,并且提出解決方案。

實在無法避免的報錯時,不要單純只是報錯,要提供解決方案。就好比小時候犯錯,你絕不能光說:「啊,我錯了?!估蠋熁蚣议L必然會追問:「錯哪兒啦?」你要是說不出緣由,則必定被認為認錯不誠懇不真心。

當用戶填寫錯誤時,系統會及時給出提示以及解決方法。

十、幫助文檔

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.——Nielson

如果系統能讓用戶不需要閱讀文檔就會使用那是最好的,但通常情況下還是需要幫助文檔的。任何信息應該容易被搜索,且專注于用戶的目標任務,并列出具體的步驟來告知用戶。

  • 對于一些可以用一句話說清楚的幫助,可以直接在對象旁邊提供鼠標懸停出發的 tips,或者簡明的輔助說明;
  • 對于較復雜的,一兩句話說不清楚的幫助,則需要跳轉至對應的幫助頁面;
  • 系統需要有一個幫助中心,為用戶提供模糊搜索、分類搜索,來為用戶提供更全面的幫助。

在個人資料頁面,對于用戶關心的隱私信息,系統會給出非常有親和力的解釋文案。此外,在系統很多頁面都有對應功能的幫助鏈接以跳轉至幫助中心。

系統的幫助中心,提供了搜索和問題分類引導,方便用戶快速定位問題。

△ 本文圖片版權歸 Airbnb 所有

總結

號稱以設計驅動的 Airbnb 公司,的確在產品設計、用戶研究、UX設計方面展現出了較高的功力。網站甚至移動端APP 的框架層、范圍層、視覺層的設計都體現出了高度的用戶體驗一致性和品牌感??梢钥闯?,Airbnb 對 design system 的重視一級高度的執行力。什么是好的產品品牌認知和識別,我可以簡單的理解為:「脫掉」Logo,用戶照樣認識你。

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

UI速遞

藍藍設計的小編

我們不會放過一套好的ui素材,一定會把他們分享出來,而今天分享的就是由云瑞整理的2017年11月新出爐的ui套裝源文件下載,這些套裝都是極簡主義和扁平化風格的,都是當下最流行的,包含web和手機app界面ui,希望對您有用

UI空狀態設計

藍藍設計的小編

UI空狀態404錯誤頁可以幫助網站避免丟失用戶的信任,并正確引導用戶返回其它頁面,減少客戶的流失量。404頁面的設計也是提高用戶體驗的一種表現形式。下面我們以去哪網404頁面為例來為大家具體講解一下404的構成。

UI設計規范

博博


惹不起的設計師 2017-02-20 15:03:14

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


UI設計拋開視覺設計不談,更多的是尺寸、適配等一些問題。這些問題往往是初學者比較難以理解的問題。更多的應用于簡化開發過程、使多個產品擁有一致的體驗,是落到實處的東西。由于負責各個產品線的產品經理并非同一人,如果此時設計師們又是滲透到各個產品組中,那么產品之間的體驗就根本讓用戶感覺不出是一個部門設計開發出來的。規范是大型項目必須的,可以簡化開發成本、減少各個部門之間的溝通成本。

這是你苦苦追尋的UI設計規范,趕快收藏!

這是你苦苦追尋的UI設計規范,趕快收藏!

這是你苦苦追尋的UI設計規范,趕快收藏!

這是你苦苦追尋的UI設計規范,趕快收藏!

這是你苦苦追尋的UI設計規范,趕快收藏!

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


優秀UI界面設計評析

藍藍設計的小編

男生運動鞋商店支付界面,顏色搭配非常舒服,鞋子攝影也很漂亮,字體字號運用非常到位。

ofo《我們看過的世界杯》H5

資深UI設計者

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

項目背景:為了配合世界杯做的H5活動,主題是DIY你的世界杯時刻                                      

玩法:選擇自己看世界杯的場景,可以在畫面當中添加食物和自定義的小元素,另外根據場景的變換人物的腿也可以選擇哦                                                 

項目周期大概半個月,和團隊的小伙伴一起完成的,感謝@珊,@暖暖,@明明   

使用工具包括sketch、ps、手繪板                                                                    

 

ps:做H5真的是很累,工作量大,畫的手疼,不過也積累了很多的經驗,上線了好開心!

請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖

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



2018年UI設計趨勢概覽

博博

2018年UI設計趨勢概覽

嗨兔科技 2018-06-11 10:41:59

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


互聯網產品的用戶界面設計趨勢是根據用戶的不同需求而不斷變化的。在仔細分析了過去幾年用戶界面設計的趨勢和創新之后,我們可以發現其背后的一些規律,2018年UI界面設計的趨勢如下。

2018年UI設計趨勢概覽

漸變色

在過去的幾年里,越來越多的設計師在設計作品時采用了色彩漸變的方法,今年的流體漸變更是風靡全球。即使你只選擇了一種顏色,也可以在色彩漸變和不同圖片的幫助下,營造出出豐富的層次結構感,繪制出一幅令人賞心悅目的畫面。因此,色彩漸變的流行之風不僅在席卷了2017年整年,還將會在2018年繼續流行下去。

2018年UI設計趨勢概覽

icon由線轉面、刻畫細節

現在的ios12中,采用了面性圖標,未選中和選中狀態只有顏色上的區分,并且圖標更加圓潤。目前很多用戶界面已經給頁面底部標簽欄的icon加上微動效底部標簽欄icon不僅有微動效,十分有意思,符合當下95后00后的用戶心態。同時細節的設計帶給用戶的感受也會上一個檔次。

2018年UI設計趨勢概覽

透明度+重疊

字體、圖形以及顏色的重疊,不僅可以使界面看上去更加醒目鮮明,還可以營造出一種空間感。 相同元素的重疊,再輔以陰影,也會使整個APP界面的設計產生更多的奇妙感,牢牢抓住用戶眼球,給他們留下深刻印象。因此,用戶體驗設計中,不同元素的重疊將會成為2018年的趨勢。

2018年UI設計趨勢概覽

卡片+投影相結合

ios12中采用了大圓角卡片設計,它不再像過去MD中的小圓角那樣呆板,大圓角讓設計更加輕快大氣。相信大家已經看到了很多卡片都使用了投影這一手法,輕微的、似有似無的投影,不會被用戶立即察覺,但是會給設計增加深度,形成層疊的關系,更加醒目,可以更好的抓住用戶的注意力。

2018年UI設計趨勢概覽

插畫風格

插畫風格運用的越來越廣泛,適用于app當中的啟動頁、缺省頁、banner圖、專題頭圖、彈窗插畫、icon等等,UI界面有各式各樣的插畫風格——如手繪風格、簡約風格、MBE風格、剪紙風格和孟菲斯風格等。這些插畫風格的使用不僅使APP更加有趣和與眾不同,同時也賦予了用戶界面個性,這就在界面設計層出不窮的當下能夠給用戶留下更為深刻的印象。

2018年UI設計趨勢概覽

較強的顏色或字體大小對比

強烈的顏色或字體對比也可以幫助設計師設計出優秀的用戶界面來吸引用戶的注意。例如,添加不同樣式、類型、大小的字體,也可以傳遞層次和空間的感覺。而不同類型和風格的配色也會形成鮮明的對比,使整個設計更加豐富多彩和引人注目。

2018年UI設計趨勢概覽

3D效果正流行

今年C4D大熱,相信大家已經感受到了,今年雙十一很多商家都使用了3D效果,有的還加上了動效,可以讓你全方位、多角度、更加真實的觀察商品。目前還不會C4D的設計師們,為了提升你的競爭力,有必要學起來了,畢竟技多不壓身。

2018年UI設計趨勢概覽

交互動效

給APP的圖標、字體、照片和按鈕添加動畫或交互總是對用戶有著積極的影響,因為它能帶用戶更多愉快的體驗。它的幾點特性:快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺效果。所以這一趨勢在2018年還將繼續流行下去。

2018年UI設計趨勢概覽

動態視頻

一般小視頻使用在啟動頁多用于第一次打開app的場景,對用戶的代入感較強再如由動態圖片轉變成動態視頻,圖片中有少量的動態元素,仿佛賦予圖片生命,比較唯美和貼近現實。手機banner設計上也會采用動態視頻進行展現,方便360度的查看商品,刺激你剁手的欲望。

2018年UI設計趨勢概覽

VR/AR/VUI是未來的大趨勢

眾所周知,現在VR(虛擬現實)和AR(增強現實)VUI(語音交互設計)大火,它們的核心都是計算機視覺和聽覺。VR目前在娛樂領域被使用,而AR將會真正影響我們的工作和生活,多用于多媒體、市場營銷、教育等方面。VUI在醫療和戶外活動方面會發揮出前所未有的用戶超級體驗。

2018年UI設計趨勢概覽

我們為創造者和變革者而生,我們幫助企業制定用戶體驗策略,為用戶創造精彩的數字體驗,并通過品牌設計與用戶建立情感的連接,用設計驅動商業策略的成功。

2018年UI設計趨勢概覽


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




Win10最具雄心的UI實驗,微軟砍掉了

藍藍設計的小編

IT之家6月28日消息 今天微軟推送了的Windows 10 RS5快速預覽版17704系統,在該版本中,微軟刪除了Sets窗口管理功能,這是一種全新的任務型分組的Windows UI多窗口。被譽為Windows 95以來最大窗口UI變動。

UI按鈕設計發展史

藍藍設計的小編

當我們在網上購物,提交我們個人信息都需要用到按鈕。網頁UI設計的增長很快,風格似乎也是一個月一變。最近幾年,我們經歷過從文 本鏈接到擬物化設計再到扁平化瀑布流設計。導航是網頁設計中最重要的元素,并且按鈕是最重要的行為工具。

各家UI時代一覽

藍藍設計的小編

前方山高水長,我們都在路上。

日歷

鏈接

個人資料

藍藍設計的小編 http://axecq.cn

存檔