国产成在线人视频免费视频-国产成综合-国产床上视频-国产大臿蕉香蕉大视频女-国产大尺度pr社18福利在线

首頁

我們是如何搭建企業級B端設計規范的?

天宇 B端ui設計文章及欣賞

今天主要是和大家分享一下我們公司內部建立設計體系的方法和實踐案例,希望大家能指正與交流~
我們團隊就是最可愛滴~~~
我們是如何搭建企業級B端設計規范的?
 
 
B+Design System是以當前互聯網主流B端框架為基礎,并結合合公司特定業務場景而打造的具有"公司品牌特色的B端后臺設計體系"(以下簡稱為"B+Design"),包含了有關顏色、字體、icon、柵格、版式、間距、數據可視化等設計規范指南,組件層提供 30+ 不同的組件,包括它們的不同狀態,形成的模式,以及應用的產品。
 
 
一、為什么要建立 B+Design 設計體系?
隨著公司快速發展,目前公司用于業務支撐的后臺管理系統"品類繁多且零散獨立",需構建一套"靈活、專業"的設計體系來統一設計生態風格及交付標準。
 
當前痛點:
溝通時間成本高
:跨部門的項目實施過程中流程混亂,產品、設計、開發、測試等崗位在工作對接時溝通低效且問題耦合度高;
 
交付質量差
:無項目統一交付標準,不同項目質量產出不穩定,項目質量高度依賴于各個環節負責人的個人能力;
 
做不好設計協同
:各個系統級頁面架構、組件、樣式野蠻生長,缺少規范范導致樣式及體驗不統一;
 
研發效率低
:組件重復開發,維護成本也高,無基礎沉淀能力;
 
我們是如何搭建企業級B端設計規范的?
 
 
 
 
二、構建 B+Design 的思路
1、設計目標
伴著公司業務發展,開源的組件庫已無法滿業務需要,搭建一套更適合公司業務的UI組件庫,勢在必行;設計系統承載著作為一個沉淀基礎能力的支持平臺,同時也具有賦能多多邊業務、多種角色的重要作用和價值;
 
標準統一:
重新定義標準化的產品用戶體驗,統一品牌形象、設計標準,降低決策成本,提高產品迭代效率及質量;
 
降本增效:
基礎能力沉淀,規范設計元素,減少重復性設計,且提高代碼可復用性,避免重復開發,降低時間及人力成本;
 
高效協同:
降低不同設計師或上下游同事之間的溝通成本,提高團隊之間的協作力,提升團隊整體效率;
 
設計延展:
通過設計規范建立,滿足組件在不同場景及業務中的延展和擴充,從而實現全鏈路、多場景的高效輸出;
我們是如何搭建企業級B端設計規范的?
 
 
 
2、設計原則
為了更適用于企業級產品的開發和使用,通過大量中后臺場景的的實踐,B+Design設計系統提煉出以下設計原則:
清晰:
效率提升是務實之基。設計應減少不確定因素,降低用戶判斷次數,明確信息層級導向,使操作目的更清晰;清晰的設計體系讓產品操作直觀、流程一步到位;信息傳達清晰表意明確,助用戶短時間內快速理解并作出判斷。
 
高效
設計效率:可快速生成效果圖,也可使用Sketch,組件庫,頁面模板等快速生成效果圖和業務解決方案來提高產品體驗一致性;
開發效率:組件均已代碼封裝;并提供體驗評估標準以供參考,保證產品質量;
使用效率:系統常用組件(如批量搜索和操作)提高用戶工作效率;
工作協同:減少產品開發流程中各個角色之間的溝通成本;
 
標準化:
樣式規范、操作流程、呈現高度一致的設計標準,能體現產品的品牌感與信賴感,實現品牌感的系統傳達,還能降低用戶反復學習成本,給用戶帶來品牌信賴。
 
創新:
通過對當前市場主流設計系統開展競品分析,結合FS業務場景對各個組件進行統一規范,打造符合FS品牌特性的產品設計體系;
我們是如何搭建企業級B端設計規范的?
 
 
 
3、原子化組件思維
原子最早是由英國化學家/物理學家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒說,提出的原子論。化學元素由不可分的微粒(原子)構成的,它在一切化學變化中是不可再分的最小單位。
原子理論同樣適用于我們的設計系統中:我們的頁面是由原子(最小單位設計元素)、分子(基礎控件)、組織(基礎功能組件)、模版(業務定制組件)、頁面構成的;
我們是如何搭建企業級B端設計規范的?
 
 
注意:設計組件不是把UI元素堆積到一個地方,然后各處集中引用用這么簡單。組件化的工作方式信奉獨立、完整、自由組合,目標就是盡可能把設計與開發中的元素獨立化,使它具備完完整的局部功能,通過特定規則自由組合來構成整個產品。
 
 
三、構建 B+Design 的步驟
基于前期的思考,接下來我們的任務是對整個體系的制定進行任務規劃,以下是四大步驟:
我們是如何搭建企業級B端設計規范的?
 
 
 
第一步:現狀分析
通過現狀所有系統進行設計走查及用戶問卷調研,收集用戶建議及觀點,明確規范需要優化的方向。
我們是如何搭建企業級B端設計規范的?
 
 
 
第二步:框架梳理
通過三大競品設計體系(阿里,字節,騰訊)框架的梳理,結合現有設計頁面,分析業務場景和競品框架,確定FS的最小元素,整理和歸類自己的組件框架。
最終B+Design組件框架主要分為八大板塊,分別為:基礎樣式、通用、布局、導航、數據錄入、數據展示、反饋、其他,共50+組件;
我們是如何搭建企業級B端設計規范的?
 
 
 
第三步:設計組件和規范指南
針對已梳理好的框架展開組件設計工作,同時為每個組件編寫相應的規范指南,為使用者提供場景參考。
1、設計組件
組件設計是設計規范中最核心,工作量最大的一個環節。我們可以將它拆解成幾個部分,先做出基礎組件,再基于基礎組件和業務需求抽象設計業務組件,最后抽象成頁面模板。
我們是如何搭建企業級B端設計規范的?
 
 
 
  •  
    基礎組件
說到基礎組件,這就是前面所提到的原子化思維,在進行設計系統的構建時,我們期望達到這樣一種效果:當對任何一個原子進行改動時,所有依賴于該原子的部件都能夠全部自動更新。唯有滿足這一條件,設計系統所設想的提升效率、解放生產力的目標才能真正得以實現。
我們是如何搭建企業級B端設計規范的?
 
 
我們是如何搭建企業級B端設計規范的?
 
 
我們是如何搭建企業級B端設計規范的?
 
 
我們是如何搭建企業級B端設計規范的?
 
 
 
 
  •  
    業務組件
在構建完基礎組件后,可以根據業務需求,將部門內使用頻率較高的組件進行評估,抽象成業務組件。
例如我們用的比較多的就是人員選擇器、附件下載、文本編輯器等等...
我們是如何搭建企業級B端設計規范的?
 
 
  •  
    頁面模板
完成基礎組件和業務組件的構建工作后,我們可以依照全局說明,通過組件搭建頁面模板。頁面模板不僅能夠切實提升組件的使用效率,而且能提供出色的組件使用示范作用,增進設計說明和組件的結合。
 
我們是如何搭建企業級B端設計規范的?
 
 
我們是如何搭建企業級B端設計規范的?
 
 
我們是如何搭建企業級B端設計規范的?
 
 
我們是如何搭建企業級B端設計規范的?
 
 
我們是如何搭建企業級B端設計規范的?
 
 
 
2、規范指南
在后臺設計體系中,“規范指南”是一套為了確保設計的一致性、可用性和可維護性而制定的規則和指導原則。將所有的規范內容整理成詳細的文檔,配以示例和說明,方便團隊成員查閱和參考,此步驟也工作量巨大。主要分為七大模塊:
我們是如何搭建企業級B端設計規范的?
 
 
我們是如何搭建企業級B端設計規范的?
 
 
 
 
第四步:效果驗證
“B+Design System”建立成功后在"多個業務系統"中進行應用,通過實際業務反饋來進行效果驗證。
我們是如何搭建企業級B端設計規范的?
 
 
 
四、升級迭代機制
一個統一的設計語言不應該僅僅是一組靜態規則和單個組件構成成的,它應該是一個不斷發展的生態系統。需要我們在產品實踐中不斷優化、迭代,讓組件更加貼合場景,更好的服務業務。
我們是如何搭建企業級B端設計規范的?
 
 
以上就是我們公司內部構建整個設計體系的全過程啦~~~~~
 
在完成設計規范的構建后,我們聯合了產品經理和前端工程師,幫助每個環節的人員快速搭建產出物。
 
對于產品經理
:我們幫助產品搭建了一套Axure元件庫,該元件庫與設計組件庫一樣,可以快速搭建原型,提高了產品的工作效率,與設計師、開發的溝通也更加順暢。甚至對于簡單的頁面產品可以自己直接出原型給開發,開發直接沿用寫好了的組件庫。
 
對于前端
:輔助前端建立前端組件庫,這樣減少了設計走查的問題,對于以前各種樣式問題需要調整,現在基本都是寫好了的組件,可以有更多時間去寫交互和提高系統的性能。
 
 
 


作者:設計恐慌癥
鏈接:https://www.zcool.com.cn/article/ZMTYyNzI5Ng==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

小程序尺寸,一篇搞定

天宇 系統UI設計文章及欣賞

