中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在這篇文章中，來自UXPin（一款用戶體驗(yàn)設(shè)計(jì)的應(yīng)用程序）的Chris Bank為我們帶來了最近在現(xiàn)代互聯(lián)網(wǎng)和移動(dòng)應(yīng)用中出現(xiàn)的一些優(yōu)秀的用戶界面模式，并將通過實(shí)例展示如何將這些出色的UI設(shè)計(jì)模式應(yīng)用到其他的網(wǎng)站和應(yīng)用中。

畢加索曾說過（喬布斯也曾引用過）： “Good artistscopy, great artists steal.” （通俗的譯文是，好的藝術(shù)家復(fù)制別人的作品，而偉大的藝術(shù)家偷竊別人的作品）。這是最令人費(fèi)解和誤用的創(chuàng)造性短語之一，但在當(dāng)下產(chǎn)品設(shè)計(jì)和產(chǎn)品發(fā)展趨勢(shì)已經(jīng)爆炸的時(shí)代，這也是相當(dāng)重要的一句話。

這句引語的爭(zhēng)議性來源于它的簡(jiǎn)要，因此對(duì)于它的詮釋也具有一定的開放性。內(nèi)容中對(duì)于復(fù)制和內(nèi)在化，原創(chuàng)性和創(chuàng)新性，模仿和同化的區(qū)別沒有講明。然而，這不是懶惰的借口。當(dāng)然，應(yīng)該鼓勵(lì)學(xué)習(xí)他人的作品，站在巨人的肩膀上設(shè)計(jì)自己的產(chǎn)品為特定的人群解決問題－為了那些你終端用戶。

UI設(shè)計(jì)模式－和線框案例，你準(zhǔn)備好了嗎？

Dropbox和Carousel，以及幾乎所有應(yīng)用中都設(shè)有“黏固的”導(dǎo)航，這已經(jīng)是一個(gè)通用的移動(dòng)設(shè)備用戶界面的設(shè)計(jì)模式。通過這種設(shè)計(jì)模式，用戶在瀏覽過程中無需再一路滾動(dòng)返回到先前主題。例如許多應(yīng)用程序已允許用戶觸按移動(dòng)設(shè)備屏幕頂部的區(qū)域以實(shí)現(xiàn)快速返回到頁面最上端這一功能（因此用戶不需要再一陣長(zhǎng)翻頁來回到頁面頂部）。但與Pinterest中設(shè)專門有“scrollto top”標(biāo)簽的做法不同的是，在大多數(shù)應(yīng)用程序中通常對(duì)于這一項(xiàng)功能都沒有明確的視覺指示。作為一個(gè)網(wǎng)頁開發(fā)者，沒有必要將所有用戶所需的相關(guān)鏈接都放到頁面上?，F(xiàn)在，許多傳統(tǒng)的固定檢索已經(jīng)可以被直接加載到任何頁面或視圖中了（以前可能只有導(dǎo)航頂部才有）。如下圖中的Dropbox和Carousel，以及上文中我們已經(jīng)討論過的UXPin線框圖。

垂直導(dǎo)航（雖然不是標(biāo)準(zhǔn)模式）是網(wǎng)頁和手機(jī)應(yīng)用中常用的視圖方式，如Facebook和Mailbox。垂直導(dǎo)航這種交互模式除了幫助用戶尋找有關(guān)產(chǎn)品、企業(yè)的信息和數(shù)據(jù)外，通過一個(gè)流動(dòng)式的單獨(dú)頁面，用戶可以在應(yīng)用中自由切換到網(wǎng)頁的其他模塊。抽屜式就是垂直導(dǎo)航的案例之一，現(xiàn)已被廣泛應(yīng)用在移動(dòng)設(shè)備的UI設(shè)計(jì)中。

