<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          系列位置效應在UI界面中的應用

          濤濤

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

          系列位置效應大家可能有點陌生,因為它不像格式塔那樣被大家熟知,但是當我看了它的概念之后,我決定和大家分享一下。


          Image title

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



          產品設計中“+”功能的相關思考。

          濤濤

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

          日常工作中,有很多看似平凡的小細節,常被大家忽視,卻影響著用戶的真實體驗。比如,前幾天跟同事們針對產品設計中“+”功能所運用的場景、展開形式進行討論,發現這是一個挺有意思的話題。


          所以跟大家分享下,我的一些相關思考。






           1. “+”的運用場景 


          我們常見的產品中,采用“+”功能的場景,大致分為兩種:a.(上傳)內容選項;b.(聚合)快捷功能。



          a.(上傳)內容選項


          根據“+”的直觀表意,大致也能猜到它的運用跟“添加”、“上傳”某個東西相關。

          比如:微博,點擊“+”入口后,是選擇所要上傳的內容類型。(可以曬自己精修X小時后媽都認不出來的自拍、也可以曬逗比的小視頻、或者老子就想搞一場直播)。



          比如:下廚房左上角的“+”,點擊后,是選擇上傳作品,或者創建菜譜的選項。




          再比如:工具類產品:Google drive,dropbox、百度網盤、微云,點擊“+”后,同樣是選擇上傳不同文件的入口。 


          可以看出,這種情況下的“+”功能,多指“添加”、“上傳”的含義,所承載的內容,是同一緯度下的不同選項。





          b.(聚合)快捷功能。


          眾所周知,產品為了節省界面空間,同時避免過多功能給用戶不必要的干擾,會選擇把一些不常用的快捷功能收到二級展示。常見的產品中,他們選擇把這些快捷功能塞進“+”里。


          那么,你是不是覺得“+”功能跟“…”功能承載的內容是一樣的?比如:樂趣首頁右上角“...”,同樣是對頻率較低的功能的集合。





          那為什么有的產品不直接用“...”,還是選擇用“+”呢?


          通過分析發現,“+”雖然也是聚合快捷功能的入口,但承載的功能有一個共性:都是圍繞著用戶主動打開、發起、新建...等操作進行的,因此用“+”更貼切。


          比如:微信里的“+”,包含著:“發起群聊”,“添加朋友”,“掃一掃”,“收付款”,其實都跟“添加”有關。 




          比如:淘寶也是類似的處理方式。


           



          再比如:愛奇藝的“+”,里面包含的也是跟“添加”,“上傳”相關,像上傳視頻、掃一掃、我要直播….





          反過來看“...”,它聚合的功能,大多是相互關聯較弱,且沒有主動添加、上傳等含義的。因此,用一個相對模糊,沒有指向性的符號詮釋,更為合適。





          由上可以看出,在這種情況下,“+”作為聚合快捷功能的入口,包含的是頻率較低,且跟主動“新建”、“發起”、“掃描”等相關的功能。





           2. “+”的展開方式 



          當用戶觸發界面中的“+”時,常見的展開方式有3種,分別是:a.氣泡彈出框;b.動態欄;c.沉浸模式。



          a.氣泡彈出框


          氣泡彈出框,這個控件又常被稱為Popover,一般是由一個矩形和三角箭頭組成的彈出窗口,通過點擊Popover內的按鈕或者非Popover的屏幕其他區域可關閉。 


          比如,以微信為代表的“+”的展開方式,采用的就是Popover。一般用于聚合快捷功能。優點是觸發“+”到Popover的距離很近,操作順手,效率高(更像是導航的延伸)。





          b.動作欄


          動作欄,這個控件官方稱之為Action Sheet,是用戶觸發“+”后,出現的一種模態彈出框,里面包含一組與當前情景相關的選項,一般用于上傳內容選項。 


          在iPhone屏幕上,為了便于單手持握時操作,Action Sheet通常占據屏幕底部區域。



          比如:以Google drive、Dropbox為代表的產品,需要選擇上傳文件類型的選項。




          在這個部分,同事們討論有些爭議點,在于:google drive 和 Dropbox或者微博,它們的加號本來就在底部,所以彈窗讓用戶感覺視線統一。




          而有的產品“+”在上面,彈窗從底部出來,擔心注意力切換和手指移動的路徑比較長,顯得割裂。


          帶著這個問題,我調研了下有類似情況的產品,會不會讓人覺得不舒服。


          后來發現,不會的。原因在于我們常用的、擁有10億+用戶的微信,發朋友圈時操作就是這樣,而我們并沒有感覺很割裂,反而已經習慣。




          同樣,iPhone自帶的“提醒事項”App,也是這樣處理。




          后來看了規范發現,iOS確實意識到在iPad上,如果繼續將Action Sheet顯示在屏幕底部,如果頻繁操作使用會比較累。因此,做了特殊處理。而手機屏幕上以底部為主,同時點擊空白區域取消的操作,也是系統用戶所熟知的。



          總的來說,操作欄適合承載同一緯度下的內容選項,同時,就算“+”在頂部,采用底部動態欄,體驗上也是沒問題的。




          c.沉浸模式


          沉浸模式,指的是當觸發“+”時,用戶在全局蒙層上進行功能操作,同樣適用于上傳內容選項。


          優點是拓展性更強,體現在:1.提升收益;2.品牌認知;3.內容運營。




          1.提升收益


          比如:微博,采用沉浸模式,下面是上傳不同狀態類型的入口,上面可以增加廣告收入。




          再比如:微云,在沉浸模式下,可以植入自己的“會員”廣告,從而提升會員轉化。





          2.品牌認知


          比如:有道云筆記,在頂部的空間內,宣傳自己的品牌slogn:“記錄,成為更好的自己”,是一種品牌情感化的傳遞。  



           


          3.內容運營


          像“好好住”,它們在這個頁面加入“話題”運營推廣。從而給UGC內容模塊帶節奏。





          大多數產品都想營造社區氛圍,建立用戶關系,從而增加用戶粘性,提升產品留存。

          但要想擁有濃厚的社區氛圍,首先要有內容、才有人愿意看、才有人在里面互動。

          現實問題是,有很多用戶有想發狀態的心,但不知道發啥,從而放棄。因此,我們應該作出相應的引導。


          比如,“好好住”在發布環節,增加話題運營“#每天一張生活日常#”入口,就是解決剛才說的“用戶不知道發什么”的問題。運營同學想點子、造話題、帶節奏,從而提升用戶的發布量。

          因此可以看出,“沉浸模式”,對于那些有拓展需求(收益、品牌、運營)的產品更適用。


          不知道你有沒有發現,相比國外,國內采用這種“沉浸模式”的產品偏多。或許在中國這個互聯網競爭如此激烈的大環境下,大家不愿意放棄任何一個能夠運營或留住用戶的機會。 



          總結 



          總的來說,在常見的產品中“+”功能的運用場景有:(上傳)內容選項、(聚合)快捷功能;它的展開方式可分為:氣泡彈出框(適合承載快捷功能)、操作欄(適合容納內容選項)、沉浸模式(容納內容選項的同時,拓展性更強)。其實,交互形式沒有好壞之分,只有哪個更適合自己的內容需求和產品目標,正如Louis Sullivan所說:“形式追隨功能”。


          小tips:日常工作中有太多類似“+”這種,看似一個不起眼的小功能,被大家忽略。我們習慣性看一下競品,拍腦袋決定方案。


          但是,慢慢你會發現,只有深挖和分析這些所謂的“小細節”,才能知道別人這么做背后的原因、才能舉一反三的去運用、才能更好的兼顧統一性和拓展性,而不是停留在浮于表面的模仿。


          希望這篇文章對你有所幫助。 

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

          贊不絕口的MIUI10,背后的設計故事揭秘

          濤濤

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

          在 MIUI 10 的內測反饋中,設計上的耳目一新是眾口稱贊的部分。近日,MIUI設計總監 Gary 和幾位核心設計師一起接受了我們的采訪,開誠布公地介紹了 MIUI10 設計背后的故事。

          這次的采訪我們聊得很細,細到某一個交互的設計思路的變遷,以及為什么最終是以那種方式呈現在 MIUI 10 之上。我相信,無論你是對設計還是對手機系統存在好奇,一定都可以從這次訪談里得到一些有益的啟發。因為我們沒聊虛的。

          △ MIUI設計團隊

          一、徹底干掉虛擬鍵的全面屏手勢是不是太激進了?

          △ 虛擬鍵不該存在

          是不是太激進我們還是根據用戶反饋來判斷,這套手勢因為沒有任何虛擬鍵的提示,剛開始確實需要一兩分鐘來學習,但大部分的用戶反饋是:用了就回不去了。目前從客觀上來講,安卓手機里的全面屏手勢,MIUI 確實是最好用的,不是我們自己說,而是從各種用戶反饋,包括微博上很多專業數碼博主的反饋得來的結論,很多人在主動地說這件事。

          但是在手勢的設計上,我們是踩過很多坑的。

          我們嘗試過很多版本的全面屏手勢,最初還沒有大膽到想干掉所有虛擬鍵,而是想在虛擬鍵上做文章。開始我們覺得那個區域很多時候3個 button 可能用不上,比如看書的時候,你可能只需要一個返回鍵,所以我們考慮的是在某些特定的應用場景里把一些用不到的虛擬鍵收起來,這是做減法,減法做完之后,原來虛擬鍵的位置就空出來了,我們覺得這個空間是浪費的,又在想應該怎么利用起來,這是早期一個很復雜的思路。

          △ 早期帶橫桿的產品

          后來我們又想是不是可以把3個鍵整合成一個虛擬鍵,當初做了一個 Demo,把3個鍵集合成一個橫桿,那個時候還沒有看到 iPhone 的模型,在 iOS 的全面屏手勢出來之前,我們就做了一個橫桿子,其實是受 Palm 的啟發,這根桿子很早之前 Palm 就有了,蘋果可能也是受 Palm 啟發。我們設計的是在那個桿子上橫滑返回,然后上滑回桌面,很接近蘋果目前的處理方式。但最終還是把這個設計給放棄了,去掉的原因是:提示桿一開始是有比較好的引導操作作用,但一段時間后,用戶就不需要了,另外就是視覺感官上橫桿并不好看,工業設計上好不容易才能把手機下巴縮短幾毫米,你一根橫桿又全給它加回來了,這其實背離了「全面屏」的初衷,在設計上是一種不得已而為之的妥協。

          否定橫桿之后,我們才真正全心考慮干掉所有虛擬鍵的方案。但沒有虛擬鍵,就對我們的交互設計提出了很高的要求,首先,這個手勢的出發點一定得非常符合直覺,所以不管是返回上一級菜單也好,回到桌面也好,這必須是兩個最基礎的操作(橫滑、上滑),在這兩個基礎操作上略做停頓,我們就可以進入應用間的快切和多任務管理,我們用一種非常輕的設計把它附著在兩個基礎交互上。徹底干掉虛擬鍵這件事最早我們沒有太大的勇氣去做,最后做出來反倒更貼近用戶操作手機的直覺,有一種柳暗花明的感覺。

          △ 簡潔易用的MIUI全面屏手勢

          二、MIUI 10的整體視覺設計遵循了什么思路?

          △ 為全面屏而重新設計

          在天氣、日歷、安全中心等等 MIUI 10 的各個角落里,其實都把原來分段式的畫面結構做了一個全面屏化的設計,讓頁面不要有很強的割裂感。讓內容直接浮在屏幕上,用戶第一時間得到信息,去掉干擾元素。

          在非全面屏時代,手機有上下兩個比較大的黑色邊框,在視覺上天然是分段式的,之前屏幕內的多色塊設計其實是對應了手機外觀的這種「分段」,它還是和諧的,但原樣搬到全面屏手機上,就顯得是把一整塊完整的屏幕生生分割成了幾段。

          另外就是原來有一些插畫類型的風格和表達手法,想讓整個畫面有一些親和力。但是因為我們的用戶覆蓋面很大,兩三億用戶,會有一些年齡層的用戶覺得原先插畫形式有些稚嫩感。所以我們覺得到10這一代,整個系統應該更成熟、更普適一些,我們更傾向于做一個對任何人來說都很舒服的視覺設計。

          三、這次整體視覺風格有比較大的變動,有沒有什么地方特別花費精力的?

          舉個特別細節的例子。MIUI 10 的時鐘,有一部分用戶會有疑問:在 MIUI 10 里,可見的大多數頁面是亮色,為什么進入時鐘時卻是黑色的?我們其實也在白色和黑色反復了很多次,調研也做了很多次。最終我們認為更重要的是時鐘的使用場景問題,比如說你晚上在睡覺前拿起手機定個鬧鐘,在夜晚或者室內,從手機桌面進來打開時鐘,如果進入一個很亮的頁面,它即便是好看的,也可能會刺眼。所以我們還是選擇了黑色,當然那個對比度到現在還在調整,我們想把視覺上的美觀和使用的舒服統一進來。

          四、MIUI 10的自然音效系統是發布會上的一個驚喜,你們為什么會想到去做音效?

          我明白你這個問題的意思,大部分人的手機是長期靜音的,音效這個東西,好像已經被完全忽略了。但是我們覺得,哪怕只有1%的用戶打開了手機鈴聲,他也應該感受到悅耳而不是打擾和膩煩。如果我沒記錯的話,我們是手機廠商里第一個針對音效做系統性設計和優化的,我們從「百聽不厭」的自然系音效出發,和得過格萊美獎的頂尖音樂人合作,還針對手機音腔的特性對音效做了特別的優化。

          發布會上洪鋒把自然音效系統作為一個彩蛋來講,這是我們送給小米手機用戶的一個禮物,是讓我們驕傲的產品。我不確定有多少用戶會發現這個產品,有些人可能因為長期靜音他沒有機會接觸到這個新設計,但它是一個能帶給人驚喜和溫暖的東西。

          五、MIUI的設計理念是什么?

          有些人可能會覺得設計是一個偏感性的、依賴審美的東西,但是對于一個好的系統設計,我會從視覺、動效、交互、字體、音效,五個維度的去衡量它的完善程度。

          我們用一個人來做類比。視覺,就是感官層面的,比如說你見到一個人會說:這個人很帥;第二就是交互層面的整體邏輯,就好比你跟他說話,發現他的腦子清楚;第三就是整個動效的層面,這個人的肢體語言很優雅;還有字體,我們是從 MIUI8 的時候就開始做了,為了讓大家有更好的閱讀體驗,讓人覺得你這個人很有涵養,這已經深入到非常細節的層面了;最后,我們加了一個聲音的系統,就是你說話的時候,聲音還要好聽。MIUI 在設計上一直是往多個方面進化,我們并不滿足于做出某個漂亮的頁面或者交互,而是追求整個體驗層面的飽滿。

          做設計過程中,我們可能會嘗試各種各樣的方案,也有靈光乍現的時刻,但我們會從多個維度完整地去考量這個設計成果,避免做出一些只是「看上去很美」的自嗨的東西。實際看起來、用起來、聽起來怎么樣,我們想從這幾個大的感官維度上都能達到體驗層面的滿足。

          舉一個例子:比如說之前我們為了快去掉了一些解鎖的動畫,用戶一按指紋解鎖,直接進到桌面,這種確實是非常的快,但這種感覺就像什么呢?就像你一按電梯,門就消失了,你進了電梯,它咔一聲又關上了,是很快,但是這種觀感是不太好的。它沒有一種歡迎的意識,就只是把東西呈現給你。這一次我們希望把這個東西改回來,當你進入手機桌面的時候,圖標應該有個簡短的優雅的動態,有一個進場亮相的過程。

          △ MIUI動態圖標

          MIUI 其實已經非常流暢了,在這種地方去掉應有的動畫,是可以快100毫秒,但這種快是沒有意義的。讓用戶舒服的看到這個東西,這才是整個體驗的核心。所以我們這次就定下一個目標,和工程團隊一起,把這種為快而快的東西給它削弱,用戶要的是更優雅的體驗,而不是那種無感知的快100毫秒。

          這個事情說起來不大,但其實是一種理念層面的進步,大家已經從那種無意義的純數據比拼里解脫出來,更注意到整個體驗層面。我們這次會把上面說的進場動畫加進來,能讓用戶點亮屏幕的時候感覺到更加的舒服,能夠感覺整個系統的「肢體語言」更加優雅。

          六、對于MIUI 11的展望?

          之前的非全面屏時代,手機屏幕在16:9的形態下,UX設計上其實已經極度成熟。手機的很多功能和設計的出新,很大程度上都是在迎合一些小眾的需求,可能一部分人覺得很喜歡這個設計,但它并不普適。

          全面屏手機的出現又將設計師的注意力從這些小眾需求拉回到了一個大眾需求:怎么在全面屏手機上做出更好的體驗。因為智能手機用戶遲早會將手中的設備換成全面屏設備,手機廠商如果只是簡單地把原來16:9的畫面改成18:9,而不根據硬件特點做真正的深度定制,那就會離用戶體驗越來越遠。

          手機系統的未來我們認為也會是這樣的趨勢,軟硬件的結合會更加的緊密。在這一點上,MIUI 有這個意識,也有行動,目前是走在比較前面的。

          MIUI10 落版后,我們也在考慮往這個方向去深化。我們不會特意去考慮11跟10之間非得做出什么大的區別來,相比這個,我們更關心的問題是:什么是用戶真正需要的設計。

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

          什么是好的網站?

          濤濤


          關于什么是好設計的問題的答案,定義了設計師。

          “有什么好處,Phaedrus,還有什么不好 - 需要我們讓任何人告訴我們這些事情嗎?” Robert M. Pirsig,Zen和摩托車維修藝術:對價值觀的探討

          上周,我的一位英雄(@johnmaeda)發推文說“設計一直是關于膚淺和實質的?!蔽艺J為這是一個很好的引用。出于某種原因,我們需要時刻提醒我們,設計不僅僅是花哨的造型。但為什么?為什么物質需要防御?如果你看看像Dribbble這樣的網站,設計的表面看起來真的很吸引人。膚淺的品質不需要解釋。但這不是設計。在他的“ 設計形狀”一書中,交互設計師Frank Chimero正確地說“如果我們留在表面并且不深入研究為什么我們不是真正的設計”。如果問為什么是設計的本質,設計真的是哲學的一個分支。

          清晰思考

          目前我們有一位來自馬斯特里赫特大學的教授,他們在我們的設計工作室中。他正在研究野外設計師,就像人類學家在非洲研究一個不知名的部落一樣。他研究的主題之一是設計過程。我總是覺得這是一個有趣的話題,這就是我對Chimero的書的原因:它從設計師的角度講述了設計過程。他的內部人士認為這是一場認可的盛宴。關于他對設計過程的描述最讓我困惑的是清晰思考的想法。奇美羅對他的工作方式有一個有趣的描述:他只是“出現”并讓“語境說出它需要的東西”。他說“設計師的工作就是找出一種方法讓問題表明它是真實的自我,這樣他才能回應已經出現的真相。

          設計師通過詢問原因來工作。問為什么“更高水平的研究,一個調查所使用的動機和思維過程,以便它們可以應用于我們自己的情況?!睘槭裁纯雌饋砀睢?/span>它將目前的解決方案與用戶的需求相結合,以設想更好的解決方案。

          哲學

          當我們開始問為什么并開始思考真理時,我們就進入了哲學領域。我一直將設計(和其他藝術)視為哲學的視覺形式。比傳統哲學更精細的一個,因為它不僅通過文字而且通過圖像進行思考。有些人可能會稱這種特殊形式的哲學設計思維。當我們將設計定義為哲學的一個分支時,下一步就是質疑這個世界上一些偉大的思想家,看看他們對設計的看法。對我來說,Martin Heidegger有兩個哲學文本定義了良好的設計。

          關于您的客戶和互聯網的真相

          第一部是Der Ursprung des Kunstwerkes(藝術作品的起源),其中海德格爾思考什么使藝術品成為藝術品。簡而言之,他認為,為了使藝術作品成為一件好作品,它必須揭示我們存在的真相。他用梵高的一雙農夫鞋作為例子。這幅畫是一件藝術品,因為它向我們展示了鞋子,農業,生活的真相,也展示了梵高繪畫時的繪畫媒介和藝術現狀。它很漂亮,根據海德格爾的說法,美麗是表達真相的最好方式。

          如果我們將網頁設計視為一門藝術,我們可以將海德格爾的藝術思想轉化為網站,并得出一個有用的網站定義。首先(和Chimero在他的書中所說的相似),一個好的網站揭示了用戶與您為其建立網站的組織的互動的真相。當然,美麗很重要,因為它是真相展示自己的最佳方式。Beauty以直接方式連接到用戶。它比單詞更快更有效。但海德格爾增加了另一個重要方面。一件好的藝術品,即一個網站也定義了媒體,即互聯網。因此,良好網站的問題與互聯網的問題緊密相關。一個好的網站向我們展示了互聯網是什么或可以是什么。

          與媒體的深層聯系

          因此,與您正在設計的介質建立深層連接至關重要。這是海德格爾第二篇文章的主題,它定義了良好的設計。在他的文本Bauen,wohnen,denken(建筑,生活,思考)他說,在你建造之前,你首先必須學會生活。在這篇關于建筑的文章中,他將設計與對人類基本條件的理解聯系起來。他敦促設計師與他們的主題聯系,實現他們的主題,而不是以抽象的方式看待它。對于建筑師來說,很容易愛上圖紙,抽象概念和模型。但是如果沒有與你設計的生活有真正的聯系,它就會變得毫無用處。就像建筑一樣,互聯網也是人類的基本需求。我們將互聯網視為能夠讓您做新事物的東西。但是人們只想做他們一直做的事情。 人們的經驗和廣泛的興趣促進了設計師的理解和想象力。

          通過哲學分析生活 - 問為什么 - 是良好設計的基礎。哲學是生活與設計之間缺失的紐帶。

          一個好網站的定義

          就像藝術一樣,設計一直需要定義。我認為好的設計問題的答案定義了設計師。所以:
          - 設計就是問為什么(所以它基本上是哲學)
          - 網頁設計的目的是找到關于客戶,用戶和互聯網
          的真相 - 真相最好通過美容傳達
          - 找到關于你的媒介的真相必須與之建立深厚的聯系

          如何巧用氣泡、斑點和流體元素,讓網頁不再單調死板?

          濤濤

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

          隨著設計工具和設計素材越來越豐富,設計師開始更加靈活地在網頁中使用氣泡、斑點和流體這樣的元素,那么要怎么在網頁設計的時候用好這些元素呢?今天結合9個網頁實例,來分享幾個實用的技巧~

          1. 用氣泡元素營造視覺焦點

          在簡約清爽的背景之下,使用色彩鮮艷,形體自然隨性的氣泡元素來創造視覺焦點,氣泡和需要凸顯的圖片素材結合到一起,有目的地將用戶的視線吸引到關鍵的元素上,最終起到提升轉化率的目的。

          2. 用簡約線性的氣泡動畫來驅動交互

          使用幾何特征的簡約氣泡元素來構造動畫,是一種成本比較低的做法,動畫會隨著用戶滾動頁面,而有趨向地發生轉變,從而促使用戶不斷地滾動,向下瀏覽查看更多內容,這種設計同樣能夠提升網頁的參與度。

          3. 用不規則的涂鴉斑點強化品牌

          斑斕的背景和強對比的涂鴉斑點,同樣是一種引導視覺的策略,但是它更重要地是通過這種風格來營造狂野粗糲的品牌氣質,幫助用戶更快更直接地 Get 到品牌的獨特氛圍和神髓。

          4. 用液態色塊拼貼來傳達時尚感

          充滿流動感的色塊和斑點元素類似,同樣充滿了不受控制的自然氣場,充滿對比度的多彩配色則賦予了這些液態感十足的色彩拼貼以時尚的氣質,從而營造出獨樹一幟的視覺體驗。

          5. 用漸變色氣泡來營造立體感

          微妙的漸變色常常能夠賦予元素以一定的3D立體感,多變的氣泡元素如果擁有漸變色會仿佛擁有景深和層次一般,讓頁面更加立體。當然,如果一開始使用動畫軟件來建模,渲染生成動畫,那么就更加到位了。

          6. 使用扁平化氣泡元素渲染現代感

          扁平化設計依然是目前的主流,在許多純粹扁平化的頁面中,氣泡類的元素能夠起到很好的點綴作用,讓背景不再單調,幾何感十足的氣泡邊緣和清爽的色彩,能夠很好的賦予頁面足夠的現代感,干凈而具有當下的時代感。

          7. 作為圖片載體給人獨特的印象

          氣泡類元素本身的形體都是非常規的幾何元素,因此它們相比于常見的圓形、矩形、三角形,出現的機率更低,當它作為圖片的載體的時候,這種獨特的視覺體驗更容易給用戶留下印象,四兩撥千斤。

          8. 用氣泡動畫來創造趣味性

          氣泡動畫可以擁有冷淡的科技感,也可以軟萌可愛充滿趣味感,這取決于動畫的設計者怎么做。在頁面中使用有趣的氣泡動畫能夠讓頁面更加令人親近,讓用戶在加載和轉場的時候會心一笑,記住你的設計。

          9. 用氣泡動畫來構建品牌LOGO

          這同樣是一種巧妙地吸引用戶同時宣傳品牌的手法,當然,前提是你的品牌 LOGO 適合使用這樣的表現方式。氣泡動畫富有活力,有生命力,這一點最終能夠加持在品牌上,同時能夠給用戶留下更加深刻的記憶。

          結語

          有機感是近兩年來比較熱的一個設計方向,但是它的呈現方式并沒有那么具體,而諸如斑點和氣泡這樣的元素是呈現有機感最常用的方式,加上新的設計工具的普及,設計師開始使用這些元素來創造富有有機感的設計。

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

          UI設計中亮色的優點和缺點

          濤濤


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

          這篇文章展示了豐富多彩的UI的優缺點,描述了明亮的顏色如何提高用戶體驗,以及在選擇亮色時應該考慮有哪些缺陷。

          聲明:如需轉載,請申請本人授權并保留文章全部信息,嚴禁私自用于任何商業用途,請尊重原文作者及譯者權益。


          有效的顏色應用技巧是每個從事視覺合成相關工作的,包括插畫家和UI設計師,都必須具備的。隨著扁平化設計和material design的普及,具備色彩理論知識變得更加重要。

          目前鮮艷的顏色和漸變出現在不同數字產品的用戶界面上:從好玩和有趣的到商業應用和網站。然而,關于明亮的顏色對用戶體驗的影響還有很多討論。本文對豐富多彩的用戶界面設計的優缺點進行了深入的分析。


          明亮的顏色如何提高UI效果?


          增加可讀性和易讀性


          我們之前的一篇文章中,介紹了影響配色方案選擇的因素。可讀性和易讀性是設計師考慮色彩運用的基本因素。提醒一下,可讀性是指人們閱讀文本內容的容易程度,而易讀性則定義了用戶在特定字體中區分字母的速度。

          鮮明的顏色足夠的對比度有助于增加可讀性和易讀性。有對比的布局元素會變得可區分和引人注目。然而,高色彩對比可能并不總是有效。如果文本內容和背景顏色對比度太大,將很難閱讀或掃描文本。這就是為什么推薦設計師創建一個溫和的對比度,只用高對比度顏色突出元素的原因。


          提亮導航,使交互更直觀


          對任何數字產品來說,視覺層次是打造清晰導航和直觀交互的核心要素。UI組件就是這樣被組織起來的,這樣大腦就可以通過這種包括顏色在內的物理差異來區分物體。

          顏色有自己的層次結構,這是受用戶思維的影響所決定的。有大膽的顏色,如紅色和橙色,以及弱的白色和奶油色。明亮的顏色很容易被注意到,所以設計師經常用它們來突出或設置對比度。此外,將一種顏色應用到幾個元素上,表示它們在某種程度上是有相關性的。例如,您可以為購買按鈕選擇紅色,以便人們在需要時直觀地找到它們。


          可識別性


          大腦對大膽的顏色反應強烈,這就是為什么明亮的顏色組合很容易被注意和記住的原因。色彩豐富的用戶界面設計,在眾多顏色較輕的產品中容易脫穎而出。顏色的選擇需要基于目標受眾的喜好和市場調查。

          此外,如果一個公司擁有明亮的企業顏色應用于商標和品牌項目,那使用同樣顏色在其網站或移動應用上也是一個好方法。這種方式連接公司所有的溝通渠道,創造了一致性的視覺解決方案,并且提高了品牌知名度。


          設定情緒和氣氛


          為了傳達正確的語氣、信息和號召用戶做出預期的行動,設計師需要知道顏色會影響我們的情緒和行為。我們的大腦會對顏色做出反應,而我們通常不會注意這點。這項名為“顏色心理學”的研究表明,當我們的眼睛感知到一種顏色時,大腦就會向內分泌系統發出信號,釋放負責情緒變化的荷爾蒙。

          適當選擇顏色有助于讓用戶處于一種促使他們采取行動的心理狀態,并設置合適的氛圍將正確的信息傳遞給用戶。比如,如果設計師設計了一個與自然或園藝相關的產品的UI,很有可能會選擇用綠色和藍色。通過這種方式,設計將從一開始就與一種產品或服務類型相關聯。您可以在我們的文章《顏色對用戶行為的影響》中找到對顏色含義的具體描述。


          時尚的外觀和風格


          明亮的顏色和漸變,是UI設計中的最流行的趨勢。如今,可以在不同類型的數字產品中看到這種運用,而嚴格的商業風格的限制似乎被拋在了一邊。

          明亮的漸變色彩在用戶界面上可以帶來一種現代化感和新鮮的想法。結合趨勢設計的APP或網站往往引人注目,盡管競爭激烈,仍能吸引用戶的注意力。


          明亮的顏色使用缺陷


          很難搭配


          那些認為顏色能靠直覺和審美隨意混合的觀念是錯誤的。如果你想要創造和諧的視覺構圖,那么關于顏色如何起作用以及它們如何協作的基本知識是必不可少的。

          在UI中應用的顏色越鮮艷,搭配就越困難。為了讓用戶感到愉悅和舒適,設計師努力將平衡和和諧融入到用戶界面設計中。色彩協調是指在設計中以最吸引人、最有效的方式來安排色彩,以供用戶感知。和諧的顏色組合有助于對網站或APP獲得一個不錯的第一印象。顏色理論定義了一些基本的顏色方案,下面這些配色方案被證明是有效的。

          單色,色彩和諧是基于一種顏色和它的各種色調。

          類似色,該方案適用于顏色輪上相鄰的顏色。

          互補色,它是在色輪上相互放置的顏色的混合,目的是產生高對比度。

          多色互補,這個方案與前一個方案相似,但是它使用了更多的顏色。例如,如果你選擇藍色,你需要取另外兩個相鄰的顏色,表示黃色和紅色。

          三元色,它是基于三個獨立的顏色,在色輪上是等距的。專業人士建議使用一種顏色作為主調,其他顏色作為主調。

          四色,tetradic配色方案使用四個顏色從車輪是互補的。如果你把選中顏色上的點連起來,它們就形成了矩形。


          失去節奏感


          大膽的顏色可以作為在UI中進行重音的工具,但它也可能成為重音消失的原因。許多鮮明的顏色在一個單一的視覺組成會帶來了失去突出元素的風險,因為他們成為一個色彩種制造混亂的一部分。

          這就是為什么推薦設計師使用60%-30%-10%的比例。最重要的部分應該是主色調,三分之一的構圖采用第二色,10%的部分應該選擇有助于形成重音的顏色。這樣的比例被認為是令人愉快的,因為它允許逐漸感知所有的視覺元素。


          明亮的顏色并不適合所有用戶群體


          創造數字產品的核心階段之一是用戶研究。定義和分析目標受眾,使設計師了解他們對網站或應用程序的期望。年齡、性別和文化會影響潛在用戶的喜好。例如,孩子們很喜歡黃色,但當我們長大后,黃色通??雌饋聿荒敲从形ΑD腥撕团送ǔO矚g冷酷的顏色,如藍色,綠色。不像女人,男人通常喜歡白色、黑色和灰色。

          明亮的顏色也是如此。即使您是設計一個有趣的APP,也需要考慮目標受眾的具體情況。中年人通常更喜歡輕松的用戶界面,他們可能不喜歡屏幕上很重的顏色去分散注意力。


          在移動屏幕上,鮮艷的顏色看起來反差太大


          正如我們上面所說,明亮的顏色可以產生大量的對比度,幫助突出重要的UI元素,并提供良好的易讀性和可讀性。然而,過多的對比度可能會起到不好的效果,尤其是在移動界面上,因為它們的空間有限,可以在不同的環境下使用。

          小屏幕、環境光和明亮的字體使對比度高的圖像在用戶眼中顯得很難看。這就是為什么在移動UI設計中使用明亮的顏色需要注意顏色之間的對比度,這樣人們在閱讀文字時會感到舒服。

          顏色是大師手中的一件偉大的工具,和其他任何工具一樣,它也有它的優點和缺點。為了有效地使用它,需要考慮它的所有方面,以便能夠找到適合設計任務和目標的解決方案。



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




          用戶界面設計中的「版式設計」全方位指南

          濤濤

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

          一篇較為系統與全面的版式講解,從規范化的布局形式到平面構成在用戶界面設計中的應用與體現。

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

          終極指南!超全面的UI動效基本規則總結

          濤濤

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

          動畫效果如今已經深入到 UI界面的每個角落。屏與屏之間的切換因為動效而顯得更加連貫,交互的上下文邏輯也因為動效的加持而更加清晰。動效對于產品和用戶而言,都是一個不可多得的重要組成部分。但是當我瀏覽相關的文章的時候,發現絕大多數的動效有關的文章,都僅僅只是針對特定的動效設計案例來進行分析和描述,少有文章真正系統地闡述動效應該遵循怎樣的規則,符合什么樣的特征。這篇文章當中,我不會講述什么新穎的技巧或者前沿的趨勢,但是我會將動效設計的主要原則和標準都匯集到一起,總結出來。

          有了這篇文章,你就不用在其他地方學習基本的動效設計規則了。

          動效的持續時長和速度

          當元素的位置和狀態發生改變的時候,動效的速度應該足夠慢,維持足夠長的時間,讓用戶能夠注意到變化,但是同時,又不能慢到需要用戶去等待。

          大量的研究表明,動效的最佳持續時長是200毫秒到500毫秒之間。這個研究數字是基于人腦的認知方式和信息消化速度得出來的。任何低于100毫秒的動效對于人的眼睛而言,幾乎都是瞬間,很難被識別出來。而超過1秒的動效會讓人有遲滯感。

          △ 界面中動效持續時長

          在手機這樣的移動端設備上,按照 Material Design 的建議,動效時長應該控制在200~300毫秒之間,在平板電腦上,這個時長應該延長大概30%,也就是說,時長應該在400~450毫秒之間。原因很簡單,屏幕尺寸越大,元素在發生位移的時候,跨越的距離越長,速度一定的情況下,時長自然越長。相應的,在可穿戴設備的小屏幕上,這個時長應該縮短30%,在150~200毫秒之間。

          △ 移動端設備的屏幕尺寸影響動畫的持續時長

          網頁動效的處理方式也不一樣。由于我們習慣在瀏覽器中直接打開網頁,考慮到瀏覽器性能和大家的使用習慣,用戶對于瀏覽器中動效變化速率的預期還是比較快的。相比于移動端中的動效速度,網頁中的速度會快上一倍,換句話說,就是動效的持續時長應該在150~200毫秒之間。如果持續時間太長,用戶會忍不住覺得網頁卡住了。

          不過,如果你的網頁中所用的動效并非功能性的,而是裝飾用的,或者用來吸引用戶的注意力,那么請忘記這個規則,在這種情況下,動效可以更長。

          更大的屏幕=更慢的動效?絕不是如此!

          請務必記住,無論是在什么平臺上,動效的持續時長絕不是單純取決于屏幕尺寸和運動距離,還取決于平臺特征、元素大小、功能設定等等。較小的元素或者較小的變化,相應的動效應該更快一點。因此,大而復雜的元素動效持續時間更長,看起來也更舒服一點。

          大小相同的元素,在移動的時候,移動距離最短的元素,是停止下來的。

          與較大的元素相比,較小的元素運動速度應該更慢,因為相同的移動距離,對于小元素而言,位移距離和自身大小比例倍數更大,相對偏移更遠。

          △ 動效的持續時長還和元素大小、運動距離有關

          動效的運動規律要符合物理規律,當元素運動到邊界,發生碰撞的時候,碰撞的「能量」最終是要均勻分攤下來的,而彈跳的在多數情況下是不適合的,僅在特殊情況下適合使用。

          △ 避免使用彈跳,它會分散用戶的注意力

          元素的運動過程應該是清晰的,盡量不要在運動中使用模糊的效果(是的,說的就是 AE 的模糊動效愛好者們),模糊的動效不適合在 UI界面中使用。

          △ 不要在動效中使用模糊效果

          列表項(新聞列表、郵件列表等)所使用的動效,在實際運動的過程中,項和項之間應該有輕微的延遲,元素之間的延遲應該控制在20~25毫秒之間,如果持續時間再長,可能會給人一種遲滯的觀感。

          △ 列表項之間的延遲應該在20~25毫秒

          緩動

          緩動指的是物體在物理規則下,漸進加速或減速的現象。在動效中加入緩動的效果能夠讓運動顯得更加自然,這是運動的基本原則之一。對于緩動,迪士尼的兩位關鍵性的動畫大師 Ollie Johnston 和 Frank Thomas 在他們的著作《The Illusion of Life: Disney Animation》中有過非常詳盡的描述。

          為了不讓動效看起來機械或者人工痕跡太明顯,元素的運動應該有漸進加速和漸進減速的特征,就像物理世界當中其他的物體這樣。

          勻速直線運動

          不受任何物理力量的影響,勻速直線運動看起來是非常不自然的,尤其是對于人眼而言。

          所有用來設計動畫的應用都會使用坐標軸和曲線來闡述動效的運動特征,我將嘗試闡述它們的含義,以及如何使用。坐標軸的 X軸是實現,而 Y軸則表示的唯一,換句話來說,如同我們在初中物理中所學到的,坐標軸上的線條描述的是速度和加速度的特征。下面所示的直線,表示速度是均勻的,也就是勻速直線運動,物體在相同時間內運動的距離是不變的。

          △ 勻速直線運動的座標圖

          均勻的變化通常只會用在色彩的改變或者透明的改變上,一般來說,我們也可以讓背景元素均勻運動,而前景元素保持不變,來呈現它的狀態,就像上圖一樣。

          緩動加速曲線

          通過曲線我們可以看到,物體開始時候的初速度比較低,運動緩慢,隨后速度逐漸增加,這意味著物體在加速運動。

          △ 加速曲線

          當物體加速飛出屏幕的時候,可以使用這種加速曲線,比如界面中被用戶使用滑動手勢甩出去的卡片。但是請記住,只有當運動對象需要完全離開界面的時候才會這么使用,如果它還需要再回來的話,則不行。

          △ 以加速運動將卡片扔出屏幕

          動畫曲線有助于正確傳達訊息,甚至表達情緒和感覺。在下面的案例當中,我們可以看每個元素的運動位移是完全一樣的,所消耗的總時長也是一樣的,但是運動的速率變化是不同的,這一點也體現在曲線上,所表現出來的情緒也不同。當然,通過調整曲線,你能夠讓物體的運動軌跡盡可能接近現實世界。

          緩動減速曲線

          當元素從屏幕外運動到屏幕內的時候,動效應該遵循這類曲線的運動特征。從全速進入屏幕開始,速度降低,直到完全停止。

          △ 減速曲線

          減速曲線可以適用于多種不同的 UI控件和元素,包括從屏幕外進入屏幕內的的卡片、條目等。

          △ 減速曲線案例

          緩動標準曲線

          在這種曲線之下,物體從靜止開始加速,到達速度最高點之后開始減速直到靜止。這種類型的元素在 UI界面中最為常見,每當你不知道要在動效中使用哪種運動方式的時候,可以試試標準曲線。

          △ 標準曲線

          根據 Material Design 的規范,最好使用不那么對稱的增速和減速的過程,讓動效看起來更加真實。同時大家會更加在意運動的結果,曲線的末端,也就是運動結束的過程最好進行適當的強調,換句話說就是減速過程持續的時長最好超過開始加速的時長,用戶將會更加清楚地觀察到運動的最終結果,從而更好地明白運動的終止狀態。

          △ 對稱和非對稱運動的差異

          當元素從屏幕的一個位置移動到另外一個位置的時候,最好使用這種標準的緩動曲線,這個過程中,盡量不要讓動畫效果引人注意,不要使用戲劇化的效果。

          △ 卡片元素從屏幕上運動的時候,不對稱的緩動曲線

          當元素從屏幕上消失的時候,采用了相同的不對稱緩動曲線,用戶同樣可以通過滑動回到之前的位置。這個環節使用了抽屜式導航控件。

          △ 抽屜式導航隨著緩動曲線從屏幕上隱藏

          從這些案例當中,可以看出許多動效的初學者對于運動規則的了解還不足。比如下面的這個動效,元素隨著減速曲線出現,然后使用標準緩動曲線消失。根據 Material Design 的標準,新出現的元素持續的時間應該更長,因為需要吸引更多的注意力。

          △ 導航菜單的出現和消失

          貝賽爾曲線函數 cubic-bezier()是用來描述曲線的,它的名字前面之所以帶有 Cubic 是因為每個貝賽爾曲線的描述都是基于四個不同的參數來確定的。曲線的起點(0,0)和終點(1,1)在坐標軸上的位置是已經事先確定的。

          為了簡化你對于貝賽爾曲線的理解,我們推薦兩個網站,分別是 easings.net 和 cubic-bezier.com ,前者包含了最常見的曲線的列表,你可以將他們復制到你的原型工具中,第二個網站為你提供了不同曲線的參數,你可以直接在其中查看各種對象的移動方式。

          △ 不同類型的 cubic-bezier()的曲線和參數

          界面動效的編排

          就像芭蕾舞的舞蹈編排一樣,動畫效果也是需要編排的,它的主要目的是讓元素從一個狀態切換到下一個狀態,自然過渡,讓用戶的注意力自然地被引導過去。

          編排有兩種不同的方式,一種是均等交互,另一種是從屬交互。

          均等交互

          均等交互意味著所有的元素和對象都遵循一個特定的編排的規則。

          在這個實例當中,所有的卡片都遵循著一個方向來引導用戶的注意力,自上到下地次第加載。相反,沒有按照這樣清晰的規則來加載,用戶的注意力會被分散,元素的外觀排布也會顯得比較糟糕。

          △ 用戶的注意力應該沿著一個流向來引導

          至于表格式的布局,它相對就復雜一點。在這里,用戶的視線流向應該是清晰的對角線方向,因此,逐個區塊次第出現是一個糟糕的設計。這樣的逐個顯示,一方面耗時太長,另一方面會讓用戶覺得元素的加載方式是鋸齒狀的,這種方式并不合理。

          △ 沿著對角線加載

          從屬交互

          從屬交互指的是使用一個中心對象作為主體,來吸引用戶的注意力,而其他的元素從屬于它來逐步呈現。這樣的動畫設計能夠創造更強的秩序感,讓主要的內容更容易引起用戶的注意。

          在其他的設計當中,用戶很難搞清楚哪個才是主要的,因為注意力被分散了。因此,如果要設置多個動畫元素,應該定義清楚誰為主,誰是中心,并且盡量按照從屬關系來次第呈現不同的子元素。

          如果只有一個中心對象,那么其他的對象的運動方式都要受它制約,否則用戶分不清楚主次。

          根據 Material Design 的規定,當元素不成比例地變幻尺寸的時候,它應該沿著弧線運動,而不是直線運動,這樣有助于讓它看起來更加自然。所謂「不成比例」地變化指的是元素的長和寬的變化并不是按照相同比例來縮放或者變化的,換句話來說,變化的速度也不一樣。(比如,方形變成矩形)

          △ 不成比例地改變對象外觀的時候,運動軌跡應該是弧線的

          相反,如果元素是按照比例改變大小的時候,應該沿著直線移動,這樣不僅操作更加方便,而且更符合均勻變化的特征??匆幌抡鎸嵉陌咐?,你會發現直線的運動軌跡會更加合理。

          △ 成比例變化大小的時候,應該沿著直線運動

          當元素不成比例放大的時候,運動軌跡是弧線,而這種弧線運動軌跡有兩種不同的呈現一種,一種軌跡是初始方向為垂直方向而運動結束時瞬間運動方向是水平的(Horizontal out),另外一種初始方向是水平方向而運動結束時瞬間運動方向是垂直的(Vertical out)。

          那么怎么選取這個方向呢?很簡單,元素運動曲線的方向,應該是要向界面的主要運動方向的主軸靠攏重合。舉個例子,在下面的動效當中,整個界面的滾動方向是上下滾動,主軸是縱向的,因此,當卡片點擊之后被展開的時候,會先向右水平移動,并最終以垂直運動結束,運動的最終方向,切線是垂直的,也就和垂直方向的主軸重合了。

          △ 元素按照弧線展開的時候,最終方向應該和主軸重合

          如果幾個不同的元素的運動軌跡相交,那么他們不能彼此穿越。如果每個元素都必須通過某個交點,抵達另外一個位置,那么應該次第減速,依次通過這個點,給彼此留出足夠的空間。另外一種選擇,是元素不相交,而是像實體一樣在靠近的時候,彼此推開。為什么?因為我們通常假定界面中所有的元素都位于同一個平面當中。

          在運動過程中,元素不應彼此穿越,而應該互相留出空間。

          但是這一點也不是一成不變的。在比較擁擠的界面當中,某個元素可以「越過」其他的元素,它同樣沒有穿過其他的元素消失,而是單純的移動。這一點從某種意義上也是延續自我們日常的物理規律,只不過我們會默認界面中的元素在這個情況下擁有了高度這樣的屬性。

          △ 元素可以越過其他的元素運動

          結語

          我們總結了這么多動效運動的規則和原則,從某種意義上還是延續自我們對于物理世界的認知,摩擦力和加速度在虛擬界面中以另外的方式續存著。模仿現實世界的界面讓我們對于界面的秩序有更清晰的認知,允許我們更輕松的了解和訪問界面的內容。

          如果動效按照正確的方式來設計,它應該是不顯著,且不會分散用戶注意力的。如果不是這樣,那么你需要讓動效更微妙一點,實在不行甚至需要將它移除。動效不應該成為影響用戶操控界面的障礙,或者轉移注意力的存在。

          當然,即使是遵循這么多規律,動效的設計依然是一門藝術,而非單純的科學,多做測試多摸索總是有必要的。

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

          10分鐘教你如何選擇篩選組件

          濤濤

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

          生活需要篩選,App頁面也一樣。本文通過案例分析,從篩選組件的樣式、使用場景等方面來解析篩選組件在手機端場景的設計。


          篩選組件概述

          篩選組件的作用是幫助人們在面對大量信息時,通過更的篩選方式提升決策效率。廣義的篩選組件還包括搜索欄及Tab欄,本文暫不分析。


          組件包括篩選按鈕與篩選器,篩選器包含類別及各類別下的篩選項。使用頻次高低、篩選條件的數量都是決定篩選組件樣式的因素。



          01


          位于 Tab 欄的篩選組件


          組件樣式

          篩選按鈕位置:一般位于Tab欄最右側視覺薄弱區域。


          篩選器形式:點擊按鈕,篩選器以抽屜形式從Tab欄底部向下展開篩選條件,或以浮層形式從屏幕最右側向左滑出篩選條件。


          樣式分析

          當界面使用Tab欄時,已為內容做了第一層篩選,多數情況下已滿足用戶對內容的篩選需求。


          當篩選類別較多且復雜時,就需要在Tab欄增加篩選組件來提供更詳細的篩選能力。而這里的篩選組件較于Tab欄其他條件優先級較低,屏幕右側為視覺薄弱區域,這也解釋了為什么大多數Tab欄的篩選組件都位于最右側。



          案例一

          Image title

          案例來源于美團App


          此頁是對美食品類的選擇,這里的篩選組件在Tab中是最常見的樣式。對于用戶而言,選擇商家店鋪優先考慮地域、美食類別、價格及綜合評價,而用餐人數與餐廳服務等只是輔助選擇條件。


          篩選器使用了抽屜形式,如要選擇此樣式,建議在篩選條件不多且不超過一屏的場景使用。



          案例二

          Image title

          案例來源于淘寶App


          當用戶從首頁全局搜索后,出現此頁。篩選按鈕位于二級Tab欄。點擊篩選按鈕后,由于篩選條件較多,很難一頁展示完,用戶往往需要上下滑動屏幕查看全部,因此使用右側浮層展開的形式較適合。



          案例三

          Image title

          案例來源于嗶哩嗶哩App


          全局搜索后,Tab欄默認展開綜合tab內容,用戶對排序、時長、分區的篩選需求較高,因此直接把篩選類別放在了二級Tab欄,相比通過點擊篩選按鈕再展開類別的交互方式更簡單直白。


          點擊篩選類別后,篩選器使用抽屜式。此種篩選組件樣式一般用于篩選類別較少(不超過4項),篩選項數量不多的場景。



          02


          底部按鈕型篩選組件


          組件樣式

          篩選按鈕位置:以按鈕或浮層形式固定在界面底部,便于用戶操作。


          篩選器形式:點擊按鈕,篩選器以抽屜形式從按鈕底部向上展開篩選條件,或以界面浮層形式從底部向上展開篩選條件。


          樣式分析

          使用底部篩選按鈕的界面,內容區類別相對單一,通過篩選組件就能滿足篩選需求,并對篩選的需求較大。而底部按鈕作為常見的按鈕形式,用戶點擊更方便,因此承載篩選組件較合適。


          若使用此樣式,點擊篩選按鈕后,篩選器的出現優先考慮從底部向上出現的抽屜式浮層。



          案例一

          Image title

          案例來源于旅游類App Expedia


          輸入旅游目的地后進入此列表頁,用戶目的性明確,就是要查看結果。底部的篩選按鈕是為了幫助用戶更快的篩選結果,方便用戶觸達。并且篩選條件較多,無法一頁展示完,使用了界面浮層的形式。


          這里還有2個細節:


          1、由于篩選類別較多,手動清除單個篩選條件太過繁瑣,于是篩選器底部增加了清除按鈕,操作更簡便。但底部按鈕一般為“確定”操作,“清除”放在底部樣式上沒有做誤操作提示,可能會增加誤操作機率。


          2、篩選后,篩選按鈕處會顯示已選擇的篩選類別數量,給用戶帶來良好的使用反饋。



          案例二

          Image title

          案例來源于dribbble


          當前頁為地點搜索。需要先進行篩選操作,內容區再出現結果。篩選按鈕位于底部浮層,篩選類別代替篩選按鈕平鋪展現,篩選器使用抽屜式從浮層底部向上展開。


          此樣式一般適合篩選類別較少,并且每個類別的篩選項不多的場景。優點是減少操作步驟,提高用戶操作效率。并且可以學習一些體驗細節:在篩選器中選擇一個選項后,在其篩選類別處同步修改為該選項;篩選項與篩選類別選中狀態一致,增加關聯度。



          03


          浮層按鈕型篩選組件


          組件樣式

          篩選按鈕位置:以浮層按鈕的形式位于界面右下方,占用空間較少。

          篩選器形式:點擊按鈕,篩選器以浮層形式為主,或在篩選按鈕下方展開篩選條件。


          樣式分析

          浮層型篩選按鈕的優點是增大內容區的縱向空間,比底部按鈕型篩選組件的層級要弱一些。但當用戶需要操作時,它的位置也便于用戶點擊。

          設計時按鈕用色需要區別于內容區,內容形式盡量精簡直觀。若使用案例3中的扇形篩選器,則要求篩選類別為1-2類,篩選項數量少切文案精簡。



          案例一

          Image title

          案例來源于dribbble


          篩選按鈕位于界面右下方緊貼于右側屏邊,浮于被篩選內容上層,滑動屏幕時消失。點擊篩選按鈕后,從屏幕右側展開篩選浮層,原篩選按鈕變為確認按鈕。


          此按鈕形式最大限度的讓出空間留給內容區,且右下角為用戶關注薄弱區,這樣的位置關系可讓用戶按需操作。關于篩選器使用右側浮層前面的案例也提到過,適用于篩選條件較多的場景。并且使用側邊欄形式的浮層與篩選按鈕關聯性較高,相對符合用戶認知。體驗細節上可學習的點還有按鈕功能的改變,使得體驗更便捷。



          案例二

          Image title案例來源于dribbble


          篩選按鈕位于界面右下方但沒有貼屏邊,篩選器以底部分層形式從底部向上展開。這里的篩選條件不多,因此使用了底部分層形式。



          案例三

          Image title

          案例來源于dribbble


          篩選按鈕形式與上一案例相似,不同的是篩選按鈕處直接顯示篩選條件,可得知此內容區目前被篩選維度為“30M”。此樣式適用于篩選條件為同一維度的場景。


          點擊按鈕后,從按鈕下層展開扇形篩選器,滑動選擇篩選條件。此種篩選器樣式使用場景較局限,多為選擇時長或數量,并且單選居多。因此篩選器不需要“確定按鈕”,只需放“關閉按鈕”即可。這里的篩選器也可根據不同的場景選擇其他的形式。



          04


          舉一反三


          接下來我們拿個案例練練手。


          下圖界面中內容區為概覽與各監控數據圖表,需要設計一個篩選組件對內容區進行不同時段的篩選。


          Image title


          在設計之前需要確定幾個需求:篩選組件的使用頻次、篩選類別的數量、篩選項的數量,單復選關系、篩選條件之間的優先級。


          進一步明確需求

          篩選類別只有時間段1項,篩選數量不固定,為多項,單選關系。當用戶進入此頁,根據用戶使用需求判斷“1小時”基本滿足用戶查看數據的需求,默認展示“1小時”的篩選。因此篩選組件此場景使用“1小時”時段基本滿足用戶查看數據的需求,可判斷用戶使用篩選組件的頻次不高。


          Image title


          方案解析

          方案一,Tab欄形式

          Tab是對整頁的篩選,多為不同維度,而這里只有時段一個維度。

          Tab所處位置為視覺熱點區域附近,但用戶對篩選組件的需求并不高,放在此位置占用了概覽區空間。


          方案二,底部按鈕形式

          底部按鈕位于用戶的習慣操作區,放這里使用層級略高,并且會使內容區的整體高度減少。


          方案三,浮層按鈕形式

          位于右下角的浮層按鈕在頁面中屬于視覺薄弱區域,可以使用戶瀏覽時不受按鈕影響;但按鈕擁有強對比色,在有篩選需求時滿足使用需求。

          篩選器以時間選擇器形式出現,可滿足篩選項數量較多的場景。



          05


          小結


          以上內容是我對常見篩選組件的思考,每一種樣式都有其優缺點。但我們設計篩選組件的最終目的是幫助用戶篩選信息,決策。這就需要設計師根據篩選需求、用戶習慣等設計符合用戶使用場景的操作體驗。



          本文作者:TXD技術體驗團隊-喻杰(阿里巴巴視覺設計師)

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


          在iPhone的UI設計背后,是一場關于注意力的戰爭 2018/09/06in 設計文章 & 教程評論區

          濤濤

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

          iPhone 誕生之后,世界發生的變化是翻天覆地的。以電容觸摸屏為交互中心的智能手機以難以想象的速度,成為了人類生活中不可分割的部分,人與人之間的連接因此而更加緊密,同時也更加疏遠。從某種意義上來說,iPhone 的創造是開創性的,也是不可替代的。而我們也不約而同地發現,以iPhone 為標竿而創造的智能手機和數字化的交互界面,讓我們處于一個時刻都會被分心的境地。

          令人上癮的數字內容,讓我們一刻都離不開智能手機,從某種意義上,它徹底改變了我們的生活,工作,甚至思考的方式?,F如今,越來越多的人開始嘗試戒除令人上癮的智能手機,尋找更加健康自由的人機關系。根據今天的調研,過度使用智能手機,確實會有一定機率帶來心理健康的問題。從 iPhone 誕生之初,直到10年后的現在,在數字產品上癮和用戶注意力的控制這件事情上,開發團隊本身就沒有放松過。這次,Fast Company 專訪了前蘋果設計師 Imran Chaudhri。

          Imran Chaudhri 早在 1995 年就加入了蘋果公司,并且很快就出任了公司的人機交互界面組的設計總監,在2006年前后,他也是作為 iPhone 項目核心的6人團的一員,加入到項目當中來。

          待在蘋果的20多年時間里,他參與了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等幾乎全部主要產品的用戶界面的設計,直到他開始追求創造屬于自己的公司和事業,才正式從蘋果離職。也正是因為這樣的契機,才使得 Fast Company 有機會能和他面對面地一起聊一聊他的過去,以及他留給蘋果的那些遺產。

          和許多設計師一樣,他們對于產品的想法和企業的定位或多或少有一些錯位。和蘋果產品相關的很多信息,他現在依然還不能透露,但是他依然提到了很重要的事情:即使是在iPhone的原型設計階段,他就已經意識到了,這款產品最大的缺陷之一,就是它注定會分散甚至壟斷用戶的注意力。而與此同時,蘋果也有意識的沒有給予用戶,對于iPhone 完全的控制權。下面,是訪談中能夠對外公布的幾個重要的內容摘錄:

          設計「請勿打擾」的功能

          「我認為,從某種意義上來說,真正洞悉設計的設計師,大都能夠預見到手機對于注意力的影響。在使用手機的時候,我們總會碰到被各種各樣的信息和通知打擾到?!?

          「早些時候,當我剛剛開始制作 iPhone 的原型之時,管束還不是那么多,我們當中有幾個人還有幸把原型機帶回家,這樣就可以每天工作生活都使用它。那個時候我全世界各地的朋友都和我保持著聯系,iPhone 幾乎隔一會兒就會亮一下,顯示有新消息,叮叮咚咚響個不停,于是我意識到,和我們朝夕相處的手機需要一個管控功能。所以,在很早的階段,我就開始設計請勿打擾這個功能了?!?

          對于誰來掌控手機設備這個事,蘋果的內部產生了分歧

          「其實,在蘋果公司內部,想要大家都理解分心是一個影響用戶生活的問題,還挺難的。喬布斯倒是很能理解的,但是公司內其他的同事,對于用戶對于手機的控制權多少,其實大家還存在不少爭議。我和一部分同事倡議給用戶更多的掌控權,不過這個事情對產品的營銷和市場運作是有影響的。所以,當時內部也有聲音說,如果真的給用戶太多的控制權,那么這款手機就不酷了?!?

          「其實直到今天,iPhone 當中絕大多數的功能都是可控的,但是其中很多功能隱藏的比較深,徹底的掌控它們是比較困難的,如果你真得想讓那些整天都在轟炸你的信息徹底遠離,你需要花費很長的時間來摸索,用獨特的方式逐個調整或者關閉才行。因此,對于那些熟練使用iPhone 的重度用戶而言,確實是可以如臂使指地掌控這臺設備,但是對于更換壁紙都不太會的用戶,想要搞清楚iPhone ,讓它如意隨心,真的是難如登天。他們沒有這樣的控制能力?!?

          關于 iPhone 是否有可能更智能地預測通知

          「你可能會在一個下午安裝十幾個不同的新應用,然后你不停地會收到提醒和通知,是否要授權使用相機,是否要授權獲取你的位置,是否允許它給你發送通知,每個都要做決定。稍后,你可能會發現,Facebook 一直在后臺給你推送信息。再之后你就會發現你有睡眠障礙了,總會有信息大半夜地推送到你的眼前,讓你無法安生地休息。實際上,借助請勿打擾的功能,你可以一早上再查看它們。這套系統足夠智能,能夠判斷出哪些應用之前就已經獲得了許可,哪些仍然在后臺獲取數據,哪些通知實際上你并不關心。所以,這套系統其實是會選擇更加恰當的時機和正確的方式來建立用戶和手機之間的對話和關系,手機會詢問用戶,你真的需要這些通知嗎?或者是,你真的需要Facebook 使用你的電話簿的信息嗎(因為你已經很久沒有登錄了)?等等。正確地設計了這套系統之后,提醒用戶的方式也非常的多。」

          為什么蘋果最后還是開始關注分心這個事情?

          「iOS 12 中內置的這套防干擾的控制系統可以更加系統地監控手機各方面的功能和用量,它實際上是從iOS 6 時代的請勿打擾的功能拓展而來的。但是它在現在被推出來真正的原因是有太多的用戶為此而抱怨,而媒體和用戶都發文吐槽,在呼聲和壓力之下,它們最終在iOS 12 中呈現了出來。這個局面之下,蘋果沒有選擇的余地,必須對于輿論有回應。這對于每個人都是好事,因為用戶和他們的孩子都因此能夠獲得更好的產品。但是這是否是最好的產品?當然算不上,因為現在的iOS系統是為了應對輿論和負面新聞而設計的,設計的意圖并不對。如果是蘋果主動作出這樣的決策,才算得上是好產品?!?

          「對于蘋果這種體量的大公司而言,產品設計其實復雜性非常的高。真的是這樣。作為設計師,你需要服務于你的用戶,你還得和公司的利益保持一致,同時,還需要對得起自己的底線和道德。服務于一個大型的企業,確實非常的難做抉擇。對于用戶而言,可以很輕松的直接懟蘋果,說它沒有做對的事情。但是身為其中的設計師,要平衡各方面的需求也壓力,經常會進退維谷。有些用戶因為iPhone 的一些功能,受到了負面的影響,有些人受到的影響比另一部分人更多。但是身為設計師,一個受到各方面制衡的設計師,即使是作出了改變,在很多時候也遠遠不夠。至少在我看來,現在的改變還不夠大?!?

          管理數字化的生活,就像管理健康一樣重要

          「我和數字設備之間的關系非常簡單。我不希望被它所控制。從使用 iPhone 的第一天起,我就用著黑色的壁紙。我不會將一大堆的東西塞進手機,減少被分心的可能性。我的手機第一屏上的應用程序非常少?!?

          「我的意思并不是說這樣做很重要,或者說我推薦這么做,對于人和手機之間的關系,每個人都不一樣,處理方式也都很個人。對于如何處理自己和手機之間的關系,有人讓我提一些建議,我覺得沒有必要,因為我的辦法并不適合所有人。一天喝多少咖啡,抽幾包煙,每個人的情況都不一樣,沒法一概而論。不過,心理健康是一件大事,你和你的智能設備之間,應該保持著平等的關系。這至少是一個大的設計趨勢,是設計師需要關注的焦點。就像可持續性發展已經成為時代的主流訴求一樣,你無法忽視認知壓力的存在,認知設計也勢在必行?!?

          界面設計的未來,以及不可避免的問題

          「我觀察到,界面設計在很自然地進化和發展著,從按鈕到旋鈕,從點擊到手勢操作,從語音交互到情感化設計,均是如此。無論是考慮到用戶的情感訴求,還是進入語音交互的領域,都一定會遭遇一大堆的問題。按鈕和旋鈕的設計是需要考慮到人體工程學的問題,點擊和手勢的交互則牽涉到更具體的壓感和硬件上問題。任何人和機器之間的交互,都一定都會遭遇不自然的狀況和問題,就這么簡單。身為設計師,需要足夠的預見性,才能真正領先于用戶,預測到可能會遭遇的問題?!?

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

           

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合