很多工作了幾年的設計師依然搞不懂小程序畫布創建依據和適配邏輯,所以今天針對這個問題,做一篇簡單的分享,來對這種基礎知識點做個掃盲。
首先小程序之所以叫小程序,因為它不是在手機、電腦系統上運行的應用(Native),而是在微信里運行的應用。也就是說,微信本身有套系統,而小程序的設計要遵循的是微信的設計規范,而不是蘋果、安卓、微軟的設計規范。
小程序尺寸,一篇搞定
 
 
這么做的原因是為了讓開發者只用一套代碼,就能在所有平臺、系統上的微信運行,并展示出相同的效果。這個邏輯和網頁類似,不管你在什么平臺還是系統只要安裝了瀏覽器,就可以讀取相同的網頁,而不用針對不同平臺寫一套全新的代碼出來。
雖然小程序主要在移動端運行,它的設計理念會盡量貼合原生應用,多數控件、組件、交互的設計方式一樣,但系統不同必然會導致細節上的差異,而界面的畫布就是最大的問題。
首先小程序官方創建了一套自己的語言,WXML、WXSS、WXS,分別對應網頁前端的 HTML、CSS、JavaScript。控制尺寸、樣式的語言是 WXSS,而它的使用的尺寸單位是 rpx。
rpx 不是厘米、像素這樣的物理單位,也不是移動端會用的 pt、dp、sp 這樣的矢量單位,而是一個很特殊的“
變種單位
”。
微信系統在渲染界面時,固定了移動端視圖窗口為 750rpx。不管你在蘋果還是安卓系統,用的是無劉海小屏 iPhoneSE 還是新款 iPhone15 破兒麥克斯,都使用 750rpx 渲染。
換句話說,
rpx 的長度即 —— 屏幕的 1/750
這是個比較抽象的概念,移動端使用矢量單位,是為了在屏幕變大的同時擴大畫布尺寸,提升顯示容量,所以有了適配原則,組件的應用自動布局適應空間的變化。
但是小程序不一樣,微信采用了最簡單粗暴的模式 —— 等比縮放。在不同尺寸的屏幕中,直接縮放內容來填滿窗口。比如下面是使用 iPhone13、iPhone15promax、Mac 端截圖的同一個小程序界面。
小程序尺寸,一篇搞定
 
 
如果我們把它們縮放成一樣的寬相互疊加,會發現元素大小是一樣的(Mac 端字體和移動端有差異,所以有一定寬度差異,但是字號相同)。
小程序尺寸,一篇搞定
 
 
但正常的移動端應用,使用自動布局而不是等比放大,覆蓋到一起是不會重疊的,比如下面 13 和 15promax 中同一張 APP 界面截圖的疊加。
小程序尺寸,一篇搞定
 
 
所以,微信的畫布就是 750rpx 寬適配到所有移動端屏幕,但高度會根據比例調整,畢竟不同屏幕的長寬比不一樣。
小程序尺寸,一篇搞定
 
 
再進一步分析,750 這個數值哪來的呢?一看就知道是 iPhone 早期和低端設備的實際分辨率,即 375 的 2x 數值。雖然現在移動端設計已經從 375 過渡到 390 再更新到目前的 393,但小程序依舊使用375。
原因和之前響應式分享中提到的一樣 ——
往大適配容易,往小適配難
現在市場上還保留數量可觀的 375 設備,以微信的角色和體量就勢必要兼容它們。既然兼容它們,那
設計和渲染就以兼容的最小畫布為準向上放大
,而沒有向下縮小的顧慮,這可以最大保證兼容性和可用性。
用 375 規格的設備去創建畫布是沒有問題的,不管你是使用 iPhone SE 還是 iPhone Mini 為標準都可以。
小程序尺寸,一篇搞定
 
 
因為系統用的 750rpx,所以原則上使用 750*1334 或 750*1624 畫布創建最佳,但實際情況還是有出路。因為官方組件庫用的是 375 寬....
小程序尺寸,一篇搞定
 
 
這又涉及到現實情況的考慮,畢竟設計是設計,開發是開發。在設計過程中我們往往會用其它應用設計好的素材,尤其一些大廠應用,小程序就是 APP 的翻版。如果把畫布做成 750 意味著素材得全部重調一遍,和重做差不多,而且參數和設計師習慣不同,會出很多錯誤。
所以,正常創建小程序的畫布使用常規的 375 畫布即可。而在進入開發階段,程序員可以直接在即時、 Figma、藍湖的標注設置中使用 2x 的倍率,既可以獲得 rpx 的具體數值。
這是個隱患問題,建議盡量在設計前和你們的前端程序員核對一遍懂不懂的如何換算數值,創建 375 是否有阻力,如果一定強調要用 750,你再自己展開后續的對線,誰贏了聽誰的……
除了標準移動端畫布外,還有個非常鬼畜的地方,就是組件庫內有個 Half-screen Dialog,里面的組件用的是 414 寬。這數值是 iPhone 8 Plus/ XS Max  的規格,總不能還特意去支持這些古代大屏吧?
414 是小程序在電腦端啟動時使用的規格,未經適配的小程序在電腦端的窗口就是固定的 414*736 。
小程序尺寸,一篇搞定
 
 
小程序尺寸,一篇搞定
 
 
用 736 這個高也和兼容小屏幕有關就不展開了,且小程序在電腦端也可以使用響應式的適配,只是這個需求實在太少,所以也不在這里多做介紹,感興趣的可以自己研究官方規范。
 
最后,我自己當 AI 做總結
  •  
    小程序使用 rpx 作為寬度單位
  •  
    移動端小程序使用 750rpx 渲染
  •  
    rpx 長度是移動端屏幕的 1/750
  •  
    小程序適配不同手機屏幕的方式是根據寬度等比縮放
  •  
    創建小程序設計畫布使用 375*667 或 375*812
  •  
    小程序在電腦端上會放大成 414*736
  •  
    電腦端調用的原生組件和移動端不同


作者:酸梅干超人
鏈接:https://www.zcool.com.cn/article/ZMTYzOTY3Ng==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
 

一篇文章帶你秒懂圖標設計

天宇 B端ui設計文章及欣賞

從1973年第一代圖形用戶界面的呱呱落地到今天百家爭鳴,圖形用戶界面竟然已經走過了50年的發展歷程,更神奇的是,原來UI設計這個職業的起源也是因圖標的起源而起,后來圖標成了UI設計中最重要的視覺元素之一,接下來,我們一起走進圖標的世界,了解它神秘背后的故事。
 
 
一篇文章帶你秒懂圖標設計
 
 
 
目錄
一、 圖標的起源
二、 圖標設計的定義
三、 圖標的種類
四、 圖標設計8大原則
五、 圖標的6大作用
六、 提升圖標設計的4個小技巧
七、 5個圖標網站推薦
八、圖標的命名規范
 
 
 
一、圖標的起源
在計算機發展的早期,用戶界面主要是基于命令行的,由字母和數字組成,操作復雜且對普通用戶不友好,用戶需要記住大量的命令和參數才能使用計算機系統。
 
隨著計算機技術的發展,為了使計算機更易于使用和理解,程序員開始開發圖形化的元素來代表各種操作和功能,圖標概念由此誕生。最初的目的是幫助新手用戶能夠更方便地組織文件和執行任務,而無需記住復雜的命令。
 
 
1.施樂公司的開創性工作
1973年,美國施樂公司推出了第一批真正意義上具有圖形用戶界面的個人電腦——Xerox Alto。雖然這款電腦僅生產了約 2000 臺,但它為后來的計算機圖形界面發展奠定了基礎。它的界面中已經出現了一些簡單的圖標,如垃圾桶、計算器、打印機、文件和文件夾等,這些圖標成為了后來圖標設計的雛形。
一篇文章帶你秒懂圖標設計
 
 
 
 
2.蘋果公司的推動
1979年,史蒂夫·喬布斯參觀了施樂公司的原型機后,深受啟發,決定開發自己的圖形界面計算機。1983 年,蘋果公司推出了Apple Lisa,這是蘋果首臺圖形界面計算機,其界面中的圖標設計得到了進一步的發展。
在這一時期,現代圖標設計之母蘇珊·卡爾擔任蘋果的創意總監,她設計的像素風格圖標簡潔、清晰、易于理解,具有很高的視覺平衡性,即使在今天看來也顯得活潑有趣。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
3.微軟的跟進與發展
1985年,微軟發布了 Windows 1.0操作系統,這是微軟在圖形用戶界面領域的重要嘗試。該系統中的圖標設計也借鑒了蘋果的一些理念,但也有自己的特點。隨著 Windows 操作系統的不斷發展和普及,圖標設計也逐漸成為了用戶界面設計中不可或缺的一部分。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
 
二、圖標設計的定義?
圖標設計是一種設計活動,主要是創造出用于代表物體、動作、概念等各種元素的圖形符號。
 
這些圖形符號具有簡潔性,讓人能快速識別。比如手機桌面上的微信圖標,用兩個對話氣泡的簡單圖案就代表了這個軟件,讓人一眼就能明白。圖標設計在很多領域都有應用,像軟件界面、網站、移動應用等,能夠為用戶提供視覺引導,方便用戶操作。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
 
三、圖標的種類
圖標在提升產品氣質上起著不可估量的地位,在界面中往往起著畫龍點睛的作用,無法想象在一個產品中,沒有圖標,界面會顯得多么的無聊和乏味,但是圖標也不能總用一種形式的圖標,這樣也會百看讓人生厭,因此也就衍生了圖標的多樣性,以下是我整理的常見圖標類型:
 
1、從視覺表現上,有以下12大類圖標
一篇文章帶你秒懂圖標設計
 
 
 
 
2、從功能上,有以下6大類圖標
?工具圖標
工具圖標在B端項目中應用很廣泛,幾乎每個組件中都會包含這類圖標;比方說騰訊文檔上方的文檔編輯圖標就是屬于這種類型,它的裝飾性很小,更多是功能的承載。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
?裝飾圖標
在一些軟件產品中,會重點強調品牌、情感化設計,大量啟用3D化的裝飾圖標來提升界面的質感。
比方說騰訊電腦管家下面的這個界面設計,它就運用了大量具有裝飾性的圖標來傳遞信息表達品牌,并且中央還采用騰訊電腦管家的IP形象作為切入點,萌萌的形象無形中拉近了與受眾之間的距離。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
?啟動圖標
在項目中,當用戶想表達品牌時,經常會把LOGO圖標做成動態圖,來更好的傳遞品牌理念,比方說聯想電腦管家,在啟動頁時,就運用了動態啟動圖標,同時下面還附帶了一個slogan的文字動效,很好的向用戶傳遞了安全的理念。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
? 進程提示圖標
在軟件界面中,經常也需要進程的提示,這時候圖標就可以起到這樣的作用,比方說騰訊電腦管家在清理垃圾時,圖標里面的風扇就一直在轉,寓意當前清理工作正在進行中。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
? 狀態提示圖標
軟件在運行過程中難免會出現bug或者內容為空的時候,這時候狀態提示圖標就尤為重要,可以大大減輕人們的焦慮情緒。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
? 增加界面趣味性的圖標
圖標不僅在理解和使用上給人們提效了,而且有時添加動效的圖標還能給人帶來絲絲驚喜和愉悅。
比方說聯想的這個動態加載圖標,看著就很有趣,讓人忍不住多欣賞一下。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
 
四、圖標設計8大原則
雖然現在AI盛行,很多酷炫的效果可以用AI實現,但是一些讓圖標看起來更加專業精致、耐看的秘密我們還是需要知道的,了解這些設計原則,我們可以事半功倍,當AI生產有偏差時,我們自己可以優化、修復和調整。
 
 
1、大小統一
圖標大小統一,就是一組圖標放置在一起,圖標大小要看起來差不多,不能忽大忽小,比方說這組圖標的第三個圖標,電腦圖標明顯過高,跟其他圖標放在一起就顯得不是那么的協調美觀和統一。
一篇文章帶你秒懂圖標設計
 
 
在大小統一這方面,我們記得就是幾何圖形它們有視覺差,有的時候并不是說尺寸一樣,大小就一樣了,比方說下面這組圖形,左邊的這組它們高度一樣,可是看起來大小并不太一樣,明顯中間的三角形顯得小;右邊的這組,三角形比左右兩邊的都要高,可是它們放在一起看起來大小就是差不多的,這就是幾何圖形帶來的視覺差,就是我們在做圖的時候,要記得多去感受,設計中的美很多不是用1+1=2能解釋清楚的,它就是一種感受,放下心中的浮躁,我們還是能感受到它們之間的區別,這種美也沒那么玄乎,只要用心,一定可以做出大小一致的圖標。
 
 
一篇文章帶你秒懂圖標設計
 
 
 
 
 
 
2、圓角統一
圓角統一,就是圖標之間有相同造型,然后又都有圓角的,那么他們就要保持相同的圓角曲度,比方說下面這組圖標,圖標的外形都是正方形且它們都帶有圓角,可是它們的圓角曲度卻明顯不一樣,這樣就看起了不夠規范和專業。
一篇文章帶你秒懂圖標設計
 
 
 
 
3、風格統一
界面中同樣功能的圖標,樣式和風格需要保持一致,比方說這組圖標樣式,風格就保持著高度的一致,都是用的玻璃質感的磨砂材質。
一篇文章帶你秒懂圖標設計
 
 
 
 
4、角度統一
這組扁平化圖標,在右邊相似的角度都疊加了一個小色塊,增加了圖標的層次感,相同的角度也增加了圖標的一致性和系列感。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
5、粗細統一
圖標的粗細要統一,這樣圖標就會看起來比較精致,比方說下面的這組圖標,圖標外框線都是用的3px,圖標里面的線都是用的2px,圖標的粗細都保持一樣的粗細規律,這樣的圖標看著也是同樣的美觀和一致。
一篇文章帶你秒懂圖標設計
 
 
 
 
6、疏密統一
下面是一組類似于插畫風格的圖標,圖標的風格是布線比較密集飽滿,而三個圖標都遵循了這樣的原則,看起來出奇的統一,所以它們看起來像是一組成套圖標。
一篇文章帶你秒懂圖標設計
 
 
 
 
7、透視統一
當設計的圖標是立體時,要注意它們的透視要統一,就像下面的這組2.5D圖標,它們的設計透視就保持著高度的一致。
一篇文章帶你秒懂圖標設計
 
 
 