和切換（toggling）相類似，抽屜式是一種UI設(shè)計(jì)趨勢(shì)，考慮到移動(dòng)設(shè)備屏幕的約束以及用戶對(duì)于速度的需求。在應(yīng)用中，每一個(gè)滑出式的抽屜都是一個(gè)獨(dú)立的“層次”，其實(shí)并沒有太多限制，我們依舊可以看到很多多樣的設(shè)計(jì)，包括一些可怕的設(shè)計(jì)。

Yelp就是一個(gè)試圖將所有相關(guān)鏈接都排布在程序頁面上的典型案例。盡管他們UI設(shè)計(jì)模式中的功能很詳盡，在電子刊物中似乎想要用盡所有可能的交互方式，例如滑動(dòng)，點(diǎn)按，框選，撤銷，返回等等。但事實(shí)上，諸如此類包含很多內(nèi)容的應(yīng)用程序的模式，如Flipboard，有時(shí)反而會(huì)使程序應(yīng)用更加混亂。下圖中，我們用UXPin為這種設(shè)計(jì)模式制作了一個(gè)線框分析。

Carousel中不僅有一個(gè)可視的滾動(dòng)操控條，在其底端還有一個(gè)很明顯的控制條，這使用戶可以很愜意地在百萬張照片中自由瀏覽。隨著由用戶自行產(chǎn)生的內(nèi)容、動(dòng)態(tài)、群組、列表越來越多，更多創(chuàng)新的UI設(shè)計(jì)模式也會(huì)超越傳統(tǒng)的搜索方式以幫助用戶及時(shí)找到他們想要的內(nèi)容。

在Tinder應(yīng)用中，內(nèi)容之間的切換是無縫響應(yīng)的，用戶只需要通過點(diǎn)擊視圖界面中的主圖就可以切換到該圖的詳細(xì)信息頁，再通過點(diǎn)擊圖片回到原來的基礎(chǔ)頁。這種UI設(shè)計(jì)模式為用戶創(chuàng)造了極致流暢的、本能的用戶體驗(yàn)流程。同樣，在OKCupid中也用到了這種方式。

在Uber中，僅通過橫縱向拖曳的方式，用戶就可以很流暢地在四類汽車接送服務(wù)中切換。這種UI設(shè)計(jì)模式還可以讓用戶看見可選擇的車輛數(shù)量，并通過放大和縮小畫面來了解選擇地區(qū)的車輛密度。

當(dāng)用戶選定了一種接送服務(wù)后，通過敲擊按鈕可以在預(yù)訂的同時(shí)還可以查看到相應(yīng)的預(yù)估費(fèi)用。這是一個(gè)非常簡(jiǎn)單但很重要的設(shè)計(jì)，因?yàn)槊慨?dāng)我們?cè)陬A(yù)訂接送時(shí)，還會(huì)做一些其他的事情，這個(gè)費(fèi)用查看設(shè)計(jì)可以讓我確保Uber沒有隨意改動(dòng)價(jià)格。

RelateIQ用壓低主菜單的方式以快速突出副菜單的導(dǎo)視。RelateIQ屬于目前市場(chǎng)上最復(fù)雜的公司移動(dòng)應(yīng)用之一，因此他們要與現(xiàn)有的、新的應(yīng)用的UI設(shè)計(jì)相區(qū)別，帶給用戶快速、清新、簡(jiǎn)易的體驗(yàn)，同時(shí)不以犧牲他們的產(chǎn)品信息為代價(jià)。

Snapchat中可以發(fā)現(xiàn)隱藏的信息－點(diǎn)按snapshat頁眉－可以看到已接收信息和未讀信息的數(shù)量。這難道不是一個(gè)很簡(jiǎn)易的UI設(shè)計(jì)嗎？

Yelp應(yīng)用中，向下拖動(dòng)頁面時(shí)，可以從具體的商家信息列表過渡到一張被掩藏在上端的半透明圖示。半透明式和響應(yīng)式的設(shè)計(jì)創(chuàng)造了極好的體驗(yàn)，這種方式也有可能是目前最鮮為人知但又相對(duì)高級(jí)的UI設(shè)計(jì)模式了。希望有更多設(shè)計(jì)師可以考慮運(yùn)用這種方式！

