<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>

          首頁

          圖標設計,你需要了解這些...

          純純

          目錄

          • 圖標風格匯總

          • 圖標設計流程

          • 案例講解

          • 圖標資源輸出



          01 常見圖標風格匯總

          • 線性

          • 面型

          • 線面



          1、線性

          • 單色

          • 雙色

          • 漸變

          • 不透明度

          • 一筆成形

          • 斷點



          1.1單色

          單色線性擁有簡潔、清晰的特性,在視覺層級上較低,適用于基礎功能圖標。b端較為常見,移動端常見在設置頁面或導航欄通知、分享等圖標設計上。 


          1.2雙色

          雙色線性在單色的基礎上豐富配色,解決了單色線性原本過于單調的問題,在提升趣味性的同時,也將視覺層級進行了提高,同樣適用于基礎功能圖標。在使用過程中需要注意的是豐富的配色會偏向年輕化,需要考慮是否符合產品風格及主流目標用戶審美。 



          1.3漸變

          線性漸變還可以在用色上進行區分,簡潔的用色可以給人帶來科技、炫酷感,在車載ui中較常見。豐富的漸變配色則更適合運營入口設計,有著年輕化、熱烈的氛圍。 



          1.4不透明度

          線性雙色可以和不透明度風格進行很好的比較,前者視覺更跳躍,個性更鮮明。而后者在使用時普適性更強,即豐富配色細節,又避免視覺過于跳躍(可以把它理解為同類色配色)。所以在大多數使用場景下,不透明度風格都是一個很好選擇。 



          1.5斷點

          斷點風格有線性單色&雙色該有的個性,并且在線性雙色基礎上繼續提升趣味性,使用需要注意產品目標人群年齡段。 



          1.6一筆成型

          該風格設計感和個性都極強,很考驗設計師對造型繪制的把控,功底不夠就很容易導致設計后出現識別問題。所以設計難度較大,且延展性較弱,難以表達復雜語義,使用需謹慎。



          2、面性

          • 單色

          • 雙色

          • 不透明度

          • 晶白

          • 磨砂玻璃

          • 等軸側(2.5d)

          • 漸變

          • 新擬態

          • 輕質感

          • 明暗質感

          • 寫實

          • 抽象

          • 卡通插畫

          • 像素風格



          面性與線性的區別在于前置視覺面積更大,整體視覺層級比線性高。下面部分和線性風格重疊的內容就不贅述。




          2.1單色



          2.2雙色



          2.3不透明度

          面型不透明度風格,通過調節前后不透明度可以帶來較強的空間感,使用場景較廣泛。



          2.4晶白

          晶白嚴格來說也算質感圖標(白色質感)的一種,常見于品類圖標設計,通過透明度、投影、漸變等參數調節,使整體立體感和空間感都很強。



          2.5磨砂玻璃

          又叫毛玻璃風格,是通過背景模糊,或剪切模糊圖層的技法來表達通透、有層次、精致的視覺感受,但由于容易與淺色背景相融,造成對比度不足難以識別的問題,所以在使用中需要注意無障設計。



          2.6等軸側

          也叫2.5d,有很強的趣味性,及識別度,適合重要入口或運營設計。但這類風格較為卡通,且表現花哨。使用需要注意應用場景及目標人群年齡段,避免干擾信息閱讀和不符和產品風格。



          2.7漸變

          這類風格可以很好的吸引用戶注意力,在電商、美食類產品中較常見,主要注意配色干凈協調。



          2.8新擬態(Neumorphism)

          新擬態圖標色彩相對單一,與背景融合度較高,通過高光、投影表現一定的立體感。通常是整個產品就是新擬態風格時才使用。所以該風格局限性較大,再有這類風格與背景對比較弱,無障設計問題較大。



          2.9輕質感

          通過大量漸變、投影來表現立體感,整體風格偏年輕化,常見在教育類產品中,使用注意配色干凈和諧。



          2.10明暗質感

          通過調節同一色相不同明度、飽和度來營造前后空間感,整體風格統一。


          2.11寫實

          這類圖標特點很明顯,有極高的識別度,目前美團外賣品類區入口就是該風格,整體偏年輕化。主要考驗設計師造型繪制、技法表現能力。



          2.12抽象

          通過幾何圖形組合、色彩使用來表達美的視覺感受。這類圖標藝術(裝飾)價值更大,不追求識別度,美觀即可。



          2.13卡通插畫

          這類風格既可以做圖標又可以做空狀態插圖,設計美觀有特色即可。



          2.14像素風格

          這類移動端界面較少見,目前只在一個海外電商產品(Jollychic)中看過,還有就是一些像素游戲中,比如「泰拉瑞亞」、「我的世界」。



          3、線面

          • 線面

          • 描邊插畫



          3.1線面

          和線性雙色圖標類似,趣味性較強,具備個性化特點,可以做Tab選中狀態。 



          3.2描邊插畫

          類似卡通插畫,在卡通插畫基礎上加入描邊。同樣顏色,在一些特定的前后交接處利用線條做區分,算是多一種設計表現形式,同樣美觀有特色即可。 




          4性格

          • 粗線

          • 細線

          • 圓角

          • 直角



          4.1粗線

          力量感、穩重、男性等感受



          4.2細線

          品質感、精致、女性化 



          4.3圓角

          安全、親和、年輕



          4.4直角

          嚴謹、正式、果斷利落 

          由于圖標風格繁多,所以以上列舉并不包含所有圖標風格。



          02 圖標設計流程

          • 明確語義

          • 關鍵詞詳解發散

          • 確定風格

          • 提取造型

          • 創意輸出



          1、明確語義

          圖標存在的目的是起引導作用,在豐富頁面視覺的同時,幫助用戶更快的獲取信息(當然圖標的使用意義還有很多)。設計師在將文字翻譯成圖標前,必須先理解其文字含義。因為最終呈現的圖標,需要用戶一眼能準確反翻譯其中含義(藝術抽象、裝飾類圖標除外)。

          在C端設計中,以Tab為例,一些常見文案:首頁、分類、發現、我的,這類語義還算比較清晰的。但在B端設計或工具類APP中就會遇到一些復雜語義。以我的工作來說,目前在做一款網站搭建工具,后臺常會需要設計組件及對應的圖標,比如:滑動商品、多圖列表、上拉圖文列表這些語義比較復雜的圖標,在一定程度上會比較難精準傳達文案。



          2、關鍵詞詳解發散

          這一步有點類似情緒版使用,但不同的是:我們需要將確定的詞(A)進行詳細解釋,再將解釋文案中關鍵的詞語進行發散,得出一系列相關聯的詞(A1、A2、A3…)。有時間還可以根據這些詞找到對應的圖片,再看在這些相關聯的圖片中,有哪些細節可以傳遞最開始我們確定的那個詞(A)的意思。



          3、確定風格

          我們可以借助情緒版,根據產品定位和目標用戶描述,再結合應用場景,在目前已有的風格中找到符合產品氣質,符合當前模塊視覺層級的圖標風格。

          前面我們已經了解了目前常見的圖標風格有三大類:線性、面型、線面,其中還有很多細分,比如在線性中又分粗線(沉穩、力量)、細線(品質)、曲線(女性化),還有圓角、直角,每種類型所傳遞的感受都不同。在創意前期,我們將每個點合理進行隨機組合(如下圖)即可創造一種更新穎的風格。



          4、提取造型

          經過關鍵詞詳解發散,其實我們已經獲得了很細節點,接下來將這些細節點進行合理融合后,就可以得到代表同一語義但形式各異的基礎圖標樣式(此時還只是想法階段,可以通過手繪方式記錄組合形式,不用特別精細化)。




          5、創意輸出

          在設計執行前我們需要先了解兩個大知識點: 
          • 圖標設計規范

          • 圖標設計注意點


          5.1圖標設計規范

          • 常見圖標尺寸

          • 圖標盒子使用


          5.1.1、常見圖標尺寸

          在界面圖標設計中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)



          5.1.2、圖標盒子使用

          什么是圖標盒子?其作用是什么?

          圖標盒子即圖標約束網格,來源于Material design。使用圖標盒子有利于使我們創造的系列圖標保持規范與統一。



          5.2圖標設計注意事項

          • 簡潔美觀

          • 易于識別

          • 細節統一

          • 像素對齊

          • 視覺大小一致

          • 飽滿透氣

          • 融入品牌基因



          1、簡潔美觀

          圖標是否美觀,會受設計師對圖標造型把控、圖標構成元素比例、配色等設計能力影響。在UI界面功能圖標設計中,通常會盡量減少不必要的細節,降低圖標復雜度,來幫助用戶快速識別。當然圖標也有豐富細節的做法,常見在一些重要運營入口上。



          2、易于識別

          識別度的問題,在最前面明確語義中就有提到過,這里就不贅述。



          3、細節統一

          在細節中包含:表現風格、描邊粗細、端點類型、圓角大小、斜角角度、配色、投影參數等(不同風格圖標的細節不同,這里只是列舉部分),上述細節在系列圖標中都應保持一致。



          4、像素對齊

          在圖標繪制中,需盡量避免坐標位置xy或寬高參數出現小數點,以此保證最終導出的圖標是清晰的。



          5、視覺大小一致

          由于不同圖標外輪廓不同,就會導致哪怕在物理大小上相同的圖標(假設都是24x24),但視覺上可能還是會給人大小不一致的感受,因此我們需要借助前面提到的圖標盒子進行約束調整。


          6、飽滿透氣

          圖標的飽滿透氣,不一定需要加入很多筆畫(描邊、裝飾等)細節。而是盡可能在形成風格的同時,簡化能影響識別度的關鍵筆畫,通過調節筆畫大小、長短、位置使圖標達到一個最平衡狀態。


          以如下途牛_我的頁面_功能區圖標為例:

          圖中標紅圖標就存在飽滿度不足,及內部較擁擠的情況,第一感受是看起來不舒適,品質感比較低。除此外,還存在如下問題:


          • 圖標大小很明顯不一致

          • 設計語言不統一,有圓角有直角

          • 圖標風格不一致,有透明度+分割形式(我的保單)、有純透明度形式(專屬顧問、我的收藏)、還有其余單色實心形式



          7、融入品牌基因

          在圖標中融入品牌基因可以有效的提升產品品牌感,作為高階設計師必備技能之一,常見提取維度:

          • 顏色

          • 設計語言

          • Logo輪廓 


          以我之前的豆果美食項目為例,提取到如下細節:

          顏色:提取黃色、綠色兩類顏色 
          曲率(設計語言):品牌Logo走線順滑、自然、圓潤,個性鮮明 
          分離(設計語言):黃色區域與綠色區域雖不相交,但存在聯系。(分離間留白) 


          根據提取到的基因,最終得到如下兩套風格不同,但語言相同且都具備品牌感的圖標。


          Logo輪廓:在圖標中融入品牌logo外輪廓(Google Play),或根據logo輪廓結合應用特性進行延展(Microsoft)。



          03案例展示

          就以途牛為例,對我的頁面功能圖標進行優化。 


          1、明確語義

          根據文案進行詳細翻譯,幫助我們充分理解文案。



          2、關鍵詞詳解發散

          以「專屬顧問」為例:

          釋義:有專門的知識或經驗,受聘為機關團體或單獨個人提供專門咨詢的人。

          提取釋義中關鍵信息,生成關鍵詞:專業專人,再根據關鍵形容詞發散一系列具象名詞。



          3、確定風格

          根據產品調性和模塊視覺層級以及考慮延展性,初步確定如下風格組合起來是比較適合:


          線性:雙色、不透明度、斷點 
          面性:單色、雙色、不透明度、輕質感、明暗質感 
          線面:線面 


          在實際查看中,發現Tab的風格為單色+不透明度+斷點風格。

          為了和Tab拉開差異,最終確定以如下風格進行組合表現比較符合產品調性:

          線性:雙色

          面性:單色、雙色、不透明度、輕質感、明暗質感

          線面:線面



          4、提取造型

          通過手繪或大腦想象進行造型構思,這里我就不展示手繪過程(行吧,我承認就是畫的太丑了不敢放)。



          5、設計執行

          由于不同風格對圖標造型構思有所影響,且圖標類型很多,不同特點組合起來樣式更多。案例精力有限,所以只以線性雙色風格做演示,希望大家靈活使用。


          這一步就是將手繪圖形矢量化,在矢量化創意過程中,我們可能會對手繪的圖形進一步簡化細節或新增造型,這都很正常。只需注意在整個繪制過程中遵循圖標設計規范,以及注意圖標設計注意事項即可。

          圖標盒子使用


          創意輸出


          Tips

          在繪制造型時需注意,圖標文案詳解中的關鍵詞也有優先級,以如下「禮品卡」圖標為例,是表達禮品的意思多?還是表達卡的意思多?這個會影響圖標中相關元素的面積大小。站在商業角度看可能會更傾向于方案2,突出禮品,來吸引用戶。站在入口文案清晰傳達的角度,可能我會更傾向于方案1。 

          1or2?


          最后對專屬客服進行多風格嘗試,最終效果如下:


          附上部分繪制過程中的淘汰稿:



          04圖標資源輸出

          在將圖標輸出給前端前,需要溝通好使用何種格式,目前常用圖標格式分為兩大類: 


          矢量格式

          • SVG:縮放無損、體積小、支持前端樣式修改參數、單色情況下方便前端修改顏色來表達圖標狀態,減少重復上傳。


          位圖格式

          • PNG:支持透明格式

          • JPG:兼容性強,適合大尺寸高飽和度圖像

          • GIF:動態圖標使用,缺點是透明情況下邊緣容易出現鋸齒。



          這里主要介紹靜態圖標中,svg格式在工作中如何輸出給前端同學使用(借助iconfont)。


          svg圖標交接方式:

          1、圖標資源優化

          在iconfont官方繪制指南中有描述,在導出前需要按如下規則優化圖標資源:



          2、選中圖標導出svg格式

          以Figma為例,優化圖標資源后,選中圖標將輸出格式選擇為導出svg。



          3、上傳iconfont

          在資源管理下,選擇需要上傳的位置。


          選擇上傳圖標 



          4、選擇顏色提交模式

          去除顏色并提交:適合單色圖標,去除顏色提交可以方便前端使用代碼修改參數,減少不同狀態圖標重復上傳。

          保存顏色并提交:適合多色圖標(注意:在單色情況下,選擇保留顏色提交,前端則無法通過代碼修改圖標顏色)。



          最后當我們把圖標都上傳好后,就可以將前端同學拉入團隊項目中開心進行玩耍。



          好了,以上就是本篇要分享的全部內容,希望對各位有所幫助。



          文章來源:站酷 作者:幺零三

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          別光抄了,信息卡片應該這樣設計!

          純純

          工作中我們經常會接到一些信息卡片的設計需求,在早期很長一段時間里都困擾著我。和大多數剛入門的小白一樣,當接觸到這類需求的時候,下意識就是打開自己的的Eagle,找合適的參考,去借鑒排版布局。但是其實最后只知道參考這樣做好看,對于作者的設計思路并不清楚。后面我嘗試去總結其中的規律,也得出了自己的一些設計思路。





          02 這里講的信息卡片是什么?

          讓我們先看下各類App中,一些比較不錯的信息卡片長什么樣:




          03 一個信息卡片包含什么內容?

          • 圖片

          • 圖標

          • 文字

          • 標簽

          • 按鈕

          • 布局



          1圖片 】

          圖片理解很簡單,就是該卡片想表達的信息主體,可以是商品、風景、插畫等,PGC內容圖片通常由運營把控,UGC內容為用戶自行上傳。雖然上線后實際上傳的圖片,對于設計來說沒有太多關系,但在設計稿中還是需要嚴格控制圖片質量。(一定程度上也能提高過稿率)

          圖片挑選需要注意如下:

          • 高清無碼

          • 主體突出且簡潔

          • 配圖與文字信息相關聯

          • 多圖片情況下,視線保持同一水平線或同一角度



          2【 圖標 】

          圖標的出現有以下幾類:品牌特定logo、特殊字段圖形化(如性別、定位、點贊、VIP、關閉等等,將字段圖形化后可以減少該組件內的文本信息,方便設計排版的同時提升整體閱讀體驗)、氛圍點綴(主要在于豐富卡片,提升設計感來吸引用戶注意)

          圖標設計需要注意如下:

          • 清晰度:品牌圖標避免過小,導致難以分辨。

          • 識別度:字段圖形化后一定需要確保擁有足夠的識別度,盡量在大眾認知范圍內。比如“+”可以代表添加和關注、“x”代表關閉,“大拇指”和“愛心”代表點贊、“皇冠”代表VIP等等。

          • 風格一致:氛圍點綴圖標在配色上,需要保證與產品調性一致,或在色彩情緒上,與該模塊傳遞的感受一致。還有一些細節,比如線性圖標描邊粗細,圓頭還是方頭端點,這類盡量保持一致(當然也可根據情況演變新的風格,但注意風格種類不宜過多)



          3【 文字 】

          文字即對圖片的描述信息,通常分為:標題、正文、輔助信息、優惠信息、數據信息(評分、價格、點贊評論數等) 

          文字信息處理需要注意如下:

          • 對比:需明確頁面信息權重,突出重點,便于有效傳遞信息。移動端常見對比方式:特殊字體對比、字號差對比、色彩對比、修飾元素(點線面)點綴對比。重點需要注意,避免在一個卡片中,采用過多不同大小字號和顏色去表現信息層級,盡量使層級精簡與規范。

          • 對齊:保證卡片內信息之間存在某種視覺聯系,信息結構清晰。對齊方式分類:左對齊(符合左到右的閱讀習慣,閱讀體驗最佳)、右對齊(閱讀類文本比較少見,一般是為了將分好組的信息填充卡片四角)、居中對齊(居中傳遞嚴肅、正式感,在移動端中較少見,適合信息較少的情況下使用)

          • 親密性:將信息通過留白、分割線、色塊等方式來成組劃分,避免信息散亂。



          4【 標簽 】

          標簽指活動通知、產品賣點、重要時間、優惠信息等這類需要突出的內容,標簽按視覺層級由高到底依次劃分為:異型標簽、色塊型標簽、描邊型標簽3大類。 


          標簽處理需要注意如下:

          • 視覺層級:一個卡片內可能出現不同類型的標簽,比如同時有活動通知、優惠信息、產品關鍵詞,這個時候就需要了解各類信息重要層級,正確選擇標簽形式(異型、色塊、描邊),幫助用戶快速抓住產品重點。

          • 極限場景:標簽內字段不宜過長,需要考慮最大寬度,進行合理布局。(牽扯到屏效比)

          • 呼吸感:合理定義標簽內部文字與底板的上下左右間距,避免擁擠。

          • 設計感:標簽多數是帶有活動屬性,在設計手法上可以嘗試破型設計,還可以嘗試加入一些小圖標、紋理,一方面營造活動氛圍,提升產品品質感。一方面圖標具有一定語義,可輔助用戶識別。(適合單個特殊標簽添加,而不是一類標簽,因為多個一樣的標簽配上圖標同時展示太亂)

          • 對比度:在色塊標簽中需要重點注意,通常色塊標簽又分以下3類:有彩色底板+白色文字、帶不透明度的有色彩底板+有彩色文字、消色底板+消色文字,在挑選顏色時需注意文字與底板對比足夠清晰,減少閱讀障礙。



          5【 按鈕 】

          按鈕是卡片上最重要的元素之一(部分卡片也可能沒有),作為一個行動點,Ta的作用在于吸引用戶點擊。按鈕在表現形式上和標簽一致,我們最常見的有彩色底板+白色文字、消色底板+消色文字、描邊框+文字(有彩色描邊或有彩色字)。 


          按鈕和標簽在處理上很相似,可參照標簽。



          6【 布局 】

          布局指上述所有圖片、圖標、字段等信息,在卡片內的排布方式,常見布局方式:上下布局、左右布局、居中布局。 


          信息布局需要注意如下:

          • 拓展性:卡片中字段的長短對布局的影響較大,字段較長且多的情況下需要的占用的空間更多,所以常見是上下布局。

          • 屏效比:上述拓展性與屏效比的關聯緊密,在卡片中,為了保證一行文字最大顯示,通常文字都是單獨一行,避免左右存在元素占用文字橫向空間。但單獨一行就意味著增加了卡片高度,雖然單個卡片內文字顯示多了,但整個一屏中展示內容變少。為了便于理解上面這段話,這里我們可以看到淘寶這個案例,淘寶的推薦卡片中信息很多,在遇到文案很長的情況下,為了平衡上面講的這個問題,使用到了如下較少見的布局方式。

          • 合理性:在列表式左右布局中,是選擇左文右圖,還是左圖右文。這需要看產品類型,在新聞資訊類產品中常見是左文右圖,而在美食、電商類產品中是左圖右文。再有在信息布局上也應符合人眼左到右,上到下的閱讀習慣。



          04 如何做好一個信息卡片?

          • 明確產品類型

          • 明確應用場景

          • 了解目標用戶

          • 劃分信息權重

          • 同類信息歸組

          • 增強信息對比

          • 設計細節表現

          • 確定最終布局


          1【 明確產品類型 】

          產品類型不同主要對布局產生影響。

          • 以文字為主的產品,比如前面講到的新聞資訊類,通常采用左文右圖的布局。

          • 以圖片為主的產品,比如美食、電商類,通常采用左圖右文或上圖下文。 

          原因:新聞資訊類,吸引用戶產生點擊的并不是因為圖片,而是具體的標題,通過標題用戶才能了解更多關于該卡片的信息。而美食、電商類產品則相反,這類產品圖片比文字更吸引人。



          2【 明確應用場景 】

          在我之前一號店改版中提到,信息卡片可以分為列表式和卡片式兩大類,對應的優缺點如下: 


          卡片式:在卡片式中圖片是設計的重中之重。這是因為人是視覺動物,在卡片式設計中使用高質量的圖片能瞬間抓住用戶的眼球??ㄆ皆O計實現了圖文的完美結合,能給用戶呈現良好的視覺效果。

          應用場景:

          • 圖片為主,需要利用圖片給用戶帶來良好的視覺沖擊,提升瀏覽過程中的趣味性,從而吸引用戶長時間瀏覽。

          • 適合隨機推薦的內容,不適合進行查找。

          • 豐富內容展示,適合元素較多情況,可以讓各種形式的元素保持井然有序。


          列表式:信息集合一般是簡單的圖文組合(小圖+標題)或純文本信息。由于列表垂直排列每一行內容,相對卡片式,在同樣大的屏幕中可以展示更多內容,可供用戶閱讀信息更多,新聞類和數據類應用更青睞于這種設計。


          應用場景: 
          • 信息直白,用戶無需點擊查看,即能盡可能了解內容信息,適合快速查找。

          • 文本重要程度高于圖片,需要靠標題吸引用戶點擊。

          • 小屏幕應用場景。




          3【 明確目標用戶】

          目標受眾的屬性,對信息權重的劃分影響很大,比如對價格敏感的用戶,優惠信息的視覺層級就需要抬高。為了便于理解下面的案例,這里我定義的就是對價格敏感性用戶。



          4【 劃分信息層級 】

          定義了目標用戶后,將卡片內所有元素羅列出來,并借助四象限分析的方法,對各個元素的權重進行劃分。



          5【 同類信息分組 】

          將同類信息分組,便于后面確定元素之間的親密性關系。



          6【 增強信息對比 】

          前面我們借助四象限,將信息重要程度進行了劃分。接下來對元素之間親密性和對比進行處理,設計用戶瀏覽視線,在該過程中對案例中的元素進行如下處理:

          • 圖片:這里圖片及比例保持不變

          • 圖標:將原版會員圖標+字段的方式更改為圖標,原因有兩個:1、會員圖標+字段的方式占用了較多的橫向空間,導致標題字段信息展示減少,同時還導致用戶在閱讀完標題后,閱讀下一行內容時視覺錯行嚴重(會員圖標+字段過長導致)。2、由于會員圖標代表會員內容,這是絕大對數產品對用戶有過的教育,所以這里重設了會員圖標并單獨展示。

          • 字體:對標題字體進行加粗,(16pt,Medium),價格字體加大加粗(24pt,Medium),劃線價加粗(12pt,Medium),按鈕文字&活動標簽文字(14pt,Medium)精簡其他輔助信息層級(12pt,Regular)

          • 標簽:優惠信息標簽由0.5pt改為1pt,提升視覺層級?;顒訕撕灋樯珘K降低不透明度+有彩色文字。

          • 按鈕:由于標簽為描邊樣式,為了拉開差異,突出按鈕,所以將按鈕改為實心色塊。


          做完上面這些后,可能大部分人覺得到這就可以了,但其實我們還可以再增加設計細節,這也是你與其他設計師拉開差距的地方。



          7【 設計細節表現 】

          由于案例不同,增加細節的方式不同,所以需要具體案例具體分析。在本次案例中,我通過新增圖標設計以達到豐富卡片細節的作用。在活動標簽中新增小喇叭圖標,來增強活動氛圍、增強信息視覺上的互動性、增強代入感。在按鈕中新增時鐘圖標,配合預約文案,讓用戶預知操作后可能的結果,并且提升按鈕視覺層級、提升點擊欲望。



          8【 確定最終布局 】

          在布局中主要考慮兩個點:

          1、合理性&拓展性

          由于該卡片的應用場景為推薦列表,所以這里保持原有的上下布局,遵從人眼閱讀習慣。

          2、屏效比

          將活動標簽選擇放置在圖片與底板分割處,好處有: 
          • 借助這個方式,使圖文內容過渡順暢,閱讀體驗更佳。

          • 盡可能減少了標簽對產品圖的遮擋。

          • 壓縮卡片高度,最終達到提升屏效的目的。



          解決部分人可能存在的疑惑:


          Q1: 3張設計稿中活動標簽為什么進行修改?

          :稿1到稿2,活動標簽樣式修改,位置調整,對應不同的用戶,對于價格敏感性用戶,顯然稿2更能刺激他們點擊。稿2到稿3,對標簽樣式再次進行加強。稿3到稿4,考慮該應用場景是在推薦列表中,為了避免出現多個同類型活動的卡片,導致過亂,所以修改了設計樣式。


          Q2:在稿3到稿4中優惠標簽這一排內容,和預約按鈕這一排內容,上下調整的原因是什么?

          :1、將文字區域看做一塊完整的矩形區域,稿3整體看起來更完整,而稿2像是右下缺了一個角。2、在信息閱讀順序設計上,稿3的處理是優先讓用戶看到優惠相關信息,更加迎合價格敏感性用戶的需求。


          Q3:你認為最終稿還有優化空間嗎?

          :這個案例,是我截圖與我司相關App的。我認為如果可以,還需要再了解目標用戶畫像,了解用戶真正在意的信息是那些,這些都會對最終方案產生影響,也只有知道這些才能得出最合適的哪個方案。這里我定義的是對價格敏感的用戶,基于這類用戶來說,我認為最終方案是合適的

          文章來源:站酷 作者:幺零三

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          簡單又不簡單的“設置”場景設計

          ui設計分享達人

          一、隨處可見的齒輪


          以一個小小的齒輪(或者扳手)形象登場,“設置”在幾乎所有產品中都是不可回避的模塊,他允許用戶在彈性范圍內自定義產品,來更好地適應實際需求。

          在一些產品團隊的眼里,“設置”或許是一件非常簡單的事情,因為大多設置模塊的使用頻次低,無關核心業務。所以當內容看似非常簡單明確時,“設置”甚至會不經設計,由開發直接上手就干。但這樣簡單處理的結果被擺到用戶面前時,各種糟糕的體驗就紛至沓來了。找不到設置入口、不知道該如何設置的用戶吐槽屢見不鮮。所以說,“設置”,說簡單也不簡單。


          下面我們就從用戶場景出發,深入挖掘設計邏輯,重新認識這個隨處可見的小齒輪。




          二、“設置”的用戶場景


          調研發現,不同性質、體量的產品,“設置”模塊的功能設計存在著不小的差異。

          ToC產品一般會提供關于用戶自身使用習慣的設置,如界面語言、皮膚主題等。而對于ToB產品來說,除了部分與ToC產品重疊的用戶個性化設置內容外,往往還有作用于整個平臺、全體用戶的系統設置權限,當然他們的可見用戶并不是全體成員。


          從上述對功能的簡單描述可以初見,“設置”模塊的目標用戶也不會是一成不變的。

          拿我們日常高頻使用的瀏覽器產品來說,設置是開放給全體用戶的功能模塊,但它的使用頻次很低,如一些關于性能、證書的配置,即使是瀏覽器的熟練使用者也可能對它很陌生。也就是說,哪怕是產品的高級用戶,也可能是“設置”模塊的新手用戶。

          而以技術導向的工具型產品為典例,繁雜的系統設置是產品為了滿足不同客戶間、復雜多變的業務規格,在系統中留出的彈性空間。在這個需求場景中,與產品對話的用戶一般是系統管理員或技術支持人員等,他們對系統方方面面的經驗認知都很充足,甚至系統設置就是其主要工作模塊。所以,對于這類用戶場景下的“設置”模塊,“高效操作、成功結果”是至關重要的設計目標。因為高級用戶往往不追求很強的互動性,更希望跳過流程和步驟,直接切入功能得到理想結果。


          面向不同的目標用戶,自然有不同的設計邏輯,本文接下來的內容,或有共同之處,但更側重于面向第二種情況的思考。




          三、“設置”的設計邏輯


          思考“設置”的用戶場景,使得設計邏輯的探討更加有據可依。簡單來看,“設置”的設計可以從三個環節切入:

          • 設置前:如何向用戶展示設置內容

          • 設置中:如何設計用戶的輸入交互

          • 設置后:如何保存生效或發生錯誤的處理


          接下來我也將從這三個環節發散思考,從信息架構、展示編輯、默認值、幫助說明以及保存等多個方面來談談我對“設置”的一些看法。



          (1)做好內容的信息架構

          成熟的“設置”模塊,必然擁有良好的信息架構。這不僅是指“設置”內部的導航設計,同時也包括“設置”在整個產品的層級安排。這些導航、層級的確定,則會受內容信息體量、功能重要程度等影響。

          首先,在“設置”內部規劃一個合理且清晰的導航,需要在信息的深度和廣度之間做好平衡。平衡架構的天然敵人少不了信息量冗雜這個令人頭疼的問題。無論是在單個層級中內容過多,還是層級本身過多,都會給用戶的快速定位帶來考驗。而通過調研發現,如Google、Salesforce等產品都選擇在復雜的“設置”模塊引入了全局搜索來幫助用戶緩解查找某一功能的壓力。

          信息量冗雜帶來的考驗還有那些零散的、彼此關聯不強的設置項。對他們的架構安排,很容易因為不知道怎么組織,便一股腦地塞進諸如“通用”、“高級”等的模糊分類中,不過這可謂是十足的懶人設計。想要搞定這些難搞的信息,設計者需要對設置內容有更深入的研究和理解,搞清楚它改變了什么、會影響什么以及后續是否會拓展更多關聯設置,等等。

          還有一個值得思考的細節:對于豐富多樣的設置項來說,是將他們散落到直接影響的功能模塊中合適,還是匯總于一個設置模塊中更合適呢?或許在不同的場景里答案并不一致,我覺得這需要綜合考慮該設置項的放權角色、配置頻率、配置影響等因素。



          (2)設置內容的展示與編輯

          完成“設置”模塊的基本架構后,就該將目光投向那些具體的設置項了。就常見的設置內容而言,根據其適合的展示形式進行簡單的抽象,主要分為以下兩種:

          1、適合以表單形式組織的內容:一般是具有獨立影響又擁有相同特征標簽的單條數據被整合到一個分組下進行展示與配置

          2、適合以表格形式組織的內容:一般是具有相同固定結構的數據集需要進行統一管理,包括組層面的增刪等

          為每一個內容選擇最合適的展示形式(當然也并不僅是上述兩種),這個選擇大多時候并不困難,因為“設置”場景的目標導向往往比較明確、直接。當然也不排除部分復雜場景的存在,這就需要我們多花些心思,以用戶更易理解的展示形式完成功能性的表達。

          在“設置”模塊,展示與編輯的聯系非常緊密。直接編輯和解鎖后編輯的選擇,主要取決于用戶進入頁面的常規訴求是查看確認還是編輯修改,以及這些設置內容的改動容錯性是否良好,等等。



          (3)默認值與幫助說明里的用戶體驗

          在本文討論的“設置”場景中,每一個更改都可能對整個平臺乃至全體用戶產生影響。通過調研,我們發現多數用戶對于默認值的沿用性不低。故,對于那些需要默認值的設置項,選擇一個合適的默認值是值得審慎對待的問題。

          了解用戶習慣和業務需求是解題的關鍵。什么樣的默認值最貼合用戶的使用習慣,什么樣的默認值能以最佳狀態滿足業務需求。例如,我們的堡壘機產品一般將日志保留時間的默認值設為365天,便是考慮到了用戶習慣與產品性能的微妙平衡。

          除了默認值的設計,恰到好處的幫助說明也可以讓設置的用戶體驗變得更好。

          我時??吹健霸O計的目標應該是完全刪除說明文字”之類的論述,這好像正契合了簡約至上、不要讓用戶思考等當下流行的宗旨。但,正如尼爾森十大原則的最后一條“人性化幫助原則”也指出,幫助和使用文檔是有必要的。

          結合“設置”的自身的特點:這是一個對產品進行底層配置(相對其他模塊而言)的控制模塊,對用戶的認知與學習能力有著不低的門檻要求。也就是說,設置的內容對于用戶是有一定難度的。我們需要更多考慮內容的幫助說明是否充足,不要想當然覺得用戶能夠理解。

          所以,不難想象,設置模塊的說明概率會遠高于產品的主體功能模塊。進一步探究幫助說明的設計:從形式來說,它可以是文案、配圖甚至是一個視頻講解;從強度來說,它可以一次性出現、常駐于頁面或是直接跳轉幫助文檔等。大多數用戶并不希望在設置模塊獲得探索的樂趣,所以無論如何設計,幫助其快速完成任務是我們在設計“設置”時非常重要的一個追求。



          (4)二次提交與即時生效

          “保存了嗎”這不僅是每個設計師在電腦卡機時候會問自己的問題,也是用戶在完成一系列配置操作后的疑惑。這就牽扯到了設置何時生效的問題。最常見的交互方案有兩種:

          1、每一項配置都即時生效

          2、整個表單統一提交后生效

          那么,哪一種方式更好?我繼續嘗試從業務需求和用戶習慣兩個方面入手:

          “設置”模塊的操作往往牽一發而動全身,試錯成本其實是非常大的。之前聽產品經理說過一個銀行客戶因為修改了某個小小配置項,而造成了巨大實際損失的例子。所以,在這樣一個控制中樞般地位的模塊中,即時生效的選用必須謹慎評估操作風險,減少用戶輕易出錯的機會。

          同時,由于即時生效和表單提交這兩種交互方式都非常常見,用戶天然存在一種認知壓力,也就是上面提到的“保存了嗎”的不確定。所以,我們需要通過設計,讓用戶快速且準確地知道當前頁面采用的是何種保存交互。

          從調研和自身經驗得出,以下幾點都是比較好的思路:

          1、實時的操作反饋可以幫助用戶判斷是否生效

          2、盡量控制設置內容在一屏以內,這樣無論是否設計統一提交的按鈕(或者更改后出現),用戶都可以輕易感知

          3、將統一提交的按鈕以懸浮方式明顯地駐于頁面底部,減輕內容超出一屏時的認知壓力

          4、慎重處理如開關、按鈕、滑塊等帶有很強“即時生效”隱喻的控件




          四、簡單也不簡單的“設置”


          對于很多產品產品而言,“設置”是點擊率不高的輔助模塊。由開發人員直接上手,設置項很容易就變成機器語言的直譯、迭代順序下的鋪陳,而用戶是否可以接受這種簡單粗暴的處理,就成了阿甘手中的那盒巧克力。

          從關于“設置”的論述以小見大,哪怕是看似簡單的角落,也存在著不簡單的設計邏輯。我一直覺得,設計對于商業的價值在于推動溝通,即保證產品與用戶的對話“時刻”流暢。所以,不要草率處置那些不起眼的邊緣模塊或簡單功能的設計。

          文章來源:站酷 作者:齊治設計

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          用戶體驗設計的自動化正在靠近

          seo達人



          據Google技術總監RayKurzweil的所說:到2029年,電腦很可能會比人類更聰明,UX的未來也將變得更加自動化。人工智能和機器學習等最新科技已經可以支持需要人類參與的、非線性的、邏輯復雜的任務,技術創新正在改變人們的生活方式。例如科技創業型公司不僅為自動駕駛提供相關建議,甚至可以為節目表演提供更加智能的建議。

          在我們創建和使用復雜產品的過程中,自動化發揮著日益重要的作用,我們可以感知到,自動化將在UX用戶體驗設計的未來發揮巨大的作用。用戶體驗設計的自動化很可能是接下來影響UX設計整個行業的一件大事 – 無論是優化設計反饋流程,還是改變和精簡產品團隊的運作方式,自動化都會起到重要作用。自動化正在不斷增強我們創造引人注目的產品的能力。

           

          設計自動化:迅速將概念轉化為高保真原型

          通常,UX設計師繪制用戶體驗地圖和信息架構圖,并在產品設計的過程中進行用戶研究工作。在設計過程中,設計師的典型輸出包括:手繪草圖,如圖一所示。還有流程圖、架構圖、不同保真度的線框圖,如圖2所示。這些交付物中的某些-尤其是高保證原型,可能需要花費幾周甚至幾個月的時間進行繪制。大一般情況下,在設計過程沒有完全完成之前,開發人員不會進入開發過程中,因為設計稿為后續的開發提供了指導方向。

          圖1 低保真用戶界面草圖

           

          圖2 低保真用戶界面草圖

           

          因此,我們需要找到優化整個可用性測試流程的新方法,以提高設計的有效性和效率,最終實現更快的信息反饋并縮短驗證周期。通過應用自動化技術,如果能夠快速的創建低保真線框圖,同時生成高保真界面,那么就可以在更短的時間內創建產品的界面,并將更多的時間與精力用于用戶研究,最終可以加快提升用戶體驗的每個環節。

           

          自動化蘊含著無盡的機會

          Airbnb開創了自動化用戶體驗的設計流程,成為自動化設計的先驅。在他們的文章“手繪草圖界面”中,Airbnb的設計技術主管Benjamin Wilkins和Airbnb的設計技術專家Jon Gold,演示了如何使用專用相機設備和軟件實時制作低保真草圖和高保真視覺原型,例如圖3和4。Airbnb的視覺設計團隊最終接受了自動化產出的視覺圖并對視覺效果進行調整,事實證明通過創建原型以獲得快速反饋和驗證設計方案的速度是非常高效的。

          圖3 Airbnb設計

           

          圖4 Airbnb的迭代設計

           

          “我們將代碼作為設計工具去投資。通過代碼來處理包括界面布局和設計展示、邏輯和數據等內容的展示。有助于縮小工程師和設計師之間的距離,以及縮短視覺圖與線上效果圖之間的距離 ”。- Airbnb設計負責人 Alex Schleifer

          自動化設計有什么重要意義呢?自動化不是令人印象深刻的相機設備,而是能夠引發巨大興趣的機器學習。它凸顯了利用機器學習的無盡機會,優化了產品設計流程,并且能夠提供越來越多的價值。未來,只需通過與Siri,Google智能助理或Slack嵌入式機器人交談就可以設計用戶原型界面。“嗨,DesignBot, call to action按鈕使用標題藍色。”正如Airbnb團隊所證明的,這一切都是有可能的。

           

          利用“設計自動化”創造更好的產品

          隨著即將到來的自動化設計技術,這對您的團隊意味著什么呢?為了為您的團隊做好迎接設計自動化的準備,您可以通過以下幾種方法無縫地過渡到自動化設計的未來。

           

          視覺與品牌設計團隊

          自動化設計的未來在很大程度上依賴于開發強大的可視化語言,以支持多樣的設計組件和設計規范。這確保了跨設備、跨平臺的產品都能擁有一致的品牌體驗?,F在可以花時間準備這些可視化語言,確保它們能夠準確描述您的品牌。

           

          產品負責人和產品經理

          花一些時間去研究并開發加快設計過程的新方法。從創新方法入手,簡化產品構思和原型制作過程。如果你不這樣做,你的競爭對手當然會。自動化設計不應該成為創意的瓶頸,產品面向的是用戶,加快設計過程可以更好地為用戶服務。

          “測試想法所需的時間應該為零 ”。- Airbnb設計主管 Benjamin Wilkins

           

          UX設計師

          在日常工作流程中開始使用新技術。不要將自動化視為對創意的威脅,而應將其視為利用創新技術來增強專業知識的機會,通過自動化構建更好的產品。通過減少耗時、重復性任務的時間,可以將更多的時間和資源用來進行用戶研究,概念測試或用戶驗證。這所有事情完全是關乎用戶體驗的。

           

          設計自動化即將到來

          在過去幾年中,機器學習和AI在改變整個行業的運營方式和業務方式方面發揮越來越重要的作用。由于越來越復雜的流程變得自動化,我們必須專注地去研究自動化與UX設計之間的交叉點,為設計自動化未來的到來做好準備。

          雖然自動化不會在一夜之間發生,但像Airbnb這樣有遠見的公司正在探索在未來成為主流的新型工作方式。由于他們的探索與研究,我們能夠更好地評估自動化帶來的機會與影響,并了解如何更好地利用這些創新來改進我們的工作方式。無論是個人技能的提升還是設計團隊的流程優化,自動化設計的潛力都是巨大的。

           

          譯者總結

          在了解了自動化設計相關的內容后,筆者將現有的產品上線流程與應用自動化設計的產品上線流程進行對比,如圖5所示:

          圖5 應用自動化設計的前后流程對比

           

          傳統的產品上線流程

          需求產出,待需求評審沒有問題即進入交互設計階段(包括初期草圖方案繪制,主界面繪制以及完整的交互界面與交互說明撰寫),交互設計基本完成后進入視覺設計階段,同時前端可進入開發階段;在進行交互設計的同時,后端同步提供接口。開發完成后進入測試階段,測試沒有問題產品可發布上線。上線后收集用戶反饋,進入下一輪的產品迭代中。

           

          自動化的產品上線流程

          需求產出,待需求評審沒有問題即進入交互設計階段,交互階段草圖繪制完成后即可通過自動化技術將草圖轉化為高保真原型界面(視覺再進行相應調整即可),減少交互、視覺與前端開發的工作量。待前后端開發完成后進入測試階段,測試沒有問題產品可發布上線。上線后收集用戶反饋,進入下一輪的產品迭代中。

          為了便于理解自動化技術,譯者簡單總結一下自動化技術的實現原理:自動化技術依賴前端強大的可視化語言,需要強大的前端組件庫來識別草圖中的占位符含義。例如,當在草圖中繪制一個占位符時,通過智能化技術自動識別該占位符在產品中所代表的組件,進而生成高保真的用戶界面。因此,可以迅速看到產品從草圖階段到上線后的效果圖,也便于對設計方案進行及時更正。

           

          結合兩種流程對比,譯者結合自身工作經歷總結了應用自動化設計的三點優勢:

          (1)迅速驗證多種設計方案

          在項目迭代周期緊張的情況下,設計師缺少額外的時間和精力來設計多種方案,更無法驗證哪種設計方案能更好地解決用戶需求。精益設計時代,很難對每次的設計方案進行可用性測試。而自動化設計過程中,可以直接將設計草圖轉換為可點擊的高保真原型界面,交互設計師有更多時間和精力來繪制多種設計方案并利用高保真界面進行用戶測試,從而迅速調整設計方案使其能更精準的幫助用戶解決痛點,從而提升用戶體驗。

           

          (2)提前開發節點,縮短項目周期

          原有的開發流程中,在需求明確之后,后端可以同步開發某些接口,而前端開發需要等完整的交互界面繪制完成后才能進入開發階段,這導致項目周期很難縮短。自動化設計在交互設計師完成草圖后前端開發即可進入開發階段,將開發節點提前至操作階段,可以明顯縮短項目周期,提高產品迭代效率。

           

          (3)迅速驗證需求是否被滿足

          筆者在工作過程中發現,B端產品的用戶在交互評審的過程中會否定自己的需求。產品經理收集需求的過程中,用戶提出想要滿足A需求。在A需求的設計方案完成后,用戶看到設計界面時經常會提出自己想要實現的需求并非如此。

          即,由于B端產品的專業性特殊性,用戶在未看到設計界面之前并不清楚自己的需求是否得到滿足。

          因此,利用自動化設計可以迅速將需求轉化為設計界面以進行用戶測試,快速試錯以明確用戶的需求是否真正得到滿足。

           

          封面作者:Paul Olek

          原文地址:網易UEDC(公眾號)

          作者:仉長娟

          轉載請注明:學UI網》用戶體驗設計的自動化正在靠近

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          在不同屏幕和設備上創建用戶體驗設計的8個步驟

          seo達人


          1. 確定核心用戶體驗

          每個產品都有核心的用戶體驗,這基本上是它存在的原因。它解決了人們所面臨的問題,而且為他們提供有意義的價值。關鍵內容和功能的組合代表了核心的用戶體驗。要查找你的產品核心用戶體驗,就要問自己一個問題:“客戶需要完成哪些最常見和最重要的任務?”在你用于產品的每個渠道上支持這些核心任務的本質至關重要。例如,Uber的核心用戶體驗是任何時間隨叫隨到。無論屏幕尺寸如何,此功能都能在每個設備上正常工作實現這一目的。

          Image title

                                       預約出租車是Uber用戶最重要的任務。用戶可以使用Apple Watch完成此任務。圖片來源: Techcrunch

           

          2. 定義產品的設備組

          盡管存在大量不同屏幕尺寸的設備,但絕對不能定位各個設備,可以根據用戶可能關注的任務定義產品的設備組。最常見的設備組是:

          移動手機

          平板電腦

          臺式電腦

          智能電視

          智能手表

          Image title

          不同的設備組在不同的上下文中提供不同的服務:用戶根據他們正在查看的屏幕的類型參與不同的交互模式。例如,手機主要用于微任務,并且具有較短的用戶會話。平板電腦主要用于內容消費,目前不被視為大多數人的工作工具。在了解各種設備類型的基本上下文的假設對于構建一個好的用戶體驗是至關重要。

           

          3. 適應每個上下文使用的體驗

          確定產品的核心用戶體驗后,選擇一組你希望支持的設備組,你需要調整每個組的體驗(對于每個上下文的使用)。上下文的設計在不同設備組設計時尤為重要。

          第一,并非所有功能都在所有設備上都有意義。你需要確定你的產品在多個設備組中使用的不同場景,并設計適合每個場景的體驗。例如,通常移動用戶比電腦用戶想要的不同于產品。以 Evernote為例,可以在多臺設備上使用流行的筆記本產品。其電腦版本針對內容消費進行了優化:

          Image title

                                     用于電腦版本的Evernote應用程序被優化用于閱讀文本和查看媒體。

           

          而移動版本是針對拍攝筆記、照片和捕獲音頻進行了優化的:

          Image title

          Evernote了解移動環境:它利用設備功能,并提供快速保存想法的方式(添加文本筆記,捕獲照片或設置提醒)。

           

          第二,不同的屏幕允許不同的輸入法。以觸摸輸入為例。在設計具有觸摸輸入(移動手機和智能手機)的設備時,設計師會犯的幾個常見錯誤包括:

          小的點擊目標。點擊目標(如CTA按鈕)必須具有足夠大的尺寸。通常至少7毫米是足夠的,但最好使用10mm觸摸目標尺寸。

          Image title

                                                圖片來源:UXMag

           

          將項目過于緊密地放在一起。你應該考慮點擊目標的大小以及它們之間的間距,因為間距有助于分離控件,并給你的用戶界面提供呼吸的空間。建議的間距至少為23pt以防止輸入錯誤。

          Image title

                                                                                                按鈕之間的間距

          使用懸停狀態。但在觸摸屏上,沒有“懸?!薄?

           

          4. 最小屏幕設計

          歷史上,設計師一直從事大屏幕到小屏幕的設計工作,這意味著第一個也是主要設計是為了完整的電腦桌面視圖(它具有最多的功能)。只有電腦桌面設計完成后才移植到移動設備和其他設備組。但當設計電腦桌面時,我們通常面臨“廚房水槽”問題:許多功能被添加到產品中,特別是當涉及多個利益相關者時。這并不奇怪,,當你有很多不動產時,添加功能是比較容易。實踐經驗清楚地表明,最好使用移動方法進行設計,并通過與用戶相關的最小屏幕創建應用程序。

          當你首先設計相關屏幕的最小尺寸時,它會強制你決定最重要的。一段時間后,你將采用同樣的方法仔細選擇產品的其他版本,無論是電腦桌面設備,平板電腦還是電視。

          Image title

          在大多數情況下,手機將是相關屏幕的最小尺寸。如果可穿戴設備對你很重要,那么你將需要考慮具有更小分辨率的微型屏幕。

           

          5. 不要忘記大屏幕

          想想大屏幕以及小屏幕,給大屏幕和小屏幕提供同樣的注意力:

          不只是縮小設計,使其適合那些大屏幕。充分利用你可以使用的額外空間。

          Image title

                                                                                                     圖片來源:Wikipedia

           

          確保圖像不會因為屏幕尺寸的放大而失去質量。

          Image title

                                                          左:低質量圖像。右:正確的分辨率。

           

          考慮大屏幕細節。每個設備組都有自己的不同。例如,電視屏幕的設計被稱為“設計10英尺體驗”,因為從沙發的距離來看,與電腦桌面屏幕相比,屏幕上元素的明顯尺寸明顯更小。

          Image title

                                                                           電視的用戶界面元素應大于電腦桌面。圖片來源:Samsung

           

          6. 提供一致的體驗

          一致的體驗意味著應用程序及其在所有屏幕尺寸上的體驗都是相似的。無論設備如何,一致的用戶體驗是成功的全通道用戶體驗的關鍵組成部分之一:

          對未來與產品的交互設定期望,并建立用戶信心。

          一致的體驗使得你的產品在其他設備上與用戶的交互更容易。

          你可以將它們視為相同體驗的方面,而不是將設計定制到越來越多的屏幕和設備中。例如,Google搜索應用在所有設備上提供相同的搜索體驗。

          Image title

                                                           當設計和功能一致時,用戶可以在他們選擇的設備上更快更有效地完成任務。

           

          7. 創造無縫體驗

          跨不同設備組創建無縫體驗對你的用戶非常重要。人們可以自由地在設備之間來回移動,完成任務,或當他們從設備轉移到另一設備時,他們期望他們的產品和服務與他們一起轉移。這意味著用戶不必考慮他們正在使用的設備,環境的變化或上下文的變化,并且可以依賴于設備良好的功能性和獨立于設備的易用性。

          Image title

                            大多數人如何走過他們的一天,他們訪問的主要屏幕。圖片來源:Intercom

           

          根據使用情況,你可能希望確保每個設備上的內容消耗量同步。以Apple Music為例:你可以在Mac上設置播放列表,并在iPhone上即時播放,也可以開始聽iPhone上的歌曲,當你轉到電腦桌面時,你將被拍攝回到你在iPhone上。

          Image title

                                                                            Apple Music可以很好地處理多個設備的同步。

           

          8. 測試你的設計

          在測試環境中有效的并不總是在現實世界中。在實際設備上為實際用戶運行可用性測試,你可以在發布之前發現用戶體驗的問題并解決它。

           

          結論

          在設計多個屏幕和設備時,最好的策略是保持最終的用戶體驗。作為用戶體驗設計師,你必須評估產品的使用時間,位置和方式,以評估用戶的最佳體驗。無論你的內容是什么尺寸的屏幕,用戶都希望在各種設備之間獲得流暢的體驗。

           

          原文地址:Adobe Blog

          譯文地址:UI中國

          作者:Nick Babich

          譯者:SKYUI

           

          轉載請注明:學UI網》在不同屏幕和設備上創建用戶體驗設計的8個步驟

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          用戶體驗設計定義&詳細案例

          seo達人


          一個設計的存活或死亡依賴于它適應人類的行為和認知限制的能力。

           

          一、什么是用戶體驗?

          用戶體驗(User Experience,簡稱UE/UX)這個詞是在上世紀90年代中期,由用戶體驗設計師 唐納德·諾曼(Donald Norman)所提出和推廣。

          定義:用戶在使用產品過程中建立起來的一種純主觀感受。即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。

           

          二、可用性原則

          可用性指的是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度,即用戶能否用產品完成他的任務,效率如何,主觀感受怎樣,實際上是從用戶角度所看到的產品質量,是產品用戶體驗的核心,不好的可用性會導致用戶放棄使用產品。

          可用性由易學性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預測性組成。

           

          01 易學性

          指的是用戶學習如何與產品進行交互,以實現目標所花費的時間和精力,即用戶能否在初次使用產品時完成簡單的任務或實現用戶目標。

           

          02 效率

          用戶在使用產品一段時間后,能否在合理的時間完成想要達成的目標任務。這里以騰訊視頻為例,用戶能否快速的下載想要的東西,在同一系列中,可以快速下載更多的相關內容。

           

          03 可記憶性

          我們常說互聯網是有記憶的,好的產品體驗是幫助用戶去記憶。用戶在體驗中,要對一些有意識、無意識的行為進行記憶是一個比較大的負擔,如果在一些環節通過系統能幫用戶記錄,會降低用戶的負擔。比如在搜索、歷史記錄、瀏覽記錄等。

           

          04 容錯性

          用戶在使用產品時,發生錯誤后,能否快速幫助用戶識別和糾正錯誤,幫助用戶從錯誤中恢復的能力。如常見的注冊登錄,當用戶屬于郵箱格式不對的時候,給出提示,并且告知錯在哪里。如果提示語只是:”請輸入正確的郵箱” 用戶可能會疑惑,錯在哪里。

           

          05 滿意度

          滿意度指的是用戶與設計互動產生的愉悅程度,可以是用戶使用產品時流暢的交互和優秀的視覺設計,也可以是用戶在產品中得到的滿足感。比如sir語音交互,王者榮耀等級(滿足感)

           

          06 實用性

          產品能否提供用戶在完成任務時所需要用到的基本功能,例如P圖類軟件,用戶需要對圖片進行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。

           

          07 個性化

          在滿足實用性的基礎上 針對用戶提供不同場景下的功能定制,如美圖秀秀,在提供圖片美化的同時,針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。

           

          08 可預測性

          用戶能夠預測到下一步操作或者整個流程的交互,將會發生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預測到下一步或者整個流程的步驟會發生什么。

           

          三、可見性原則

          可見性是用戶根據界面中可見元素確定產品可以做什么的設計原則。

           

          01 物理功能可見性

          物理功能可見性是基于對象的物理外觀。在視覺上,這種類型的功能可見性使用戶能夠立即清楚地看到在設計界面中能干什么。例如當我們使用音樂類軟件,最常使用的就是播放/暫停,上一曲/下一曲。我們就會尋找去這些圖標。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中,這就是功能可見性。

           

          02 狀態可見性

          當信息或者列表過多時區分狀態的展示,將重要的狀態信息呈現在盡可能高的信息層級當中。如iOS信息和QQ郵箱中區分未讀信息的微標。如果將這些徽標隱藏起來,會極大地破壞易用性,因為人們將不得不進入一個個郵件詳情頁當中進行確認,才能獲取到原本由徽標提供的狀態信息,這樣的互動非常低效且乏味。

           

          03 步驟可見性

          當用戶在執行某項任務的時候應該清晰明了的告知用戶目前在什么步驟,后面還有多少步驟,完整清晰的流程展示。如果將這些信息隱藏起來,用戶會困惑當前進行到哪一步,接下來還有多少步驟。

           

          四、可供性原則

          強調需要明確的視覺線索向用戶展示產品可以做什么。例如用戶界面中的交互元素(如滾動條、命令按鈕和圖標等)的設計必須能夠為用戶提供足夠清楚的建議,讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么,以及如何與它們進行交互行為(點擊、長按、滑動 等)

           

          五、反饋

          給用戶及時、恰當的反饋,是體驗設計中非常重要的一項原則;對每個用戶的操作都應該有恰當的系統反饋(包含視覺、聽覺、觸覺)。

           

          01 告知性

          明確告知用戶當前操作發生了什么。如點擊下載和下載過程給出相對應的反饋及進度條。

           

          02 動作連接性

          當用戶產生某個動作時,給予相對應的連接反饋。如大概用戶點擊某個按鈕時,按鈕默認的外觀與點擊后的外觀發生變化,結合現實世界的開關去思考(按下 開燈)動作與反饋是連接的,即時的。

           

          六、??硕?/span>

          希克定律,是1951年由威廉·埃德蒙·??耸紫忍岢龅?,認為人們從數組中選擇目標的時間取決于可用選項的數量。也就是當一個人所面臨的選擇越多,做出選擇所花的時間就越多,當面臨選擇的數量增加,做出決定的時間也會跟著增加。

           

          如京東篩選,在搜索結果頁會將篩選條件收起,因為里面的篩選條件內容過多。用戶會在當前頁面選擇的時間增加.將一些項目分組放入二級下單,并且做好歸類,用戶能夠更迅速的作出決定。

           

          七、費茨定律

          費茨定律,是1954 年 由保羅.菲茨首次提出,在人機交互中指的是通過圖形用戶界面使用鼠標或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。

           

          • T:代表完成移動所需的平均時間
          • A:代表光標開始/停止時間
          • B:代表光標移動速度
          • D:代表從起點到目標中心的距離
          • W:代表目標的尺寸

          簡單來說就是指:隨著目標的距離增加,移動到目標的時間更長,并且隨著目標的尺寸減小,選擇目標的時間也會增加。

          所以在界面設計當中會遵循越重要的功能,占據面基會越大。重要圖標的點擊熱區也會增大。便于用戶快速點擊。

           

          屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中,所以我們在進行產品設計的過程中,會將常用/重要的操作放置在屏幕邊緣處,便于用戶操作。

           

          八、神奇數字 7 ± 2

          神奇數字7±2法則是1956年由 喬治·米勒 所提出的,根據喬治·米勒的研究,人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數APP底部導航為5個的原因。

           

          由于人類的大腦處理信息的能力有限,大腦會將復雜信息劃分成 塊 和小的單元。如:京東和每日優鮮的分類處理。

           

          人類短期的記憶一般一次只能記住5-9個,所以人們總是傾向于把一串數字拆分為多個較短的部分進行記憶。如銀行卡號和手機號碼等。

           

          九、復雜守恒定律

          復雜守恒定律是1984年由 拉里·泰斯勒 所提出的,也稱作泰斯勒定律。認為每一個產品設計的過程中,都有其固有的復雜性,存在著一個臨界點,超過了這個點產品設計的過程就不能再簡化了,你只能將固有的復雜性從一個地方轉移到另外一個地方。

          在產品設計中,會盡量的簡化界面。當功能過多時進行一個整合的處理,跳轉或者滑動操作。如查看更多或者常見的漢堡導航。

           

          十、新鄉重夫:防錯原則

          新鄉重夫認為遺忘有兩種:一種是疏漏,另一種是忘卻。他建議采用一些措施來預防產品的缺陷。

          防錯原則認為大部分的意外都是由設計的疏忽,而不是人為操作疏忽。因此,在設計中要有必要的防錯機制;比如常見的信息輸入狀態,未輸入置灰不可點,輸入變為可點擊狀態。

           

          微信拍一拍:微信在出了拍一拍功能之后,很多時候點擊頭像的時候會不小心拍到別人,現在的拍一拍是可以撤銷的,在客戶端鼠標懸浮上就可以進行撤回,移動端長按出現撤回彈窗,兩分鐘內有效。

           

          微信朋友圈動態:點擊返回圖標會出現的彈窗,避免誤操作。利用防錯原則,可以避免用戶重新編輯。微信當中有很多友好的體驗細節??梢远喽嗳ジ惺堋?

           

          十一、奧卡姆剃刀原理

          奧卡姆剃刀 定律 :它是由14世紀英格蘭的邏輯學家、圣方濟各會修士奧卡姆的威廉 (William of Occam,約1285年至1349年)提出。 這個 原理 稱為“如無必要,勿增實體 ”,即“ 簡單有效原理 ”

           

          01、只放置必要的元素

          不必要的元素會降低設計的效率,不管是實體、視覺或者認知上,多余的設計元素,有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息,可以用「更多信息」來實現。如夸克瀏覽器,首頁只放置重要功能 搜索 和幾個整合內容的圖標入口。

           

          02、減少點擊次數

          讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件,在播放音樂之后進入其他的tab,在上面都會懸浮播放/暫停的區域。都能夠隨時操作。

           

          03、“老人”規則

          就是產品的易用性,如果年紀大點的人,也能夠輕松使用所設計的產品那么是成功的。如抖音沉浸式的體驗,簡單的滑動就能夠觀看想看的內容。目前抖音的用戶老年人也逐漸包含在內,并且抖音會根據用戶的停留時長等推送用戶感興趣的內容。

           

          04、減少“段落”個數

          頁面的使用率,當你想要在一屏新增很多內容時,頁面的布局就會變得擁擠和區域變小,容易過于干擾用戶做出選擇,重要功能不夠突出等。夸克瀏覽器首頁強化了搜索功能 和幾個整合內容的圖標入口;uc瀏覽器首頁內容過多,當用戶想要使用搜索功能時很容易被其他內容干擾。

           

          05、給予更少的選項

          前面說到的??硕烧f到,當選擇的數量越多,用戶做決定的時間就更長。做過多的決定也是一種壓力,在展示內容的時候要努力減少用戶的思維負擔。如攜程和馬蜂窩金剛區的內容展示,馬蜂窩根據產品屬性放置了6個重要的功能入口,便于用戶更快的去選擇所想要的功能。

           

          十二、設計和藝術的區別是什么?

          最后我們來探討一下設計和藝術的區別是什么。我看到一句話覺得挺好的。設計和藝術的重要區別是:藝術拋出問題,而設計解決問題。

          我們設想一個場景,當你在藝術展廳站在一副名畫面前,你所思考的是什么?是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事,你會不會思考藝術家在作畫時的心情,處境,為什么要這么去畫?想表達怎么樣的情感?

           

          然后我們再設想一個場景,同樣在藝術展廳,你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是 相機 對吧?因為相機的拍照效果在任何環境下都會比手機好。這就是設計。是能夠真真切切的解決用戶問題的。能夠去感知到的。

          設計和藝術的區別,如果有更好的答案,歡迎評論區留下你的看法。碼字不易,請給個小小的贊鼓勵一下

           

          原文地址: 站酷

          作者:左眼右舍

           轉載請注明:學UI網》用戶體驗設計定義&詳細案例

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          用戶體驗設計法則應該怎么用?來看看這些應用原理!

          seo達人


          1、菲茨定

          圖片

          選中目標所需時間與移動距離長短和目標面積大小有關。(與距離負相關,與面積正相關)

           

          現實中的應

          圖片

          在商場中尋找洗手間取決于標志的大小及步行的距離。為了滿足這兩個標準,標志設計得更大、更容易接近。

           

          設計應用

          圖片

          ▲ 左側頁面的CTA按鈕很小,沒有突出顯示,與表單的其他元素基本上沒有區分;右側頁面CTA按鈕尺寸很大,能讓用戶清晰識別。

           

          2、希克定律

          圖片

          決策所需要花費的時間隨著選擇的數量和復雜性增加而增加。

           

          現實中的應

          圖片

          與餐廳相比,快餐店的菜單選項有限。因此顧客點餐速度更快,門店提供的服務也更快。

           

          設計應用

          圖片

          ▲ 在Whatsapp上轉發消息時,會在“最近聊天”列表上方看到“經常聯系”的3個好友。這對用戶來說是一種簡單的交互,幫助用戶節省操作時間。

           

          3、共域定律

          圖片

          被一個顯而易見的邊框包圍起來的多個元素,被視為一個群組。(從屬于格式塔理論)

           

          現實中的應用

          圖片

          在服裝店中,衣服按照類型被分到不同的架子上來展示,即使對這家服裝店一無所知,顧客也會將一個貨架內的商品關聯成相似的東西。

           

          設計應用

          圖片

          ▲ 過濾器被封閉在產品頁面之外的單獨區域中,因此可以清楚地識別左右兩部分的差異。

           

          4、雅各布定律

          圖片

          用戶將大部分時間花在別人家的網站(產品)上,而不是你的。這意味著他們希望你的網站(產品)跟別人的有相同的使用方式。

           

          現實中的應用

          圖片

          假設家中的陽臺是一扇推拉門,我們可能希望酒店的陽臺門也以同樣的方式操作。因此如果酒店有一個滑動門,我們可能會下意識地先去推門。

           

          設計應用

          圖片

          ▲ 以上是國外知名的電商網站導航欄設計,這幾個網站導航欄中顯示的信息及其結構都非常相似:左側是品牌標志,中間為搜索欄,右側為其他選項(購物車/個人賬戶)。

           

          5、系列位置效應

          圖片

          用戶更容易記住系列中出現的第一項(首因效應)和最后一項(近因效應)。

           

          現實中的應用

          圖片

          我們通常更容易記住某個電話號碼的前4位或后3位,這條法則也是銀行卡號被分成4組數字的原因。

           

          設計應用

          圖片

          ▲ 在亞馬遜主頁上,網站的第一部分總是顯示最重要的內容:導航包含logo、搜索和其他重要功能;輪播圖通過圖形設計吸引用戶的目光,引導新的交易或優惠。

           

          6、馮·雷斯托夫效應

          圖片

          又稱隔離效應。當存在多個相似物體時,與眾不同的物體最容易被記住。

           

          現實中的應用

          圖片

          在商場購物時,相較于普通裝飾的門店,我們更有可能記住或將注意力轉移到具有霓虹燈效果的門店上。

           

          設計應用

          圖片

          ▲ App上有新消息時,會在圖標上用紅點顯示,這樣的提示更清晰和突出,從而吸引用戶的注意力,引導用戶點擊并查看消息。

           

          7、審美可用性效應

          圖片

          用戶通常認為漂亮的設計更易用。

           

          現實中的應用

          圖片

          當參觀汽車展廳時,我們通常會對汽車精美的展示感到驚嘆,并立即對這個品牌產生積極的印象。

           

          設計應用

          圖片

          ▲ 在愛彼迎上,我們住在陌生人的房子里,因此建立雙方的信任是必要的。當訪問像愛彼迎這樣干凈簡潔的網站時,我們會下意識地信任這個產品,也確保了用戶對品牌的信任。

           

          8、峰終定律

          圖片

          人們評論體驗優劣,大多基于峰值和結束時的感受,而不是所有環節的平均值。

           

          現實中的應用

          圖片

          在足球比賽中,整場的觀看體驗將根據比賽結束(誰獲勝)和比賽高潮(誰進球最多/比賽中最激動人心的時刻)來判斷。

           

          設計應用

          圖片

          ▲ 在夜晚非常饑餓的時候,我們使用訂餐App選擇食物時,卻被告知付款失敗。這時候App界面設計的再好看也無關緊要,訂餐失敗就是從這次體驗中收獲的結果。

           


           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》用戶體驗設計法則應該怎么用?來看看這些應用原理!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          Figma自動布局賦能B端設計

          周周

          排版布局可以響應式的隨設計師對內容的增刪改而自動調整,無需手動修改徒增成本,進而大大提升工作效率。

          交互規范制定指南

          周周

          瀏覽了許多關于“設計規范”的文章,發現很多都是在針對通用流程和視覺方面在整理,關于交互層面的內容比較少?;诖?,結合最近項目中沉淀的實際案例,以及參考了不少行業通用的設計規范,總結了一篇關于搭建交互規范的流程、框架、要點。希望能夠幫助大家更好的沉淀交互規范。

          B端產品設計規范

          周周

          整理了一套B端設計規范,包括色彩規范、字體規范、圖標規范、布局柵格、組件規范。

          日歷

          鏈接

          個人資料

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

          存檔

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