8、易識別
圖標的優劣首先取決于其能否讓用戶一目了然地理解其代表的意義,這是很重要的圖標設計原則。
下面的這組手機主題圖標,識別性就非常的高,簡潔且好理解。
一篇文章帶你秒懂圖標設計
 
 
 
 
 
五、圖標的6大作用
圖標在界面設計中扮演著至關重要的角色,它們遍布于應用程序的各個角落。無論是導航欄、工具欄還是標簽欄,亦或是首頁、詳情頁、個人中心頁,功能圖標都隨處可見。圖標的主要作用在于傳達信息,相比文字,它們能更直接地傳遞概念,并且能夠為用戶的視覺體驗增添樂趣。
 
1、提升界面的使用效率
功能圖標常以簡潔的圖形呈現,它們便于用戶識別和記憶。這種設計讓用戶能夠迅速定位到所需的功能,無需耗費時間閱讀文字說明或瀏覽冗長的菜單選項,大大提升了界面的使用效率。
 
華為云的這個界面,文字信息很多,因為有了圖標的存在,人們尋找起來特別高效,能高效定位到想要的信息。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
2、增加用戶的滿意度
圖標不僅可以提升界面使用效率,還能提升用戶的體感和滿意度,精美的圖標讓人看著都是賞心悅目的,就像我們在大街上看到一個美女,都忍不住多駐留一伙一樣。
 
華為云這組精美的圖標動效就給了我很大的視覺享受,圖標設計精致,配色舒適,還有動效,給足了用戶滿足感。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
3、減少人們認知的成本
圖標很多的造型都來源于生活,來源于我們熟悉的事物,在界面中運用我們熟悉的圖形會大大降低人們的認知成本,也會讓更多人產生共鳴,它的傳達作用不受語言和國界的束縛,是一種高效的界面表達語言。
 
華為云的這組圖標就是運用了人們日常生活中非常熟悉的元素,共鳴感很強,人們學習和理解的成本很低。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
4.提升品牌形象
仔細觀察會發現,在生活中有很多的軟件產品,會把企業的LOGO融入到日常產品的圖標設計中,大大提升了品牌的一個曝光度。
 
騰訊云就有這樣的小心思,它會把騰訊云LOGO融入到banner圖標設計中,傳遞了信息,同時也加強了品牌的曝光。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
5、圖標可以增加界面的豐富度
有圖標的界面,頁面看起來豐富度更高,層次感更強,信息表達上也會更加的清晰整潔。
 
360AI辦公這個界面之所以看起來這么豐富,很大原因是在于圖標的應用,界面中有大圖標、小型面圖標,還有線性小圖標,有對比,整個頁面就看起來豐盈了不少。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
6、減少界面的枯燥感
千篇一律的文字,難免會產生枯燥感,讓人不愿多駐留;圖標多彩的配色以及Q萌的造型會讓人心生愉悅。
佐糖的這個界面,若不是有圖標的潤色,光只有功能點和文字介紹,估計會乏味不少,但是有了多彩圖標的加入,瞬間氛圍感都熱鬧了不少。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
 
六、提升圖標設計的4個小技巧
1、大量臨摹,刻意練習
任何一項技能的獲得,最開始都離不開臨摹,作為剛接觸UI設計的職場新人,可以先從臨摹入手,先臨摹簡單的,然后循序漸進,臨摹難度大點的,這樣圖標設計能力也會慢慢提升。
 
一篇文章帶你秒懂圖標設計
 
 
 
 
2、多積累好的樣本
想要繪制好看的圖標,首先要見過好看的圖標,所以我們日常要養成多收集好圖標好設計的習慣,這樣當面臨新的需求設計時,也不至于手忙腳亂,不知如何下手。
一篇文章帶你秒懂圖標設計
 
 
 
 
3、學會分析
看到好看的圖標設計時,我們要學會分析,這組圖標好,它好在哪,哪里打動了你,你分析了這些,你自己在設計的時候也會不自覺的運用到其中的智慧和思路,這樣我們就可以隨時原創出符合自己需求的圖標設計來。
一篇文章帶你秒懂圖標設計
 
 
 
 
4、明確目標與受眾
目標受眾不同,他們對圖形的期望也會不一樣,比方說在設計兒童產品界面和B端產品界面時,所用的顏色和形狀都是有考究的。
 
兒童類產品的圖標設計,形狀會比較圓潤,色彩也比較多彩;但是B端類產品的圖標設計用色就會很克制,形狀也不會過于圓潤。
一篇文章帶你秒懂圖標設計
 
 
 
 
 
七、5個圖標網站推薦
1、Iconfont
(https://www.iconfont.cn/)
iconfont是阿里巴巴的圖標庫,應該也是受眾最多的一個圖標下載網站,給我們平時工作提效不少,造福了不少的設計師。
一篇文章帶你秒懂圖標設計
 
 
 
 
2、IconPark
(https://iconpark.oceanengine.com/)
IconPark是字節跳動旗下的一款圖標下載網站,它可以在線把一個圖標實現多種風格的切換,線性、面線、線面結合,并且線的粗細大小可以調節,非常的方便。
一篇文章帶你秒懂圖標設計
 
 
 
 
3、Ikonate
(
https://ikonate.com/
)
Ikonate是一款可以在線編輯的圖標網站,涵蓋了常用的一些圖標,可以調節線條的粗細和大小,導出的格式是SVG。
一篇文章帶你秒懂圖標設計
 
 
 
 
4、Iconfinder
(https://www.iconfinder.com)
Iconfinder的優點,我覺得是造型夠豐富,滿足你有時候無法腦補的痛點。
一篇文章帶你秒懂圖標設計
 
 
 
 
5、Iconduck
(https://iconduck.com/)
Iconduck的優點是有273,858個免費的圖標庫和插畫庫供大家選擇,儲備夠豐富。
一篇文章帶你秒懂圖標設計
 
 
 
 
 
八、圖標的命名規范
圖標一般有四種狀態,正常normal (nor)、高亮highlight (hig)、選中selected (sel)、不可用disable (dis)四種狀態,一個好的命名習慣會給自己的合作搭檔帶來很好的體驗,通常在寫界面的時候,前端都是用英文對元素進行命名的,這里我列舉一下我經常合作同事的一個命名規范,供大家參考:
模塊-類別-功能-狀態
例如:Nav_button_message_sel
 
一篇文章帶你秒懂圖標設計
 
 
 
 
 
總結:
在深入探索了圖標設計的豐富世界之后,我相信大家未來能夠根據不同的場合挑選出恰當的圖標風格和樣式。通過持續的總結和歸納,我對圖標設計的理解也變得更加深刻。雖然這份總結可能還有待完善之處,請大家多多海涵,期待在下一篇文章中再次與大家相見。
 
 
 
 
 


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

不錯,這些設計讓我開眼啦!

天宇 交互設計及用戶體驗

有時候創意就體現在很細節的局部,不一定是多么驚人的想法,只要一個細微的差異,就能拿捏用戶的情緒。一些簡單的設計處理,只要讓用戶多看幾眼,就能實現設計目的。
 
本期黑馬哥繼續為大家分享一些不錯的設計案例,希望這些設計思路可以給你開眼,帶給你更多創作靈感。
不錯,這些設計讓我開眼啦!
 
 
 
 
一、情感化的打卡設計
通過線上打卡已經成為眾多業務方向的選擇,在便利性的同時也方便管理與追溯。為了提高用戶的打卡參與度,產品設計師也在不斷挖掘更有趣、體驗更好的解決方案。
 
作為上班族和家長們會用到一些打卡軟件來輔助完成工作或者學習等,平時我也會經常使用釘釘給小孩進行課業打卡。在完成打卡后“我的成果”展示設計中,打卡標記的設計中嵌入系列 IP 形象或者圖形,通過情感化的設計提升了成果展示的趣味性,更能激發小朋友參與打卡的熱度。
不錯,這些設計讓我開眼啦!
 
 
 
 
二、底部標簽欄的二級導航設計
底部標簽欄更便于用戶操作頻繁切換的功能,通常 3~5 個為最佳,如果遇到超過極限值時就需要在交互形式上面思考解決方案。
 
在洋蔥學園 APP 中,體驗到一個底部標簽欄帶有二級導航的設計方案,很好的解決了超過極限值的情況。在二級導航設計中強化了字體和添加了圖片背景區分狀態,以差異化的視覺表現吸引用戶關注度,以此增加二級導航的操作率。
不錯,這些設計讓我開眼啦!
 
 
 
 
三、圖標設計的背景化運用
圖標在產品中主要分為功能性和修飾性,對產品的操作體驗和感官體驗都起到了非常重要的作用,圖標的運用也被深挖到各種業務場景中。
 
在嗶哩嗶哩任務中心欄目中,展示紅包、獎勵、積分、獎品的設計中,除了量化的數字結合以外,在各自數據背景中還添加了圖標設計。相較于單純的數據展示而言,圖標背景化的運用不僅提升了設計的感官度,也助力了業務屬性的差異化。
不錯,這些設計讓我開眼啦!
 
 
 
 
四、品牌化的彈窗設計
彈窗設計在圖形創意、視覺表現和造型等方面都有更多發揮空間,為了提升轉化率和降低阻力設計帶來的負面情緒,提升彈窗設計的體驗感也是至關重要的。
 
在使用我愛我家 APP 時,發現新版本的彈窗設計造型結合品牌和業務性質進行設計,區別于常規造型的彈窗表達。品牌化的探索可以強化用戶對產品的品牌記憶度,深化用戶粘性。
不錯,這些設計讓我開眼啦!
 
 
 
 
五、色彩豐富的卡片式設計
卡片式設計是近些年非常流行的 UI 趨勢之一,卡片式設計無論在視覺表現力還是造型層面都呈現出了眾多案例,簡單的形式被賦予了各式各樣的表達。
 
最近發現了一個色彩豐富的卡片式設計案例,相較于常規的白色卡片而言,嘀嗒出行的設計中給帶有描邊的卡片添加了局部突出部位作為背景。在色彩漸變的強化中,不僅使得卡片結構化,也體現出了青春活潑的感官氛圍。
不錯,這些設計讓我開眼啦!
 
 
 
 
六、動態 IP 強化功能關注度
品牌 IP 在產品設計中的運用已經逐步普及,提升情感化設計的同時,也是助力品牌化的關鍵。
 
在掌上生活 APP 設計中,為了突出“服務大廳”入口的曝光度,采用動態 IP 來強化該功能的關注度。動態化的小招喵更有吸引力,強化功能的同時也讓用戶感受到輕松愉悅,提升了產品設計的情感化體驗值。
不錯,這些設計讓我開眼啦!
 
 
不錯,這些設計讓我開眼啦!
 
 
 
 
七、情感化的用戶反饋設計
用戶反饋是提高忠誠度和采集數據的關鍵,為了提高用戶反饋的意愿度,從情感化設計或者互動性等方面都在不斷探索。
 
通過餓了么訂餐之后,當配送員完成送達時,會彈窗提示用戶是否已收到商品。通過表情化的圖標配合文案設計,情緒化的表達使得反饋更清晰,更能提升用戶的反饋意愿。
不錯,這些設計讓我開眼啦!
 
 
 
 
八、人性化的導向設計
地圖軟件的出現改變了大家的出行方式,再也不會擔心迷路,可以盡情地走南闖北。隨著產品體驗的不斷升級,地圖軟件也越來越人性化,帶給用戶優質的導航體驗。
 
對于駕駛的用戶來說,如果使用高德地圖提前開始導航會進行人性化的導向,方便導航時間預估得更加精準。點擊“我已上車”即可開始導航,讓導航體驗變得更加人性化。
不錯,這些設計讓我開眼啦!
 
 
 
 
九、動態頭像設置
為了提升預設內容的體驗度,針對一些默認的內容也在逐步走向情感化設計的方向,可以讓用戶感受到更加真實的操作體驗。
 
針對頭像設置也從默認的灰色人物剪影演變為個性化的 IP 形象、人偶、真實人物形象等,為了提升互動性,也在提供動態化的解決方案。比如豆包 APP 在給豆包設置頭像時,設計了不同性別的動態頭像,使得頭像表達更加生動形象。
不錯,這些設計讓我開眼啦!
 
 
 
 
十、個性化的界面設計
產品設計的風格越來越多樣化,為了體現差異化的體驗,個性化的界面設計也是層出不窮。
 
最近在點餐時體驗到一個設計風格非常個性化的小程序,名字叫:WHAT TO EAT。區別于別的點餐類產品,該產品設計風格以線性插畫風結合,非常有個性化。不僅強化了自身品牌感,也深化了用戶的記憶點。
不錯,這些設計讓我開眼啦!
 
 
 
 
小結
優秀的設計細節可以幫助我們打開禁錮的思維,創作出更優秀的設計方案。描述的觀點屬于個人經驗總結,不足之處我們繼續努力改進。
 
本文由 @黑馬青年 原創發布。未經許可,禁止轉載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY0MDAyNA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

界面設計中【浮標】的思考與探索

天宇 移動端UI設計文章及欣賞

界面設計中【浮標】的思考與探索
結合設計原則與“智能伴學助手”項目應用浮標實踐展開
-------------
 
目錄:
背景
浮標的本質與價值
浮標設計
一、功能定位與場景適配
二、視覺與交互設計
三、技術實現優化
四、無障礙與倫理考量
五、創新方向探索
結語
 
-------------
背景:
在教育類移動端中接入了大模型AI智能應用,為保證這個應用入口可長期保持并隨時可見,提高使用率,為用戶提供便利。筆者通過“智能伴學助手”浮標實踐應用,對后續制作浮標在界面設計中思考與探索。
 
浮標的本質與價值
1)空間維度突破  
作為界面中的「第三層空間」,浮標通過視覺懸浮感打破平面限制(如iOS 的3D視差效果); 在信息過載時代,提供「隨時在場」的核心功能入口(如美團外賣的懸浮購物車,左右動效:進縮)。
「第三層空間」并「隨時在場」,也是很好的廣告位和優惠營銷,一些浮標的“小巧思”。
「第三層空間」并「隨時在場」,也是很好的廣告位和優惠營銷,一些浮標的“小巧思”。
 
2) 認知心理學應用
利用格式塔原則中的「閉合性」設計半透明遮罩,暗示可交互區域;通過菲茨定律優化點擊熱區,圓形浮標直徑建議≥48dp(Android 規范)。
 
 ---------------------
浮標設計
就項目中“智能伴學助手”為例,一個教育類的應用入口,結合功能定位、用戶體驗與技術實現浮標在界面中的作用。通常浮標是一個懸浮的按鈕或圖標,用于快速訪問某些功能,從多個維度探索其在移動端界面中的合理呈現方式:
 
 
一、功能定位與場景適配
 
浮標的設計規范:
比如尺寸、顏色、位置。通用的設計規范,教學工具類App的界面設計,可能涉及圖標和布局。
1)尺寸與網格系統
 ◇ 圖標尺寸需適配不同屏幕分辨率,常見規范包括128x128px、96x96px、64x64px等,需根據界面層級選擇合適尺寸。
◇ 尺寸一般用1:1比較好或者成倍數,先做大再導出所需要的不同大小比例。
◇ 使用網格系統(如微軟Fluent的24px基礎網格)確保視覺一致性,留出安全邊距(如2px內邊距)避免元素溢出。
2)造型與風格
◇ 遵循簡約易懂原則,優先采用象形圖或表意符號增強識別性。
◇ 保持系列圖標風格統一,包括線條粗細(建議1.5px)、圓角弧度(微軟Fluent定義大/中/小三級圓角)及視覺平衡。
3)適配性
◇ 導出格式需與開發協作,推薦PNG序列或SVGA文件以兼顧清晰度與性能。
◇自適應考慮不同平臺的顯示情況。
 