在Secret中，用戶需要采取一些行動(dòng)來發(fā)現(xiàn)導(dǎo)航欄－即右端滑屏，但這種UI設(shè)計(jì)可以最小使用抽屜式和滑出式，下面的鏈接中有我們用UXPin做的線框案例。

Linkedin的app中，用戶可以在任何時(shí)候點(diǎn)按頁面左上角的logo（通常是一個(gè)三線“漢堡式”菜單圖標(biāo)）來獲取這個(gè)輔助導(dǎo)航。這種UI設(shè)計(jì)最初在Facebook的移動(dòng)應(yīng)用中流傳，隨后又被如Path，F(xiàn)ancy和其他類似的公司采用。這是一種將相對(duì)次要的信息隱于“側(cè)抽屜”中的一種簡(jiǎn)單方式，不必?fù)?dān)心移動(dòng)應(yīng)用該如何分辨出最重要的信息。你只需要考慮如何當(dāng)用戶訪問時(shí)，在這個(gè)“側(cè)抽屜”的每一個(gè)視圖信息中能讓用戶抓取到最重要信息。下方也有我們用UXPin做的線框案例。

Snapchat是為用戶創(chuàng)造沉浸式體驗(yàn)而采用最簡(jiǎn)化導(dǎo)航群組的案例之一。在Snapshat中，四個(gè)傳統(tǒng)的菜單按鈕被更主要的1-2個(gè)按鍵圖標(biāo)取代，這些圖示會(huì)隨著菜單視圖的切換而改變。然而在應(yīng)用中切換菜單視圖也十分簡(jiǎn)單方便，用戶可以通過點(diǎn)按這幾個(gè)主要的圖標(biāo)，亦可以通過左右滑動(dòng)屏幕。這是UI設(shè)計(jì)模式中十分獨(dú)特的實(shí)現(xiàn)方式，對(duì)于如此簡(jiǎn)單純粹的操作方式，筆者在其他應(yīng)用中鮮有遇見。

“卡片”模式是通過Pinterest應(yīng)用而普及的，它是一種適應(yīng)響應(yīng)式設(shè)計(jì)趨勢(shì)，以一種非常優(yōu)雅的形式排布錯(cuò)綜復(fù)雜的社區(qū)反饋信息的，用以吸引用戶瀏覽網(wǎng)頁信息的設(shè)計(jì)模式。在“卡片”模式下，看起來無論任何碎片式的信息都可以被調(diào)配到“卡片”中。但是，也有很多“卡片”模式的實(shí)現(xiàn)方式實(shí)在很令人擔(dān)憂，尤其是Pinterest的一些所謂的競(jìng)爭(zhēng)對(duì)手，它們除了（出于好奇心地）真正理解Pinterest使用“卡片”模式的真正緣由，其他各種嘗試幾乎都做了。筆者在2013年末事實(shí)上已經(jīng)比較過他們的深層區(qū)別，在此我們也用UXPin為這個(gè)設(shè)計(jì)模式制作了線框案例。

Lyft和Yelp應(yīng)用以地圖作為背景視圖，這種在本地應(yīng)用中賦予當(dāng)?shù)靥匦缘姆绞娇梢约由顟?yīng)用本身的意義。隨著本地應(yīng)用的普及，以及在地圖視圖上可以加載的層級(jí)信息增多，這種設(shè)計(jì)模式也必將成為一種趨勢(shì)。并且全面的體驗(yàn)?zāi)Ｊ浇K將取代單一的形式，更多以視頻、圖片以及其他媒介為背景的UI設(shè)計(jì)模式也將廣為流傳。我們同樣用UXPin做了一個(gè)線框案例。

