<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設計中亮色的優點和缺點

          資深UI設計者


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

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

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


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

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


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


          增加可讀性和易讀性


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

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


          提亮導航,使交互更直觀


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

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


          可識別性


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

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


          設定情緒和氣氛


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

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


          時尚的外觀和風格


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

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


          明亮的顏色使用缺陷


          很難搭配


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

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

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

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

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

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

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

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


          失去節奏感


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

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


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


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

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


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


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

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

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



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




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

          資深UI設計者

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

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

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

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

          資深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分鐘教你如何選擇篩選組件

          資深UI設計者

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

          生活需要篩選,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 設計文章 & 教程評論區

          資深UI設計者

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

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

          令人上癮的數字內容,讓我們一刻都離不開智能手機,從某種意義上,它徹底改變了我們的生活,工作,甚至思考的方式。現如今,越來越多的人開始嘗試戒除令人上癮的智能手機,尋找更加健康自由的人機關系。根據今天的調研,過度使用智能手機,確實會有一定機率帶來心理健康的問題。從 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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

           

          全面易懂!寫給新手的信息架構設計指南

          資深UI設計者


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

          很多產品設計師,在畫原型或者設計 UI 的時候癡迷于工具的使用,拿到需求文檔之后急于動手畫圖,忽略了信息架構設計對于產品的作用。


          信息架構作為一個產品的骨架,是產品非常重要的一部分,它決定了一個產品

          的布局和未來的發展方向以及用戶對一個產品的最初印象和整體體驗。毫不夸張的說,好的產品信息架構是產品成功的一半。

          那么到底什么是產品的信息架構呢?該如何設計產品的信息架構?如何評判一個產品信息架構的好壞?我們接著往下看:

          一、信息架構的概念

          讓我們來看一個例子:

          一個飯店需要有哪些設施,如果你是飯店的老板如何合理的排布這些設施,可以讓客戶感覺很舒服的用餐,這個過程就是一個信息架構的過程。他可以讓客戶對你的飯店產生好感,從而下次用餐的時候還會想到來你這里吃飯。

          在排布飯店設施的過程中我們要遵循一些規范,比如用戶的習慣或者施工規范等,正是因為需要遵循這些規范,所以我們需要一個信息架構來體現這些。

          比較官方的信息架構解釋是這樣的:信息架構設計是對信息進行結構、組織以及歸類的設計,好讓使用者與用戶容易使用與理解的一項藝術與科學。

          簡單來說,信息架構設計就是讓用戶可以 容易地理解你的產品是怎樣的。讓他們在使用你產品的時候可以更順利更自然。就像一進入飯店就會有一種感覺,門口是等餐的地方,進去就應該吃飯,如果找洗手間一定不會往門口走,而會往深處走。這就是信息架構的好處:他讓用戶使用同類產品時更容易上手和理解,讓產品更容易被接受。

          二、為何需要信息架構設計

          那對于線上產品來說為什么需要合理的信息架構呢?大家來看下邊3組 app 的 tab欄截圖。你能僅僅從 tab欄就看出這款 app 是什么類型的 app,如何使用嗎?

          很明顯的,第一個是一款購物類 app,第二個是一款圖片社交類的 app,第三個是微信的 tab,雖然首頁名稱是微信,但是我相信如果把名稱換成「聊天」,你還是能認出這是微信的 tab欄。

          從底部標簽欄就可以大致看出產品是用來干嘛的,這就是信息架構的作用。一個合理的信息架構可以讓產品非常容易被用戶理解,可以讓用戶第一眼對產品有一個簡單的認知,指導自己可以用產品做什么事,指導產品提供什么服務。

          再看一組反例:

          這三組 tab欄就讓人很困惑了,看了半天你也許根本不知道這幾款 app 是做什么用的,以及如何使用。如果你讓用戶很困惑,他會分分鐘拋棄你的 app。

          所以信息架構的核心目標是為用戶提供更好的體驗,獲得更高的留存率。

          一款信息架構良好的產品必然遵循以下兩個標準:

          • 讓用戶打開 app 的第一秒就知道這是一款什么 app,怎么用;
          • 用戶想要使用某一功能時,能夠第一時間找到。

          我們通過這兩個標準來印證下上邊3個正面案例的信息架構:

          相信你能很快速的識別出這款軟件的用途和用法,這就給提升留存提供了基礎。

          那么如果信息架構像架構一個飯店一樣簡單,那么信息架構為何需要設計?

          因為你的實際產品功能可能有這么多:

          畢竟我們不是支付寶,沒辦法把功能像豆腐塊一樣堆疊起來,我們需要一些科學的設計方法。

          三、如何設計信息架構

          合理的信息架構設計需要考慮5個步驟:

          下面我來分步講解一下。

          1. 了解用戶,場景,習慣

          首先你的產品是給到用戶用,你當然要最大限度的了解你的用戶,我們先來看下一個概念:「心智模型」。

          心智模型是經由經驗及學習,腦海中對某些事物發展的過程,所寫下的劇本。人類在經歷或學習某些事件之后,會對事物的發展及變化,歸納出一些結論,然后像是寫劇本一樣,把這些經驗濃縮成一本一本的劇本,等到重復或類似的事情再度發生,我們便不自覺的應用這些先前寫好的劇本,來預測事物的發展變化。心智模型是你對事物運行發展的預測。再說得清楚一點,你「希望」事物將如何發展,并不是心智模型,但你「認為」事物將如何發展,就是你的心智模型了。

          假設你從沒見過 iPad,而我剛遞給你一臺并告訴你可以用它來看書。在你打開 iPad 使用它之前,你頭腦里會有一個在 iPad 上如何閱讀的模型。你會假想書在 iPad 屏幕上是怎樣的,你可以做什么事情,比如翻頁或使用書簽,以及這些事情的大致做法。即使你以前從沒有使用過 iPad,你也有一個用 iPad 看書的「心智模型」。你頭腦里的心智模型的樣式和運作方式取決于很多因素。

          用戶往往帶著以往使用 APP 的一些習慣來使用產品;線下做同一件事的習慣、生活習慣、心智模型等。要考慮哪些是可以創新的,哪些是用戶習慣,要在不妨礙用戶習慣的情況下作出更能讓用戶接受的創新。

          你要考慮清楚4個問題:

          用戶通常用你的產品做什么?

          用戶用你的產品來做什么?用來看新聞還是用來聊天?一定要考慮清楚用戶的核心流程。從核心流程中提取信息架構的基礎形式。

          用戶用這類產品最關心什么?

          用新聞app 時咨詢的真實性實效性,購物類app 精準搜索和售后功能,就是你的用戶關注點在哪里,這是一個很好的突破口。

          用戶有哪些思維定式?

          和用戶年齡身份相關的屬性,產品體驗符合相應用戶的思維模式,心智模型,用戶就會比較容易接受。

          用戶用什么類似的產品?

          類似的產品也會帶來一些用戶習慣,迎合這些習慣也會讓用戶快速上手接受產品。

          了解了你的用戶場景和使用習慣之后你會知道如何做出符合用戶心智的,容易被接受的產品,你不需要擔心做的產品沒有差異性或者沒有競爭力,我們可以在核心流程之外做出創新點,讓用戶覺得你的產品又好用又有些不一樣。

          2. 了解業務

          這里的業務包括與產品接觸的內部及外部的人提出的需求,比如公司的運營,市場,銷售,BD,公司的外部合作伙伴等。

          這些人的需求我們也要收集,比如運營人員想更方便的管理注冊用戶,銷售想更多的添加廣告位,市場推廣人員要求能統計不同渠道帶來產品的下載量,注冊數,活躍數,合作伙伴需要進行賬號,內容互通等,總之只要與業務有關的人的意見,盡可能的在產品設計前多收集,即使做不了,也告訴他們原因,要不然產品上線后就等著被他們吐槽吧。

          3. 調研競品的信息架構

          在做一款 app 時,我們面臨了和無數競品爭搶用戶的局面,這時候分析競品就非常必要,我們需要在知己知彼的前提下,做好核心流程功能,再思考如何在差異功能上做好突破。

          首先我們需要把競品功能梳理成思維導圖:

          其實思維導圖就是信息架構比較基礎的形式了,但是光有思維導圖沒用,我們需要對思維導圖進行分析。

          我以前做過的一款人脈 app 為例,當初對比了領英、赤兔和脈脈,分析了這4款 app 的思維導圖后得出的共性和差異點:

          共性就是要符合用戶使用習慣的地方,如果你調研的3-5個產品都這么做了,很可能這里是產生用戶習慣的地方,是我們需要去遵循的,這是獲得用戶好感度的基礎。

          分析產品時你一定也會得出一些產品差異的地方,而這些差異就是你的產品競爭點,也是別人用你的 app 不用其他 app 的理由。比如人脈軟件都會有社交相關的功能,但是脈脈會比較注重職場招聘、直播等互聯網職場人比較關心的點,這樣對應的用戶群體就比較會吃你這套,會提升用戶的粘性。

          相信你在梳理了競品的信息架構,總結了共性和差異點之后對產品的信息架構已經有一個比較清晰的認知了,在做自己產品信息架構的時候也會更胸有成竹。但是最后還有一件事我們可以做,就是對我們的要做的產品功能做卡片分類。

          4. 卡片分類

          卡片分類法是我們工作中常用到的一種方法,它可以在用戶側再一次印證和檢測我們的產品信息架構。

          卡片分類法就是讓用戶對功能卡片進行分類,組織,并給相關功能的集合重新定義名稱的一種自下而上的整理方法。

          說直白點就是準備一堆卡片,在這些卡片上寫上你所需要包含的功能名稱,然后給到用戶側,讓用戶進行分類,讓用戶進行組織,來了解用戶到底覺得這些功能應該怎么合并怎么歸類的一種方法。它可以幫助你站在用戶角度去了解用戶是怎么認定這些功能的,也可以在卡片分類法的過程中更加了解用戶是怎么想的。

          卡片分類法大概的步驟和注意點是這樣的:

          卡片分類法最終會產出這樣的一個樹形圖:

          5. 產出信息架構

          其實到這一步信息架構大概的雛形已經有了,你可以用 axure 或者類似 mindnode 的軟件把信息架構梳理出來。

          接下來你要對信息架構進行重要性分級,這樣在產品開發的前期可以幫助梳理產品研發的優先級,集中精力解決用戶的最大痛點。在產出頁面時也可以更好的把控頁面元素的大小層級,位置關系等。

          最后你需要注意層和度的平衡:層一般不超過5層,超過操作困難。度過多會讓用戶認知成本增加,容易找不到想找的內容。這里的度指的是同一頁面展示的信息量。


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


          如何用最簡單的點線面,解決沒靈感?

          ui設計分享達人

          點、線、面和構成手法,就像是大廈的基石一樣,看起來毫不起眼,但力量卻無比強大。

          UI設計中的7個小技巧

          博博

          UI設計中的7個小技巧

           賀紅陽


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

          原文鏈接:https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

          原作者:Adam Wathan & Steve Schoger 

          譯:賀紅陽


          用設計戰術代替天賦,提高我們的設計能力。


          在我們設計開發過程中都不可避免的遇到需要做出視覺決策的情況,除了

          專業資深高級設計師外,其他非專業設計師外不管喜歡與否,又或者我們的

          公司沒有全職設計師,需要我們自己為新的產品實現UI。


          有時候我們正在攻克一個新項目,并希望它看上去比之前的另一個網站更好。對于我們(技術人員或者非專業設計師來說)難為的說“我永遠也無法讓這幅畫好看,因為我不是藝術家?!钡聦嵶C明,有很多技巧可以提高我們的工作水平,而不需要有平面設計背景。


          這里有7個簡單的方法,大家可以使用來改進我們的設計工作。


          1使用字體顏色(color)和字體重量(weight)來代替字體大?。╯ize)創建視覺結構層次



          當我們設計UI,樣式文本化的時候,常見的錯誤是過于以來字體的大小,也就是字體的字號來控制層次結構。

          “這文字重要嗎?那我們就讓它大點兒?!?

          “這是次層級文字嗎?那我們就讓它小點兒?!?

          不要把所有的重擔都放在字體的大小上,試著使用字體顏色和重量來完成同樣的工作要求。

          “這文字重要嗎?那就選用一個字重大些的字體,讓它變得粗些。”

          “這是次層級文字嗎?那我們就用一個明度高些的字體顏色?!?

          試著并堅持使用2-3種顏色:

          用深色而不是黑做主要內容,就像一篇文章的標題。

          灰色用做次層級文字內容,像一篇文章的出版日期信息。

          更淺的灰用作輔助次次要內容,也許是頁腳的版權聲明信息。


          同樣的道理,對于UI工作來說兩種字重通常就足夠了:

          就英文字體來說,對于大部分的文本,普通字重(400—500),如果想要強調的文本可以是(600—700);就中文來講,主要內容字體一般在常規30-34,標題和想要強調的文本中黑36-42


          在ui工作中,英文字體遠離字重在400以下的字體,中文字體遠離16像素以下的字體。如果你考慮使用更輕的字體重量來淡化一些文字,那就使用一個更淺的顏色或者更小的字體大小代替。


          關于字體重量(font weight)字體粗細的值:

          normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 繼承值

          font-weight的屬性值有3種指定方法:第1種是關鍵字法,關鍵字包括“normal”和“bold”兩個;也是我們常見的;第2種是相對粗細值法,相對粗細也是由關鍵字定義,但是它的粗細是相對于上級元素的繼承值而言的,包括“bolder”和“lighter”兩個;第3種為數字法,包括從“100”到“900”的9個數字序列(注意,只能是100、200之類的整百數)。這些數字序列代表從最細(100)到最粗(900)的字體粗細程度。每一個數字定義的粗細都要比上一個等級稍微粗一些。

          字體的粗和細這種描述方法本身就是一種相對描述,所謂粗和細也必須要有一個參照體。例如,在上面介紹的3類屬性值之間需要有一個相互對照匹配的過程,這是一個很難界定的過程。關鍵字“normal”相當于“400”,“bold”相當于“700”。除了“normal”和“bold”以外的其他關鍵字常常會令瀏覽器產生誤解,無法直接和數值相匹配,此時字體的粗細程度通常取決于字體本身的設置。

          另外,有的字體看上去比較粗,但是它們的字體描述卻是“Regular、Roman、Book(常規)”、“Medium、Semi-(半)”或者“DemiBold、Bold、Black(黑體)”等字樣,這主要取決于該字體本身“normal”表示的粗細程度。


          2不要在彩色背景板上使用灰色文字


          在白色背景下將文本設置成淺灰色是淡化內容重要性的一個好方法。但是在彩色背景此效果就不那么好了。這是因為我們在白色上看灰色是弱化了對比關系。讓文本顏色更接近背景顏色,實際上創建了信息層次結構,而不是使用更亮的灰。

          在彩色背景下有兩種方法降低對比度:

          1減少白色文本的透明度

          使用白色白色文本,降低不透明度。讓背景顏色稍微滲透些,以與背景不沖突的方式淡化文本

          2.基于背景,選一個顏色

          當你的背景是圖片或是圖案;或者當降低文字的透明度太枯燥或是文字降低透明度被沖淡時,這種方法都優于降低透明度的方法。

          選擇一個和背景相似的顏色,調整它的飽和度和亮度直到你覺得合適為止。


          3.偏移卡片的投影

          不要使用大的模糊和擴展值,這樣會使得卡片的陰影更明顯,所以添加一個垂直偏移量。它會看上去更自然,因為它模擬了一個從上往下發光的光源,就像我們真實世界中經??吹降哪菢印?


          這種內嵌式陰影可以很好的用在輸入表單上

          如果你有興趣學習更多關于陰影設計的知識, Material Design是很好的設計指南(https://material.io/design/environment/elevation.html)


          4盡可能少使用分割線和描邊

          當你需要在兩個元素之間創建分割時,試著不使用分割線。

          雖然分割線是區分兩個元素的好方法,但它并不是唯一的方法,使用太多分割線會讓你的設計感覺很雜亂。

          下次當你發現自己想要使用分割線的時候,試試下面的方法:

          1使用卡片投影

          卡片投影是一個非常好的區分元素的輪廓方式,就像邊框分割線一樣,完成同樣的目標但它更巧妙而不分散注意力

          2使用兩種不同背景顏色

          為相鄰的元素添加稍微不同的背景顏色通常是在他們之間創建區別的好方法。如果你已經使用了不同的背景顏色,又使用了邊框,那請試著把邊框刪掉,你可能不需要它。

          3添加額外的空間,也就是留白。

          除了簡單地增加距離之外,還有什么更好的方法在元素之間創建分離呢?在空間上加大更多的距離(更多的留白)是一種好的方法,在不引入任何新的UI組件元素時來區分元素

          5.不要放大本來應該很小的圖標

          如果你正在設計一個可以使用一些大圖標的頁面,像一些登錄頁面的“特色”部分,你可能本能的使用免費圖標庫里的圖標,然后放大它們的尺寸直到符合你的需要。

          兩個超棒的免費圖標庫分享給大家:

          1FONT AWESOME (https://fontawesome.com/icons?d=gallery)

          2 Zondicons(http://www.zondicons.com/)


          “它們畢竟是矢量圖,所以如果你放大尺寸質量是不會受到影響的對吧?”

          雖然我們增大矢量圖片的尺寸它們的質量是不會下降的,但是當我們把它們放大到3倍或者4倍的時候,那些原來用16-24px繪制的圖標永遠不會看起來非常的專業。因為它們缺少細節,并且總是感覺不成比例的矮胖矮胖的。

          如果你只有小圖標,試著把它放在另一個圖形里,并且給這個圖形一個背景色:

          這可以讓你的圖標尺寸更接近原始圖標尺寸,同時仍就充滿大的空間。如果你有足夠的預算,你也可以使用高級優質圖標集做設計,在大的尺寸上使用大的圖標,付費圖標庫如Heroicons和Iconic。

          1  Heroicons  (http://www.heroicons.com/)

          2   Iconic(https://useiconic.com/)


          6.在平淡的設計中使用超重的彩色的邊框

          如果你不是一名平面設計師,相比其他作品里的漂亮攝影照片或者顏色豐富的插圖作品,你如何在你的uI設計中添加少許的視覺天賦。


          有一個簡單的技巧可以讓你的界面有一點不同,那就是添加超重的彩色邊框在你的部分界面里,它會使得你的界面不同于其他平淡的設計。

          例如,沿著警告信息的側邊加一個超重的彩色邊框:

          又或者是高亮顯示激活的導航欄項目

          甚至是在橫穿整個布局的頂部:


          它不需要任何的設計天賦增加一個彩色的矩形在你的UI作品里,并且它可以讓你的網站像你期望的那樣更具設計感。


          選顏色很困難?試著從有限的顏色板中選取顏色,例如dribbble的顏色搜索,以避免被傳統顏色選擇器帶來的無盡的可能性。


          7不是每一個button按鈕都需要一個背景顏色


          當用戶在一個頁面上有多個可操作路徑時,很容易陷入基于純語義設計行為陷阱。

          如Bootstrap這樣的框架式網站鼓勵你這樣做,當你添加一個新按鈕時,它會給你一個語義樣式菜單供你選擇。

          “這是一個正面的行為嗎?是,那就使用綠色?!?

          “這是刪除數據的操作嗎?如果是,那就使用紅色按鈕?!?


          語義是按鈕設計的重要部分,但還有一個常常被忘記的重要的維度,那就是等級/層次結構(hierarchy)


          頁面上的每個按鈕放在哪都基于重要性金字塔的某個位置。大部分頁面僅有一個主操作按鈕(primary action),幾個不重要的次級操作(secondary actions),和幾個很少使用的三級操作(tertiary actions)


          當設計這些操作按鈕時,最重要的是考慮它們在層次結構中的位置。

          主要操作按鈕應該是顯而易見的,實心純色的,與背景顏色是高亮度對比。

          次要操作按鈕應該是明確清晰但不突出。輪廓風格或者是與背景顏色低對比是很好的選擇。

          三級操作路徑應該是可發現但不顯眼。將這些操作路徑設置成鏈接樣式通常是最好的方法。


          “那破壞性的行為呢,難道不應該是紅色的嗎?”

          不一定!如果破壞性操作不是頁面上的主要操作路徑,那么最好對其樣式按照二級或者三級按鈕的形式處理。


          保存大的,紅色的并且加粗的設計樣式,以便于當界面的主要操作路徑是負面的操作路徑時使用,比如在確認的對話框中:






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


          日歷

          鏈接

          個人資料

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

          存檔

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