核心功能聚合:
語言學習工具類界面將高頻功能(如首頁入口、作業評論、學習提問)通過浮標動態整合,支持長按展開二級菜單或滑動切換功能模式,吸附于屏幕邊緣。
根據學習階段智能變化:
課前(預習):浮標展示課程試學入口或學習目標設定;
課中(口語輸出):提供實時筆記懸浮窗或標記工具;
課后(點評):將課后作業及鞏固語言習得情況的評價和自我精進。
(外語語言口語學習一般模式:盲聽,然后根據自己的話復述,理解語言并有效使用語言)
  
首頁入口、作業評論、學習提問通過浮標智能解答點評,通過二級頁面展開細則
首頁入口、作業評論、學習提問通過浮標智能解答點評,通過二級頁面展開細則
 
二、視覺與交互設計
 
以”智能伴學助手“為例,浮標主色是藍色,企業主題色也是藍色,而”智能伴學助手“浮標使用背景一般也以藍色為主,App主題色也是藍色,多場景使用適配藍色背景的靜態浮標,又要使浮標可以在背景中脫穎而出,在其過程中嘗試藍+藍搭配的存在局限性,本身藍色系較統一。
在同為藍色后,產生不同「空間」,通過將界面元素分層(如前景圖標與背景圖像),營造深度感。在浮標進行描邊隔層,現在很多表情包就是這種模式操作。
微信小程序的移動學習平臺設計,強調了用戶需求分析、界面簡潔和交互設計,這可能對浮標的功能定位有幫助。智能伴學助手來浮標快速訪問。在不同背景下的浮標呈現視覺形式,只要點擊即可進入應用。
微信小程序的移動學習平臺設計,強調了用戶需求分析、界面簡潔和交互設計,這可能對浮標的功能定位有幫助。智能伴學助手來浮標快速訪問。在不同背景下的浮標呈現視覺形式,只要點擊即可進入應用。
 
思考與探索:
浮標需要特色,用戶在使用過程中視覺明顯,提高交互。
浮標既顯眼又不干擾學習,所以需要平衡可見性和沉浸感。
浮標可以移動,用戶可以根據需要調整位置,避免遮擋內容。
現浮標是靜態的,如何嘗試動態浮標,與用戶有更好的交互體驗,參與感。
顏色和動效方面,冷色調營造學習氛圍,浮標可以用品牌色,如藍色或綠色,加上微動效吸引注意。樣式用了藍色圓形浮標,可能適合教育類應用,賦予科技感設計。
不同狀態或者不同頁面下的浮標呈現方式不同,但成一系列,增加趣味性。
 
白色背景或者透明背景下的浮標呈現,在不同頁面呈現一“系列”
白色背景或者透明背景下的浮標呈現,在不同頁面呈現一“系列”
 
藍色背景下或者在統一色系下浮標視覺”糊“,可用白邊的形式將背景和浮標的”空間“區分開
藍色背景下或者在統一色系下浮標視覺”糊“,可用白邊的形式將背景和浮標的”空間“區分開
 
思考與探索:
配色方案
1)主色選擇
明亮色系:如紅色、橙色、黃色等,能快速吸引用戶注意,適用于促銷活動入口。
品牌色融合:在特殊場景中融入品牌LOGO或主色,代表企業形象和IP,增強品牌認知。
2)色彩心理學應用
藍色:傳遞信任感,適合金融或工具類應用。
黑金/黑黃組合:營造神秘或高端感,常見于娛樂或奢侈品領域。
紫色+粉紅:適用于美容、女性向產品,傳遞溫柔與創意。
控制色彩平衡,用戶色彩感官可適應。
3)對比與背景
使用中性色(如米色、白色)作為背景,提升信息可讀性。
避免沖突色搭配(如藍色用于食品類浮標易抑制食欲)。
 
思考與探索:
個性化推薦和交互設計,可以結合AI預測用戶行為,動態調整浮標的出現時機,比如在需要提醒作業時顯示。主色選用品牌色(如教育藍/科技紫)強化識別性。
 
如何設計浮標會更好?
如何設計浮標會更好?
 
 
創新交互模式思考探索:
1)壓力感知交互  
?安卓壓感屏實現「輕按預覽/重按觸發」分層交互(如華為懸浮球壓感菜單);配合觸覺反饋(Haptic Engine)增強操作確認感。
2)動態語義變形
-生物擬態動畫:
?呼吸感懸浮:模擬水母游動節奏(振幅0.5-1.2px,頻率0.8Hz)  ;
?點擊時觸發粒子擴散動畫(模擬知識傳遞意象);
?拖拽時產生彈性形變(阻尼系數0.6-0.8),邊緣碰撞后回彈。
- 根據場景智能改變形態:  
? 閱讀類App中展開為「書簽浮標+進度條」復合控件  ;
? 音樂播放器浮標可拉伸成波形可視化界面。
 通過多模態反饋,聽覺,視覺,觸覺多種情感交互。
3) 空間布局策略:
?默認位置:置于屏幕右下側(符合右手持機習慣),預留10%邊距防止誤觸;
?智能避讓:通過內容識別算法,在視頻播放或文本輸入時自動偏移避開核心內容區域;
?AR場景中的空間投影浮標(如IKEA Place家具預覽浮窗)。
位置多為屏幕右下側
位置多為屏幕右下側
 
 三、技術實現優化
 
1)跨端一致性
  •  
    使用React等框架封裝可復用浮標組件,通過響應式設計適配不同設備尺寸(如折疊屏展開態需重新計算定位錨點);
  •  
    采用SVGA格式實現高性能動效,控制幀率在30fps以內以降低功耗。
2)AI驅動個性化
  •  
     基于LSTM模型預測用戶行為: 檢測到長時間未操作時,浮標縮小并展示激勵標語; 識別到錯題高峰時段,主動彈出知識點講解入口;
  •  
     支持語音指令交互(如“浮標移到左上角”)。
 
四、無障礙與倫理考量
 
1)包容性設計
◇為色弱用戶提供高對比度模式(浮標輪廓增加動態描邊,對比度≥4.5:1);
◇支持頭部追蹤控制浮標移動(iOS Switch Control技術適配)。
2)防沉迷機制(適合未成年類App)
◇連續使用1小時后,浮標漸變灰色并觸發休息提醒;
◇家長端可遠程設置浮標功能禁用時段。(未成年學習類工具考慮優化)
 
五、創新方向探索
 
1)多模態融合:
◇AR場景中浮標投射為3D虛擬助手,支持手勢交互與空間定位;
◇結合眼動追蹤技術,實現注視區域自動呼出上下文菜單。
2)情感化表達:
◇根據學習成就解鎖浮標皮膚(如連續打卡7天變為獎杯形態);
◇錯誤率過高時,浮標呈現“鼓勵模式”(配色變暖+微震動反饋)。
學習類智能伴學助手的浮標既能作為高效的功能樞紐,又可成為情感化學習伴侶。實際落地時建議結合A/B測試持續優化,例如對比分析「固定浮標」與「場景自適應浮標」的點擊轉化率差異。
 
----------------
 
結語:
浮標不應僅是功能載體,更應成為:  
- 空間敘事者:通過動態變化講述產品故事;
- 情感連接器:建立用戶與數字世界的溫度觸點;
- 場景預言家:預判需求并提供恰到好處的服務。
 
設計師需在「顯性價值」與「隱形干擾」間找到精妙平衡,讓浮標成為提升體驗的優雅解決方案而非視覺負擔。未來可探索腦機接口的意念控制浮標、量子動畫渲染等突破性方向。
技術實現上,探究代碼示例展示了如何控制浮標的移動,確保不超出屏幕,這可以作為技術參考應用實際案例中。同時,性能優化方面,使用SVGA格式或減少幀數,可能對動效設計有幫助。
浮標設計需要結合功能定位、用戶行為、視覺設計、交互體驗和技術實現,可多進行參考不同案例,搜索現有項目,對比借鑒然后對新型B端界面有所創新,確保既實用又不干擾用戶。
還可以利用Ai創新思維,設計師可以更快速、高效地生成多種設計方案,結合項目開發滿足消費者對個性化、時尚化的需求。
 