FacebookMessenger和Instagram都采用圓形視圖來勾勒用戶縮略圖，這種形式從某種程度上說是從Google+中推廣而來，后又被Path加以改善的。雖然相較于傳統(tǒng)方形縮略圖，圓形模式除了徒增了一些變化外沒有明顯其他的得益處，但是作為一種“生活調(diào)味劑”式的改變，圓形用戶縮略圖還是受到了廣泛歡迎。我們同樣用UXPin做了一個(gè)線框案例。

Secret認(rèn)為界面中的元素之間應(yīng)該不留白邊，采用相互堆疊的全出血（無邊距）圖片，在它們的頂端放置一些重要的信息。從某種意義上說，這些圖片也充當(dāng)了背景的角色，而且相較于Pinterest，這種不留白邊的模式，可以減少易分散用戶注意力的設(shè)計(jì)細(xì)節(jié)。

Pinterest和Sptify告訴用戶可以通過點(diǎn)按由“＋”轉(zhuǎn)變?yōu)椤皒”符號(hào)來分別完成“添加關(guān)注”以及“取消關(guān)注”的操作。這種UI設(shè)計(jì)模式節(jié)省了頁面空間，使得撤銷操作很方便迅捷，同時(shí)也是一個(gè)有趣好玩的解決方式。

在移動(dòng)應(yīng)用中，元素轉(zhuǎn)變和切換動(dòng)畫是十分重要的。你可以1）完全用另一個(gè)具有不同功能的符號(hào)替代，如“添加”和“取消”，2）直觀地連接元素，如當(dāng)用戶點(diǎn)擊放大一張圖片時(shí)漸隱四周的元素，3）給予一個(gè)視覺反饋，如在可拖動(dòng)的標(biāo)簽之下置于一個(gè)透亮陰影。

Asana（2008年達(dá)斯廷·莫斯科維茨離開Facebook，與賈斯丁·羅森斯坦一起創(chuàng)辦了Asana，一款為了改善團(tuán)隊(duì)交流和協(xié)作方式以提高工作效率的任務(wù)管理類應(yīng)用）中，用戶可以直接操控內(nèi)容，例如在其網(wǎng)頁版中，通過鼠標(biāo)“點(diǎn)擊并拖移”或利用快捷鍵的方式拖動(dòng)任務(wù)條；在移動(dòng)應(yīng)用中，通過“點(diǎn)按拖動(dòng)再放置”的方式將任務(wù)放置到任意一處用戶想放的位置（這中方式可以有效替代鍵盤快捷鍵操作）。如果用戶有非常多的任務(wù)需要完成，那么也許其他的模式會(huì)更好。但對(duì)于大多數(shù)用戶來說，這種模式可以很有效滿足用戶以幫助他們重新安排任務(wù)列表。我們用UXPin為這個(gè)設(shè)計(jì)模式制作了線框案例。

Tinder和Carousel利用可拖拽的圖片讓用戶完成點(diǎn)贊、分享或者隱藏等操作。Tinder上大大的按鍵讓用戶在任何時(shí)候都可以明確、快速地選擇。在Tinder中，將照片拖動(dòng)至右側(cè)或者點(diǎn)擊右邊的愛心表示“贊”，將照片拖至左側(cè)或者點(diǎn)擊左邊的叉表示”不喜歡”。在Carousel中，上滑圖片表示分享，下滑圖片表示隱藏。這個(gè)“贊或不贊忙不?！钡腢I設(shè)計(jì)模式，作為Tinder應(yīng)用的核心模式使其成為了最出名的案例之一。我們用UXPin為這個(gè)設(shè)計(jì)模式制作了線框案例。

在郵件類應(yīng)用中，側(cè)滑動(dòng)作因Mailbox而被廣為使用。通過側(cè)滑，用戶可以標(biāo)記已讀郵件，分別管理后續(xù)的各項(xiàng)郵件操作。這種UI設(shè)計(jì)模式很受用戶歡迎并且很高效，難怪Mailbox在上線僅一個(gè)月后就被Dropbox以1億美金收購。

Instagram讓用戶發(fā)覺更快速的操作方式，例如雙擊圖片點(diǎn)贊而不是往下滾動(dòng)點(diǎn)擊“贊”的按鍵。其實(shí)我個(gè)人不太喜歡沒有撤銷命令的UI設(shè)計(jì)模式，但至今為止，這是唯一看到通過輕擊圖片內(nèi)容來標(biāo)示的案例了。我相信許多實(shí)際很丑的圖片會(huì)被意外地喜歡也是因?yàn)檫@個(gè)方便的點(diǎn)贊模式。我們用UXPin為這個(gè)設(shè)計(jì)模式制作了線框案例。

Snapchat和FacebookMessenger讓用戶只需通過向左滑動(dòng)好友頭像就可以獲得應(yīng)用的其他特性。在Snapchat中，用戶可以通過這種方式一次性刪除多個(gè)好友－我將其稱之為”消失的好友”。FacebookMessenger中，通過左滑，用戶可以發(fā)現(xiàn)更多應(yīng)用特性，包括一個(gè)名為“more”的子菜單。有趣的是，用戶可以在“delete”中選擇存檔或是刪除對(duì)話這兩項(xiàng)功能，在大多數(shù)UI設(shè)計(jì)中，用戶是沒有這樣的選擇的，存檔選項(xiàng)往往是在“more”的子菜單中。我們用UXPin為這個(gè)設(shè)計(jì)模式制作了線框案例。

Secret讓用戶以發(fā)現(xiàn)新菜單的方式發(fā)現(xiàn)新的操作命令。左滑為“贊”，但右滑并不是“不喜歡”，而是一個(gè)隱藏菜單。我個(gè)人很喜歡這個(gè)模式雖然它與通常的模式不同，甚至需要一些腦力去記住右滑是一個(gè)菜單而不是“不喜歡”或者“隱藏”。

Secret在創(chuàng)建內(nèi)容頁面上有一些“可被發(fā)覺的”工具。在用戶上傳一張圖片之前，左右滑動(dòng)可以改變背景顏色，上下滑動(dòng)可以改變樣式。當(dāng)用戶上傳一張圖片后，這些操作動(dòng)作會(huì)更形象生動(dòng)：頁面右邊從上滑向下方，可以使頁面變暗；頁面左邊上下滑動(dòng)可以改變圖片飽和度；左右滑動(dòng)改變圖片清晰度。應(yīng)用中沒有其他具體的控制鍵會(huì)告知用戶有這些改變－也不應(yīng)該有。這是一種基于用戶直覺的，簡(jiǎn)約的UI設(shè)計(jì)模式，你必然會(huì)遇到更多。

越來越多的應(yīng)用會(huì)為用戶提供好友列表，Snapchat和Yelp便是如此。無論是一對(duì)一的交流還是追隨某人的品味和偏好，無論是網(wǎng)站還是移動(dòng)應(yīng)用的體驗(yàn)，都需要好友的參與，用戶探索他們的朋友圈的方式也將變得更加全面整體。我相信社交圈的UI設(shè)計(jì)模式將會(huì)遵循一個(gè)與現(xiàn)有UI設(shè)計(jì)模式相似的軌跡，因?yàn)槠骄恳晃痪W(wǎng)站或移動(dòng)用戶至少有數(shù)以百計(jì)的朋友和數(shù)以千計(jì)的跟隨者。

Songkick和Flipboard是讓用戶擁有良好“follow體驗(yàn)”的案例。無論用戶是否有好友，都會(huì)不斷自行產(chǎn)生新的可關(guān)注內(nèi)容。與好友列表將成為一個(gè)越來越重要的UI設(shè)計(jì)模式的原因一樣，良好的“follow體驗(yàn)”也同樣重要。

Quora和Venmo是我最喜歡的活動(dòng)咨詢反饋應(yīng)用，因?yàn)椤皩W(xué)習(xí)”和“收獲”是人生中兩件很重要的事情。我對(duì)大家討論的各類話題以及提出的有意思解答可以看得入神，感謝這個(gè)UI設(shè)計(jì)模式，我可以收獲很多。