作者:啊海包船打魚
鏈接:https://www.zcool.com.cn/article/ZMTY1MjgzNg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

從混沌到有序:設計規范全方位指南

天宇 移動端UI設計文章及欣賞

從零開始,打造設計規范:設計原則、流程與工具的全方位指南
整個文章我們會講
 
  •  
    為什么建立設計規范?
  •  
    什么時候建立設計規范
  •  
    以及具體的設計規范怎么做
 
一、設計規范的目標?
首先需要明確設計規范的目標,也就是為什么建立設計規范,這里包括提高用戶體驗、降低開發成本、提高團隊協作斜率等。這些目標將為后續的規范制定提供方向。
還有就是大家都知道,在做項目時如果沒有明確的目標和價值,是很難推動的。
從混沌到有序:設計規范全方位指南
 
 
二、什么時候建立設計規范?
在項目全面進入ui設計之前,先設計幾個核心頁面的demo
,確立整體的基礎規范和設計風格,把一些基礎的設計規范定義出來,例如
命名、尺寸、間距、顏色、字體、核心控件
等、這樣在開展設計的過程中保持一致性和統一性,當然,在項目設計過程中,UI設計規范也需要根據實際情況去調整補充。
從混沌到有序:設計規范全方位指南
 
 
三、設計規范具體要怎么做?
這里先講一些基礎通用的規范
3.1、間距
在間距部分我們需要把一些
頁面間距、模塊間距、元素間距
,這些要定義出來
像我平時在工作中
通常以8px作為基數
,以此衍生出
8、16、24、32、48、64
,這6個間距數值,完全能夠滿足絕大多數的使用場景。當然,針對信息較少的頁面也會使用到
120、160、200...其他間距數值,例如缺省頁、登錄頁面等。出去這些特殊頁面,基本上通用的就上面那6個就足夠了
從混沌到有序:設計規范全方位指南
 
 
 
3.2、顏色規范
我們要先把主色調和輔助色,通常主色都是根據
品牌形象和目標用戶
的需求選擇。
拿在顏色的定義中需要注意以下幾點
1、使用色彩心理學:
根據不同的顏色和情感聯想,選擇適合的顏色來傳達品牌形象和用戶體驗。例如,藍色通常被認為具有專業、信任和穩定的感覺,而紅色則具有激情、活力和創新的聯想。
 
2、建立層次結構:
使用顏色的飽和度和明度來建立層次結構。將重要的設計元素設置為高飽和度和明亮的顏色,使其在頁面上突出顯示,而將次要的設計元素設置為低飽和度和較暗的顏色。
3、避免使用過多的顏色:
過多的顏色可能會使頁面顯得混亂和難以聚焦。在設計過程中,盡量使用有限的顏色組合,并且要避免使用過多的對比色或互補色。
從混沌到有序:設計規范全方位指南
 
 
3.3、文字規范
我們需要把
字體、字號、顏色、行距
、這些給定義清楚,有規律的大小字號更有利于閱讀,(另外要注意一些特殊字體的版權問題)
常用的字體大小
20px、24px、28px、32px、36px,44px,48px,且都是間隔4px
,設計師需要根據具體場景去決定字體大小,以確保用戶能夠輕松閱讀和理解界面信息層級比重。
 
3.4、UI圖標規范
圖標是UI設計的重要組成部分,它可以使圖標看起來更加
美觀、易用、統一和有吸引力
。也傳達著整個UI視覺風格調性,和系統功能的作用。
在圖標設計上一定要簡單清晰,定義規范時要對
圖標的大小、圓角、線條粗細、等有明確的指示
,在繪制的時候我們可以制定自己的
網格規范
,以便參考。
從混沌到有序:設計規范全方位指南
 
 
3.5、按鈕
按鈕尺寸:
一般來說,按鈕的尺寸應該能夠適應不同的屏幕尺寸和分辨率,并且應該能夠突出顯示。
按鈕形狀:
應該具有清晰的輪廓和圓潤的邊角,圓角大小是多少
按鈕顏色:
按鈕的顏色應該與整體UI設計風格相協調,并且應該能夠突出主題和重點信息。一般主按鈕大多使用主題色。
按鈕文本:
按鈕的文本應該簡短明了,并且應該能夠清晰地表達按鈕的功能。還需要定義清楚按鈕中限制的字數。
按鈕內邊距:
按鈕的內邊距應該能夠擴大按鈕的可點擊范圍,并且應該能夠提高用戶點擊按鈕的準確性。需要考慮極限情況下,最小應該保持多少內邊距。
按鈕狀態:
按鈕的狀態應該能夠表達按鈕的狀態和功能。一般來說,按鈕的狀態包括正常狀態、點擊狀態等。
從混沌到有序:設計規范全方位指南


作者:考思考
鏈接:https://www.zcool.com.cn/article/ZMTYxMjA4OA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

身為一個ui設計師,為什么我連一個卡片設計都設計不好!

天宇 移動端UI設計文章及欣賞

 
在ui設計中,卡片是不可避免需要用到的東西。那么什么是卡片?卡片有哪些類型?
本次就以此問題為出發點,為大家詳細介紹ui設計中的卡片設計。
 
 
一、設計基礎
在開始設計之前,我們需要先了解卡片的定義、特點以及應用原則。
 
 
1.卡片的定義:
卡片設計是一種界面設計模式,其作用是使用卡片來作為界面信息展示的基本單元。卡片設計通過將信息分割成獨立的、可管理的部分,使整個界面看起來更加簡潔,讓用戶能夠更容易在瀏覽時理解內容,找到自己需要的信息及商品。
 
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
2.卡片的特點:
在ui的設計卡片的過程中,我們要合理的將卡片的特點發揮出來,卡片主要有三個特點。
 
 
01.瓷片信息模塊化:
ui卡片的作用是將信息呈現為獨立的卡片單元,方便用戶理解和管理信息。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
02.視覺吸引力:
視覺吸引力,顧名思義就是通過精心設計的視覺元素和顏色,讓用戶眼前一亮吸引用戶注意,以此提升用戶的使用體驗。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
03.強交互性:
一個合格的ui卡片在設計時需要具有豐富的交互功能,如點擊、滑動等和用戶實現“交流”的操作,增強信息傳達效果和用戶滿意度。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
 
3.卡片的應用原則:
在應用卡片時,我們要按照卡片的應用原則來保證卡片不會在運用時出現違和感。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
01.一致性:
保持卡片的一致性,包括樣式布局和交互方式。
 
02.信息層級:
信息的重要性和層級設計讓重要的信息更加顯眼。
 
03.簡潔清晰:
卡片內容簡潔明了,用戶易于理解和消化。
 
04.可交互性:
提供一定的交互功能,增加用戶的使用體驗。
 
05.響應式設計:
適應不同的設備和屏幕尺寸,確保好的顯示效果。
 
06.視覺吸引力:
通過顏色和設計吸引人的視覺效果。
 
 
 
 
二、卡片分類
正所謂人以類聚,物以群分。卡片也可以分為不同的類型,大致來分,卡片可以分為三個類型。
 
 
 
1.封面卡片:
一本書,好的封面就可以吸引讀者。封面卡片作為用戶接觸到的第一個卡片,自然是非常重要。
 
封面卡片可以根據不同的項目軟件來改變,比方實景類,如商品、風景等;或者是影視類,如動漫、影視、直播等。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
2.普通卡片:
普通卡片比較常用的三種設計形式分別為圓角卡片、破形卡片、多張重疊。這樣設計可以形成差異化,增加設計感。
 
 
 
01.圓角卡片:
一般普通的卡片大多數為直角,而圓角卡片的出現則是為了適用不同的屏幕,同時圓角的大小不一,可以增強視覺沖擊力,形成差異化,吸引注意力。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
02.破形卡片:
破形卡片是在界面中,用不規則的形狀做出來的卡片,能夠更好的突出重要信息。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
03.多張疊加:
在設計過程中,如果想要卡片看起來更加立體,設計感更強可以用到多張疊加。這樣一來,整個卡片的層次感也更加強烈。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
 
 
 
 
 
3.真實物體轉化成的卡片:
在設計過程中,設計師可以根據現實中存在的物體將其轉化成卡片。通過這樣的轉變,可以讓用戶有更加真實的使用體驗。
 
 
01.優惠券類卡片:
在日常生活中,優惠券隨處可見,人們對于優惠券的作用也心知肚明。那么將優惠券轉化成卡片,則能讓用戶更直觀的體驗到優惠力度。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
02.銀行卡類卡片:
當今社會銀行卡幾乎是每個成年人必備的物品,將銀行卡轉化成卡片,用戶在使用手機銀行時會多一點舒心。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
03.音樂類卡片:
將現實中的cd唱片轉化成卡片,能夠讓用戶有更好的體驗。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
總的來說,將現實中習以為常的物品轉化為卡片,能夠更好的和用戶產生共情。
天下沒有不散的宴席,來到這里,又到了再見的時候。
 
今天的卡片分享就到此結束,為了下一次的重逢不在遙遠,關注我,下次再見!



作者:菜心輕量文
鏈接:https://www.zcool.com.cn/article/ZMTYyNjI2NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

為什么我沒有這樣的設計思維呢?

天宇 設計思維

設計能力的強弱取決于設計思維,技能操作層面的不足可以通過反復訓練,在短時間內即可彌補;而設計思維需要通過長時間的熏陶,還要找對學習的方法和途徑。很多設計師工作五年甚至十年,但是設計能力依然比較普通,很大程度上還是設計思維能力的缺失。
 
我們也可以通過體驗和分析優秀的案例來提升,學習優秀設計師的設計思路和處理技巧,以此來強化自我專業思維。今天黑馬哥繼續給大家分享一些優秀的設計案例,希望可以助力提高大家的設計思維。
為什么我沒有這樣的設計思維呢?
 
 
 
 
體驗目錄
 
一、不一樣的返回設計
二、可以切換大小的設計布局
三、做減法的設計表達
四、品牌動態渲染春節氛圍
五、品牌插畫表現界面置底
六、動態刷新紅包設計
七、涂鴉風格的流程設計
八、情感化閃屏設計
九、圖標設計的翻轉動效
十、蛇年主題圖標設計
 
 
 
一、不一樣的返回設計
 
進入層級界面可以通過返回回到上一級操作場景,通常都是以箭頭圖標、返回文字組合設計或者獨立設計。
 
最近在體驗喵喵記賬 App 時,其返回設計以“門”作為創意元素,進入層級界面時門會打開,點擊返回時會有關門的動作。以開關門的方式表達進入和返回狀態,形象化的表達了不一樣的返回設計,呈現出不同的設計解決方案。
為什么我沒有這樣的設計思維呢?
 
 
 
 
二、可以切換大小的設計布局
 
為了滿足更多用戶的體驗需求,設計布局的靈活性變得越來越重要,需要提供多種選擇便于操作。
 
在藏書館 App 中,針對書庫分類的展示設計,用戶可以通過點擊切換呈現不同大小的樣式。文字和書籍封面圖都會隨著切換而縮放,方便滿足不同用戶的瀏覽需求,提升用戶對產品的操作體驗度。
為什么我沒有這樣的設計思維呢?
 
 
 
 
三、做減法的設計表達
 
隨著互聯網環境的發展,提供給大家的產品選擇越來越豐富,而產品設計也從最初的功能性服務擴展到綜合性服務。功能變得越來越多,商業氛圍也十分濃厚,有種眼花繚亂的感覺。
 
最近在使用美團外賣柜小程序時,其簡約的設計印象深刻。存取功能一目了然,沒有多余的設計干擾體驗,操作指引也是簡單易懂。有時候減法的設計才是最好的用戶體驗,與其布局一堆功能或者服務,反而增加了用戶的操作成本。
為什么我沒有這樣的設計思維呢?
 
 
 
 
四、品牌動態渲染春節氛圍
 