Carousel、Instagram，以及其他一些應(yīng)用會(huì)提供聊天或直接對(duì)話體驗(yàn)，這是作為整個(gè)應(yīng)用體驗(yàn)的一部分。私聊的UI設(shè)計(jì)模式將繼續(xù)時(shí)興，由于用戶會(huì)越來越適應(yīng)在網(wǎng)上分享更多私人信息，私聊將不再僅僅是傳統(tǒng)的“社交網(wǎng)絡(luò)”，而會(huì)產(chǎn)生更多更廣的內(nèi)容與服務(wù)，甚至是財(cái)務(wù)交易，如Venmo。

Medium，如其他許多應(yīng)用一樣，并合使用了“分享”小工具，通過一個(gè)單獨(dú)的分享圖標(biāo)，帶給用戶完美的體驗(yàn)和明確的分享操作指示，忽略那些分享到的地方，這對(duì)我來說是一個(gè)雙贏的UI設(shè)計(jì)模式。

YouTube和幾乎所有都應(yīng)用都是讓用戶贊（或是不贊）這種二選一的形式，而不是用打星或者其他的評(píng)級(jí)方式。雖然乘車共享應(yīng)用如Uber和Lyft目前在用評(píng)級(jí)系統(tǒng)，但最終他們會(huì)更趨向于二選一的評(píng)定方式－即接受或者不接受駕車。因?yàn)檫@是最為簡(jiǎn)練地在網(wǎng)站或移動(dòng)應(yīng)用中組織內(nèi)容的方式之一，這種方式會(huì)繼續(xù)持續(xù)下去－我個(gè)人希望標(biāo)簽的組合可以讓用戶不費(fèi)更多的力氣就可以分別發(fā)現(xiàn)他們最喜歡的喜劇演出和音樂視頻。我們用UXPin為這個(gè)設(shè)計(jì)模式制作了線框案例。

Youtube和Facebook Messenger讓用戶群組相似的好友和內(nèi)容。因?yàn)閮?nèi)容有很多形式－包括好友檔案－并在不斷增補(bǔ)變化，也需要用戶有一定的組織統(tǒng)籌能力。我對(duì)如何讓這些不同的應(yīng)用最終融合成另一個(gè)，并有一組新的UI設(shè)計(jì)模式而感到有些好奇。

Venmo通過手機(jī)和email聯(lián)系人的整合，讓邀請(qǐng)別人更加容易。因?yàn)樵谙M(fèi)類應(yīng)用中，口口相傳和相互推薦是消費(fèi)增長(zhǎng)的巨大推動(dòng)力，你將會(huì)看到更多類似的模式。

如果時(shí)機(jī)合適，請(qǐng)大膽借鑒。。。

不要害怕借鑒或模仿這些設(shè)計(jì)－但是你要學(xué)會(huì)如何把他們變成自己的設(shè)計(jì)，為你的用戶解決實(shí)際的問題，讓他們熱愛你設(shè)計(jì)的產(chǎn)品。

因?yàn)楫a(chǎn)品的設(shè)計(jì)趨勢(shì)變化很快，各種設(shè)備也從網(wǎng)站到移動(dòng)應(yīng)用日新月異，你需要更綜合地思考如何設(shè)計(jì)產(chǎn)品。所幸的是，很多人和你一樣在做同樣的事情，因此已經(jīng)有很多案例可以學(xué)習(xí)，包括上文中我們舉出的案例。

為了結(jié)束這個(gè)話題，我最后想說的是－設(shè)計(jì)原則。在線框案例中的設(shè)計(jì)原則，將會(huì)助你設(shè)計(jì)更好的線框，更完美的產(chǎn)品。

原文：[CHRIS BANK]

本文由 @BESD設(shè)計(jì)實(shí)驗(yàn)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。