春節氛圍感營造對于品牌來說至關重要,是渲染春節主題和增強用戶親和力的關鍵,營造方式也是豐富多樣。
 
其中夸克 App 通過品牌 LOGO 結合春節主題進行動態設計,不僅突出春節氛圍,動效過渡也非常流暢。夸克經常會以品牌動態化的形式表現節日或者特殊活動主題,設計融合性處理得十分細致。
為什么我沒有這樣的設計思維呢?
 
 
 
 
五、品牌插畫表現界面置底
 
界面設計過程中,對于到達底部的處理方式通常有品牌表達、公司名稱、版權信息、情感化內容表達等。
 
最近在體驗我要做計劃 App 時,界面設計底部以品牌 IP 形式的插畫進行表達,不僅符合整體設計風格,也使得界面設計更有趣味性。整個產品設計也以插畫風格為主,是一個很有個性化的產品。
為什么我沒有這樣的設計思維呢?
 
 
 
 
六、動態刷新紅包設計
 
結合刷新設計賦予更多功能或者服務,已經成為二層樓設計的首選。
 
最近在體驗美團外賣時,首頁下拉刷新會出現紅包樣式的動效表達,隨著下拉的程度不同,紅包金額會隨之增加或者減少。動態刷新紅包設計更能吸引用戶繼續體驗,進而進入二層樓參與活動,趣味性的表達方式很有吸引力,也以此方式促進了用戶參與感。
為什么我沒有這樣的設計思維呢?
 
 
為什么我沒有這樣的設計思維呢?
 
 
 
 
七、涂鴉風格的流程設計
 
隨著同質化設計的現象,產品設計也在不斷嘗試更具差異化的風格。結合插畫風格表達界面設計,變得越來越普及。
 
在我要做計劃 App 設計中,整體風格以涂鴉插畫風為主,完善做計劃流程設計也以涂鴉風格進行設計。不僅風格特征更突出,也能吸引用戶的關注度,促進完善計劃流程。
為什么我沒有這樣的設計思維呢?
 
 
 
 
八、情感化閃屏設計
 
閃屏設計分為品牌感方向和營銷廣告等方向,其中閃屏廣告較為常見,不過也有品牌啟動頁和閃屏廣告相結合的方式。
 
閃屏設計的形式也非常多樣,其中情感化的方向以 IP 形象和情感故事性插畫為主。比如喜馬拉雅閃屏設計便以 IP 形象的各種動態化形式呈現,畫面非固定表達形式,每次重新打開都會有所不同,IP 動態也非常俏皮可愛。
為什么我沒有這樣的設計思維呢?
 
 
 
 
九、圖標設計的翻轉動效
 
圖標動效的運用非常普及,以往見過的案例都是動效的形式表達圖標的不同形式感,但是圖標的含義不會受到影響。
 
最近在體驗盒馬 App 時,首頁金剛區圖標以翻轉動效進行表達,既突出春節氛圍也賦予圖標兩層含義。在保留圖標本身功能含義的同時,通過翻轉另一面表達出不同的意思,也是一個新的圖標動效表達思維。
為什么我沒有這樣的設計思維呢?
 
 
 
 
十、蛇年主題圖標設計
 
蛇年春節主題設計在產品中的運用很豐富,其中在圖標設計中的運用是最普遍的,廣泛運用于應用圖標、金剛區圖標、底部標簽欄圖標和其他功能圖標等。
 
圖標設計的運用形式很多,比如蛇年主題文案嵌入、生肖蛇相關元素設計、春節元素設計等。表現形式以立體質感居多,配色以突出春節氛圍為主。
為什么我沒有這樣的設計思維呢?
 
 
 
小結
 
設計思維除了依靠自身專業基礎以外,通過不斷學習分析優秀的案例也能不斷提升,希望本期的案例分享可以帶給大家更多靈感。
 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY1MDc0OA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

在你的設計中營造“愉悅感”

天宇 用戶研究

引言:
當我們談及用戶體驗的時候,“
愉悅
”這個詞是最常聽到的一個形容詞。讓用戶愛上一個產品,“愉悅”的用戶體驗就是核心要素,這也是設計力圖達到的效果。
在一個產品的體驗中,使用戶在情感上感到愉悅的時間節點是不固定的(large or small),合理的設計能夠滿足用戶在情感上的需求。
恰到好處的成就感和讓人感到驚喜的細節能夠喚起人們內心的幸福。
我們總會對那些體現著愉悅性的設計細節贊賞有加
我們總會對那些體現著愉悅性的設計細節贊賞有加
 
分享目錄:
一、深度愉悅與表面愉悅
二、了解 Kano 模型
三、只有滿足基本期望才能讓用戶產生愉悅情感
四、時機
五、負面效應
六、總結
 
一、深度愉悅與表面愉悅
愉悅分類
愉悅分類
 
從根本上來說,創造卓越的用戶體驗是獲得深度愉悅的先決條件。
而現在僅僅聚焦于產品功能、實用性和特色已經遠遠不夠了,我們要在這之上考慮更多東西。為了能夠在市場上實現差異化并進行自我提升來超越競爭對手,我們需要專注于提升用戶滿足感、興奮感與參與感。這事先就應該被考慮進設計過程中,而不應該擱置到過程結束之后再考慮。
這對于整個體驗是非常特別的部分,就像招牌菜的秘方,故事的反轉。
  1.  
    深度愉悅是你創造終身客戶價值的方式。
  2.  
    深度愉悅是你讓你的產品融入用戶日常生活的方式。
  3.  
    深度愉悅是你與客戶建立心理安全的方式。
 
在你的設計中營造“愉悅感”
 
 
二、了解 Kano 模型
東京理工大學狩野紀昭(Noriaki Kano)教授于1979年發表了《質量的保健因素和激勵因素》,并與1984年1月18日正式發表《魅力質量與必備質量》,標志著KANO模式的確立。
因為在互聯網圈內貼合度很高,可以對需求進行分類、優先排序。也就變成了產品經理的方法論之一。
五大需求類型
五大需求類型
 
1、基本型需求
基本型需求也稱為必備性需求、理所當然需求,是用戶對企業提供的產品或服務因素的基本要求。它是用戶認為產品“必須有”的屬性或功能,當基本性需求滿足時,用戶不一定會很滿意;但如果沒有被滿足,用戶就會很不滿意。
對于這類需求,企業的做法就是注重不要在這方面失分,不斷地調查和了解用戶需求,并通過合適的方法在產品中體現這些要求。
2、期望型需求
期望型需求也稱為意愿型需求。是指用戶的滿意狀況與需求程度成比例關系的需求,即這類需求做的越好,用戶的滿意度就會越高。雖然期望型需求沒有基本型需求那樣苛刻,要求提供的產品或服務比較優秀,在互聯網圈內,也成為“癢點”,即體現企業競爭能力的表現。企業能通過這類需求來提升產品的獨特性與質量,超過競爭對手。
3、魅力型需求
魅力型需求也稱興奮型需求,是指提供給用戶的完全出乎意料的產品功能或服務,使用戶產生驚喜感的需求。雖然沒有這個功能不受影響,但是提供之后會讓用戶非常的興奮和滿意。與期望型需求區別之處在于,魅力型需求是指數型的曲線,而期望型需求是線性曲線。
4、無差異型需求
無差異型需求是指就是你有沒有這個功能用戶都不太在意,對用戶沒有影響。
5、魅力型需求
反向型需求又稱逆向型需求,指引起強烈不滿的、導致滿意度降低的需求功能。提供了反向型需求反而會使用戶滿意度降低。
KANO模型-四象限圖
KANO模型-四象限圖
 
Kano發現,如果你不滿足基本需求,客戶就不會對體驗和性能感到滿意,而愉悅感則毫無意義。他還指出,隨著時間的推移和曝光度的提高,愉悅感可以成為性能需求,而性能需求可以成為基本需求。 想想 Twitter 的下拉刷新模式,或者 Slack 或 Discord 中的斜線命令。這些功能已經從令人興奮的功能迅速轉變為基礎的UI模式,當它們不存在(或無法按預期工作)時,會讓人不滿意。
 
 
三、只有滿足基本期望才能讓用戶產生愉悅情感
我們把 “令人沮喪”和 “令人愉悅”作為一個維度的兩端來評估一個設計。而這個維度的中點,意味著設計既不令人感到沮喪但也不令人感到愉悅,它還好,它可以正常運行,它能用,它實用,它并沒有令人難忘或者脫穎而出。它提供的是表現一般 平平無奇的用戶體驗。
把一個設計從令人沮喪移動到維度的中點, 意味著我們需要了解我們的用戶并達到他們的預期和需求。要去掉任何能夠讓用戶產生“難用”和“困惑”的因素,解決導致處理工作任務變慢。
Aaron Walter-用戶需求的5個等級
Aaron Walter-用戶需求的5個等級
 
1、解決用戶的失敗操作
我們經常會遇到類似的問題,項目里的每一個人都急于想設計出“理想”的視覺界面。然而,想要達到所謂的“完美”效果,往往癡人說夢。我們都知道,人與人之間存在極大的差異,即使我們的產品功能再完美,用戶在使用產品的時候,哪怕只是遇到一個小小的障礙或斷層,就會對產品的印象大打折扣。因此,我們應該將重點關注在解決用戶的痛點,這一點很重要,可以讓我們避免陷入“理想”設計和“完美”產品的漩渦之中,可以將影響面降到最低。
 
2.簡化用戶的復雜操作
過度密集是設計的最大阻礙。過多的元素會讓用戶感受到困擾,極大破壞用戶體驗。過度密集的設計涉及到界面中元素的數量,也涉及到視覺特征的多樣性。過多的顏色和形狀組合肯定會產生混亂。堅持美學的連貫、整體表達,形成讓用戶易于理解的設計語言。
互聯網 30 年,桌面和移動界面的解決方案都已經標準化。符合用戶習慣,就能夠加速產品的學習周期。例如,用戶習慣右上角看到個人資料或登錄按鈕。移動端搜索欄應該在列表的頂部。
這個規則不僅適用于單個界面元素以及元素的位置,也適用于整個頁面或功能。如果忽略這些用戶行為模式,出乎尋常的設計可能會延長用戶的學習曲線,通常也會導致失敗。
所有界面元素都可以根據用戶的優先級來定位。考慮界面元素在用戶執行任務時的作用,通過強調不同視覺的手法,我們可以在每一屏中確定界面元素的優先級。字體、顏色、形狀、圖標。這能夠幫助用戶遵循流程和界面邏輯行動。適當的將界面分區,這能夠幫助用戶劃分關鍵場景。
當用戶使用產品時,就會在腦海中構建一張心智地圖。能夠及時的提示用戶操作某些特定的場景,提示尋找某些信息和服務等等。
 
四、時機
引起用戶愉悅的體驗一般都會由一個特殊場景或者特定的客戶觸點觸發,比如等待時間、消費數據、升級過程等等。然而沒有一種通用觸發情緒手段適用于所有情況。我們所在的市場競爭激烈,我們要尋找新的方式使自己在一眾競爭者中脫穎而出,同時為用戶增加價值是我們一直努力的目標。我們都在為同一個目標而努力,即創造有意義的設計和用戶體驗來和產品建立深層聯系。
讓用戶看到意料之外的結果能讓沮喪的情緒轉化成愉悅
有許多種方法和途徑可以激活產品的“情緒愉悅”。而 第一步通常都是花費時間去真正了解用戶痛點——找出什么對用戶來講很重要,并找機會填補這些空缺。
1、品牌個性
在眾多不同的行業中,你需要一個能讓你的產品在眾多同類產品里 脫穎而出的品牌命名。
2、微互動
關注用戶的情緒在 UI 交互中有非常重要的作用。我們都知道產品中的 微動畫 有多么重要,我們可以利用這些動畫來回應人們在屏幕前做出的反應。
在你的設計中營造“愉悅感”
 
 
在開發產品時,把 UI 界面體驗變得 更感性,讓用戶覺得屏幕另一端運行程序的是 真實的人類 而不是冰冷的計算機。在用戶完成一項個人目標時給予他們 獎勵。例如,即便用戶的收件箱沒有新增郵件時,可以利用動畫讓用戶在體驗上有更多的 參與感 。
觸感反饋就能體現應用軟件在用戶進行界面操作時給予了積極反饋。這樣的舉動會讓頁面加載時間變得更加有趣,不那么難以忍受。
Twitter 為用戶改進了下滑刷新界面。就是這樣簡單而有效的產品反饋,讓其他數千款 app 都不約而同地使用了同種交互語言,因為這讓數據刷新體驗更加流暢。
在你的設計中營造“愉悅感”
 
 
3、在用戶沒有抱有期待時提供幫助
讓用戶感到愉悅的瞬間并不需要高度可視化元素或動畫。我們的目的是尋找這樣一個機會,當他們沒有意識到或者沒有期待被幫助時,給予用戶幫助。在這個案例中,正要輸入繁雜冗長的 Wi-fi 密碼時,界面跳出了“分享密碼”的彈窗。這一舉動使用戶分享私密信息變得更安全,更簡單,同時用戶體驗變得更輕松。
蘋果:分享Wi-Fi密碼
蘋果:分享Wi-Fi密碼
 
4、實時追蹤反饋
實時追蹤反饋是另一個行業變革技術應用。
Uber 的司機分享應用讓用戶在等車的同時,了解更多當前情景里的實時信息,例如你的司機是誰、接車車型、該司機的乘客評價等。有了這個功能,用戶會認為自己有被很好的關心到。據我們了解,很多公司也在他們的應用產品上使用了這一策略和服務。現在你可以在手機上看到你訂的披薩外賣已經走到哪里,大概什么時候會被送到。
在你的設計中營造“愉悅感”
 
 
5、自動填充
驗證碼發送后可以選擇自動填入,不需要手動輸入操作。
這是另外一個用戶無需輸入完整信息就可以達到目的,從而讓用戶的生活變得更加輕松的設計。
在你的設計中營造“愉悅感”
 
 
五、采取行動
設計能夠愉悅用戶體驗的關鍵是什么呢?
我該如何在我的產品或者服務上實現這些呢?
愉悅用戶情緒需要為體驗中的某一關鍵時刻而設計,但是功能性又是放在第一位的。在設計過程中,你需要仔細并系統地處理用戶情緒,而不是事后才考慮到這一點。
 
1、做好調研,從情緒板開始入手:
從外部和內部尋找靈感,不要局限于類似的產品,靈感可以以任何形式出現。
2、確定你所定義產品的使用案例:
找出你的產品能夠讓人感到意料之外驚喜的時刻。在建立的這種情感聯系里,你的產品可以在哪些方面獲利?
3、專注于一個目標,細節很重要:
讓自己專注在一件事上,或者一個時刻。如果你同時想實現很多事,結果可能就是和愉悅用戶背道而馳,還可能導致一屏信息過載,并且會讓你的用戶處于認知超載的狀態。
你可以從以下 3 個層次入手對用戶的情感做出反饋:
  •  
    本能層
    (外觀,視覺語言,基調)
  •  
    行為層
    (如何運作,表現,回應)
  •  
    反思層
    (如何解釋和理解)
4、傳達意義即輸出結果:
為情緒愉悅而設計的意義就是為了達成某一目的。你應該為了意義(達成目的)而做設計,二者應該是因果關系而非包含關系。這里的意義比情感更有力量,超越了本身的價值。
5、設計和演示:
和產品設計的其他過程一樣,我們應該不停的測試、設計、測試、設計。讓“愉悅情緒驅動的設計”變得有意義,就是一個不斷迭代的過程,需要持續不斷的實驗和改進。
 
六、負面效應
當然,具有愉悅性的事物在某些情況下同樣會帶來負面效應。某些笑話可能冒犯到他人,溫馨的廣告可能誤導部分觀眾,即便是可愛的音效也會因為運用不當而使人抓狂。
在UX領域,我們總會對那些體現著愉悅性的設計細節贊賞有加;而另一方面,對其負面效應的了解也將有助于我們更好、更全面的掌握這一設計原則,避開陷阱。
1、增加認知負荷與交互成本
一旦運用不當,意在愉悅用戶的界面元素反而可能破壞可用性,增加界面的認知負荷及交互成本。
在你的設計中營造“愉悅感”
 
 
這是一個第一次見會被驚艷到,但實際上用起來可能沒這么好的配色網站,界面排版視覺上非常舒服。
當隨機換顏色的時候,背景會適配顏色變化,且有一個顏色漸變過度的效果。網站有個“顏色動態”的開關,點開后顏色數據旋轉,由于中心旋轉的緣故,使用時會產生眩暈、不適的感受。
過度追求視效及愉悅性,置可用性而不顧,窮極所能在每一個元素當中體現著“設計感”,最終結果便是信息難以獲取,操作難以進行。
視覺表現層面的愉悅性可以為產品賦予生命與性格,使品牌形象更加生動飽滿。然而一旦處理不當,愉悅性反而會破壞產品最基本的可用性,阻礙用戶獲取信息、完成任務。
2、審美疲勞
“驚喜”是構建愉悅體驗的關鍵要素。新鮮的、不期而遇的美好事物總會讓人感到開心。
通常情況下,愉悅感都會隨著時間而漸漸淡化,你能想到的最為精彩出奇的細節表現也只會在最初的一段時間內給人以新鮮感,而維系的方式似乎只有在情感化的方向上一遍又一遍的重設計。
3、愉悅的定義是主觀的
見過那些試圖融入幽默元素的出錯頁面?本質上講,這種做法相當于在很壞的狀況下通過開玩笑來緩解尷尬。通常,在人們試圖獲取信息、保存數據或完成任務卻遭遇意外狀況而導致失敗的時候,任何帶有“搞笑”味道的反饋信息都會顯得缺乏同情心,用戶很可能感到被冒犯,甚至因此被激怒。
此外,“愉悅”的定義也因人而異。在一部分人看來十分新鮮有趣的東西,對另一部分人可能會很糟。普遍適用的愉悅標準幾乎是不存在的,“情感化”是一個復雜地帶,良好的設計初衷未必如愿帶來正面的結果。
令人不適的缺省設計
令人不適的缺省設計
 
4、安全的愉悅性策略
對愉悅性的負面效應了解后,我們知道,挑戰和風險確實存在,但這并不意味著你需要徹底規避這個概念,關鍵在于識別一些適合承載愉悅體驗的時間點。
在那些用戶不常見到的界面當中嘗試愉悅性元素是最為安全的
譬如:
  •  
    app啟動頁面
  •  
    帳號設置成功頁面
  •  
    新功能游歷
  •  
    用戶初次完成某個重要操作之后的反饋頁面
  •  
    空狀態頁面
這些狀態通常只會被體驗一次,情境都以正面情緒為主,無需擔心反復無趣或是惱人一類的問題。
所以我們時常在新手引導流程當中看到一些有意思的表現形式,例如改版后的Google Sites。這類產品環境當中的多數頁面都很簡單直白,高度聚焦于任務,沒有多余的元素干擾流程,只有在這些“一次性”的環節當中給人以驚喜,通過引發情感共鳴來促進信息的傳遞。
在你的設計中營造“愉悅感”
 
 
當下對于愉悅性的運用方式大家都在摸索,因為這是一個很主觀的概念,任何絕對化的規則都難以成立。 對于如此抽象和感性的概念,恐怕每個人心中都會有著不同的定義。
 
七、總結
永遠不要低估“愉悅”在優化用戶體驗方面能夠發揮的作用。我們應該對它持有積極的態度并找到機會讓“用戶情感愉悅”在我們的產品里發揮作用。同時我們要牢記,制造“愉悅”情緒的根本是,我們要為用戶提供從未期待過的獎勵,而不是僅僅是為用戶開發一個產品。
我們的最終目標一直都是功能性、穩定性、實用性,而追求“愉悅”并不應該成為限制這些目標的枷鎖。每一個要實現的目標都應該能夠相互銜接融洽互不干擾。我們需要移除科技術語,遵循自然語言,在產品里添加“有趣”“幽默”的特性,最重要的一點:你的設計和產品需要別有用心。
不要一味的注重產品的功能,同時還要考慮用戶的情緒。我們需要為用戶提供一個有趣味性的使用體驗。
在你的設計中營造“愉悅感”
 
 
 


作者:拒不背鍋女士
鏈接:https://www.zcool.com.cn/article/ZMTY0NzExNg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

這些提升用戶體驗的小技巧,你知道嗎?

天宇 設計思維

為了幫助大家更輕松地提升設計水平,這里整理了一些簡單實用的小貼士。希望這些小技巧不僅能夠助力您優化當前的設計項目,還能在未來的設計之旅中為您提供參考價值。
 
 
 
21.將不相關的字段隱藏
在設計表單時,建議不要一次性展示所有信息和步驟,而是在用戶真正需要的時候再呈現,這樣可以更好地管理復雜性。如果用戶一打開表單就看到大量的內容,可能會感到壓力很大,甚至會放棄填寫。
因此,我們可以隱藏那些不相關的信息,去掉不必要的字段。通過合理地簡化表單內容,可以減輕用戶的心理負擔,確保只有在他們需要的時候才顯示必要的信息,從而減少他們在填寫其他表單項時的干擾。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
22.統一風格的圖片更有高級感
在選擇圖片時,我們的目標是實用性和一致性,而不是過分追求華麗的效果。如果只是一味地追求美觀,可能會導致圖片風格各異,從而破壞整體的視覺統一性,影響用戶的體驗。因此,設計師在挑選圖片時,需要對風格進行精確的把控,或者在后期進行適當的處理,以確保所有圖片都能呈現出一致的視覺效果。
圖片的風格對整個App的整體感覺和用戶的情緒有著重要的影響。風格一致的圖片不僅能帶來愉悅的視覺享受,還能激發美好的聯想。我們可以從以下幾個方面來控制圖片的風格:
● 類型:如位圖、插畫或形狀;
● 視角:如平視、仰視或俯視;
● 背景:如簡約、復雜或純色;
● 呈現區域:如堆積、局部或特寫;
● 構圖:如中心、水平線、對稱或對角線。
此外,還有很多其他抽象的方式來調整圖片,雖然這些方法不是絕對的,但我們可以通過多角度的嘗試,力求讓每一張圖片都達到最佳的視覺效果。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
23.在中性色中融入色相
在上一期的內容中,我們探討了如何設置中性色。當飽和度(S值)為0時,通過調整亮度(B值)4到5個等級,可以很好地表達信息的層次結構。這種方法雖然有助于保證設計不出錯,并能滿足最基本的需求,但在追求更高層次創意的設計項目中,可能會顯得有些單一。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
在更為成熟和全面的產品中,設計師們往往不會僅僅依靠純灰色作為唯一的中性色調。通常會在基礎的灰色調中加入一些微妙的色相變化。這樣做不僅可以讓整體視覺效果更加豐富,而且還能有效避免畫面因過于依賴灰色而顯得僵硬或缺乏活力。
常用的方法是在中性色中融入少量藍色調。藍色能夠傳遞出一種平靜、穩重的感覺,給界面帶來柔和而不突兀的變化,同時保持良好的清晰度。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
需要注意的是,在加入新色相時,我們的目標是創造顏色間的細微差別,幾乎達到難以察覺的程度,而不是讓這些差異成為用戶注意力的焦點,這樣才更有利于提升界面的整體質感。因此,對于較淺的顏色來說,所添加的色相強度應當控制得很低,反之,顏色越深則添加的色相越多,類似下面的這種曲線:
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
24.第三方圖標風格應保持一致
大多數應用程序都支持通過第三方平臺登錄,這種方式可以顯著降低用戶在登錄注冊時所需花費的時間成本。這種便捷的登錄方式一般在登錄頁面的底部提供多個(如微信、QQ、微博等)圖標入口。然而,很多設計師會忽略一個細節,就是直接將第三方平臺提供的官方圖標,簡單地調整大小使之統一,然后整齊排列在一起,并沒有進一步針對整體視覺效果進行專門的設計優化。
對于追求高品質用戶體驗的產品來說,任何不起眼的小細節都不應該被忽略。在處理第三方圖標時,應以自己產品的圖標風格為基礎,對所使用的第三方登錄圖標進行重新設計或適當調整。這不僅能夠確保整個界面風格的一致性,提升美觀度,還能增強品牌識別度,讓用戶在整個使用過程中感受到更加連貫且專業的體驗。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
25.可視化密碼比輸入兩次更直觀
為了提升您的使用體驗,并確保密碼的安全性,可以讓用戶在輸入密碼時自由選擇顯示或隱藏密碼內容。這種方式替代了傳統的雙次輸入驗證方式,尤其有助于創建有效的密碼。用戶可以直接看到自己設置的密碼是否滿足安全標準,同時也減少了因重復輸入而造成的錯誤。
另外,系統應當明確地展示密碼的具體要求,并為用戶提供即時反饋,幫助他們了解如何構建更安全的密碼。例如,在用戶開始輸入密碼時,界面下方可以實時更新密碼強度(如弱、中等、強)及已滿足的安全條件(比如長度、包含數字/符號/大小寫字母等)。這樣做不僅能讓用戶更好地理解什么是好的密碼實踐,還能激勵他們遵循這些建議,從而提高賬號的整體安全性。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
26.使用合適的表單錄入控件
在設計表單時,選擇合適的輸入控件可以幫助用戶更好地理解每個字段需要填寫的信息量。
  •  
    能通過選擇來完成的操作就不要讓用戶手動輸入,這樣不僅方便了用戶操作,也減少了錯誤的發生。
  •  
    對于那些內容較短的輸入項,比如姓名或電話號碼,可使用單行輸入框,前提是確保讓所有輸入的內容都能清晰可見。
  •  
    像評論、反饋或這種可能包含較多文字的地方,應使用多行文本框。這樣用戶能更輕松地查看和編輯文本內容。同時,我們還可以通過一些視覺提示,例如滾動瀏覽、輸入框右下角的高度調整等,這樣更便于用戶操作。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
27.提供解決方案助力轉化
在UI設計過程中,當用戶嘗試進行某項操作時,因未滿足特定條件或出現操作失誤而無法繼續,這可能會對轉化率產生負面影響。為了改善這種情況,在設計時可以采取更加貼心的做法:明確告知用戶為何無法進入下一步,并提供具體的解決建議。這樣做對于提升轉化率非常有幫助。
比如,在用戶打算用賬戶余額購買服務的情況下,如果僅僅提示“余額不足”,用戶可能會感到困惑,甚至需要多次嘗試不同的路徑來完成充值和購買過程。一個更佳的解決方案是直接向用戶展示當前賬戶余額,并提供快速充值鏈接。這樣一來,用戶可以直接通過這個鏈接輕松完成充值,隨后順利購買所需服務。這樣的設計不僅簡化了操作流程,也大大提升了用戶體驗的流暢度。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
28.標簽欄的高級感
大多數標簽欄設計都傾向于簡潔風格,主要通過選中和未選中的狀態來區分不同的選項。狀態的變化依靠文字顏色的變換或在選中的標簽下方添加一個小橫條來實現。盡管這樣的設計看起來簡單,但要想讓它脫穎而出卻并不容易。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
很多產品從其品牌的獨特性中汲取靈感,利用品牌作為用戶熟悉且喜愛的形象作為設計的基礎,這樣做不僅能夠建立一種視覺上的連貫性,讓用戶感受到內外一致的美好體驗,同時也能加深他們對品牌形象的記憶。除此之外,加入一些有趣味性的圖案也是一個不錯的選擇,它們能以獨特的方式吸引用戶的注意力,為用戶提供更加愉悅的視覺感受。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
29.合理的規范輸入格式
在表單設計過程中,雖然大多數輸入項可以采用通用的處理方式,無需特別干預,但一些特殊類型的表單項,設定合理的格式約束顯得尤為重要。這樣做不僅有助于系統更準確地收集數據,還能有效減少用戶填寫錯誤的可能性,提升整體數據質量。
對于某些特定信息如地址、手機號碼以及銀行卡號等,可通過技術手段自動為這些長串文字自動添加分隔符,如空格或短橫線,這樣做能夠使信息更加直觀易讀,便于用戶檢查自己所填內容是否正確無誤;同時,也使得后續的數據處理工作變得更加簡單高效。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
30.頁面加載中,提前展示布局
在眾多產品中,用戶界面的數據或內容在完全加載之前通常僅顯示空白頁面。這種處理方式可能導致用戶困惑,因為他們無法確定當前狀態是正在加載、已加載完畢但無內容可展示,還是遇到了錯誤。
實際上,用戶界面的布局往往是相對固定的。因此,在實際內容加載完成前,提前向用戶展示界面的基本結構是一種更為友好的設計策略。因為在等待數據加載的過程中,用戶能夠預覽即將呈現的內容框架,從而減少了不確定性帶來的焦慮感。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
此外,這一做法符合人機交互設計中的一個重要原則——系統狀態可見性。根據該原則,產品應當清晰地告知用戶當前發生了什么,并提供足夠的反饋信息以幫助其理解系統的現狀及后續步驟。通過預先展示UI布局,應用程序不僅表明了正在處理請求的狀態,還為用戶構建了一個對未來操作環境的心理預期模型,進而提升了用戶體驗的整體滿意度與效率。
 
 
31.表單頁內容過長,適當進行分頁
在對表單內容進行了精簡處理后,依然顯得很長,應該避免一次性向用戶展示所有信息。過長的表單不僅會增加用戶的填寫時間,還可能引發用戶的困惑與不滿情緒,最終導致放棄填寫。為此,建議根據邏輯關系及屬性將表單項合理地分配到多個頁面中,且清晰展示整個流程進度情況。這樣可以使用戶感受到填寫過程更加簡便流暢,同時也能幫助他們更好地理解整個表單結構,從而專注于當前的任務。
值得注意的是,在采用分頁策略時,需謹慎平衡分頁的數量與步驟的復雜度。過度細分會無謂地增加操作環節,反而可能引起用戶的反感,進而產生新的問題。因此,在規劃分頁方案時,應當綜合考慮簡潔性和易用性原則,確保最終方案既能有效簡化任務又能保持良好的用戶體驗。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
32.有時候,背景色比分割線更顯高級感
在過去,設計師們常常使用線條來清晰地劃分不同組件之間的界限。然而,在當今流行的扁平化設計理念中,這樣的做法有時會讓頁面顯得有些擁擠,并且缺乏層次感。一個非常有效的替代方案是為相鄰元素選擇僅有細微差異的背景色來進行區分。這種方式不僅能保持界面的整體美觀與簡潔,還能夠讓用戶更加自然流暢地識別出不同的信息區域。這樣在確保了內容的可讀性和易用性的同時,也能為用戶提供更加舒適的視覺體驗。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
33.適當加大觸控熱區
你是否有過這樣的體驗:在使用某個應用程序或網站時,對著界面上的按鈕一頓亂點,卻發現要么完全沒有反應,要么系統反饋特別慢。你可能會懷疑是手機卡頓了或者網絡連接不穩定,感覺非常糟糕。其實,很多時候這種情況并不是因為設備性能差或網絡問題,而是用戶界面設計上存在一些小缺陷。
設計師們都知道,在進行UI設計時面臨著一個挑戰:如何在美觀性和實用性之間找到最佳平衡點?特別是對于像按鈕、超鏈接以及單選/復選框這樣的交互元素來說,它們的實際顯示大小往往很難達到人類手指接觸區域的理想尺寸。如果這些控件設計得太小,用戶就很難準確點擊到目標位置,導致操作效率降低甚至失敗。
從視覺效果考慮,當某些功能性組件需要保持較小外觀時,我們可以確保可觸發區域足夠大。這樣即使用戶視線不那么集中,也能輕松完成任務,避免因誤觸或其他原因造成的不便。值得注意的是,無論該元素本身看起來有多小,它所關聯的觸控熱區都不應低于標準值。例如,在iOS平臺上,推薦的最小可點擊區域大小為44x44 pt;而Android操作系統中,則建議至少保持48x48 pt。這樣保持了界面的美觀性,還能大大提升用戶的操作體驗。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
34.為圖片添加色彩層營造氛圍感
在圖片上添加色彩層或將其轉換為單一色調,可以創造出類似黑白照片的效果,這樣能顯著增強圖像中物體或人物的形態感。通過簡化色彩,觀眾的注意力更容易集中在圖像的核心內容上,從而提升了視覺主體的表現力。
此外,選擇不同的單色調不僅能突出主題,還能有效營造特定的情感氛圍。比如,藍色調可能會給人帶來一種寧靜、平和的感覺;而暖色調如紅色或橙色,則可能激發溫暖、活力甚至是緊張的情緒。通過精心挑選和運用色彩,我們可以極大地豐富視覺語言,提高圖像傳遞信息的能力。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
35.使用前端驗證,提升信息的有效性
前端驗證是一種在用戶輸入信息時即時檢查數據有效性的方法,無需將數據發送到服務器。這項技術基于預先設定的規則,在用戶離開輸入框時自動啟動,能夠快速檢測諸如格式、長度或類型是否正確等問題。這樣做的好處在于,它能夠在用戶完成整個表單之前就發現并指出潛在錯誤,從而提升了用戶體驗和數據準確性,避免了等到最后提交才發現問題所帶來的不便。
在設置前端驗證時,請記得不要過早開始校驗過程,以免造成持續不斷的錯誤提示,給用戶帶來困擾。最佳實踐是在用戶完全填寫完當前項之后再進行驗證。這樣做既能保證及時給出反饋,又能避免因頻繁出現提示而打斷用戶的操作流程,讓整個體驗更加順暢愉快。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
結語
創造既美觀又高效且易于使用的UI界面確實需要投入不少時間和精力,還可能要經歷多次的迭代與改進。不過,正是通過這一系列細致入微的調整過程,我們才能打磨出一款讓客戶、用戶以及我們自己都感到滿意的優秀作品。



作者:大漠飛鷹CYSJ
鏈接:https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

 

 

 

日歷

鏈接

個人資料

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

存檔

主站蜘蛛池模板: 爱爱视频在线播放 | 亚洲欧美另类色图 | 亚洲国产精品v在线播放 | 午夜 dy888理论久久 | 无毒不卡在线观看 | 国产成人在线播放视频 | 国产精品观看在线亚洲人成网 | 国产亚洲精品久久久久久久久激情 | 欧美亚洲人成网站在线观看刚交 | 亚洲黄色高清视频 | 亚洲欧美日韩在线一区 | 啪啪网站在线观看 | 黄网免费| 亚洲欧美日本国产综合在线 | 高清国产精品久久 | 国产亚洲精品日韩综合网 | 久久久久久久97 | 日韩欧美一区二区三区不卡在线 | 欧美黄视频网站 | 精品亚洲一区二区三区在线播放 | 国产高清免费不卡观看 | 国模沟沟一区二区三区 | 99青草青草久热精品视频 | 中文国产成人精品久久水 | 成人啪精品视频免费网站 | 免费黄色在线视频观看 | 曰曰鲁夜夜免费播放视频 | 午夜精品一区二区三区免费视频 | 中国黄色片网站 | 欧美日韩亚洲精品一区二区 | 青青草99久久精品国产综合 | 精品国产一区二区三区四 | 日韩欧美一区二区三区在线播放 | 成年免费大片黄在线观看岛国 | 国产精品偷拍 | 日本限制级在线 | 国产毛片久久久久久国产毛片 | 国产三区二区 | 97国产成人精品免费视频 | 午夜视频在线观看国产www | 国产精品揄拍100视频最近 |