久久分类免费视频_亚洲Av不卡在线_97超碰在线免费观看_人人狠狠综合久久88亚洲 一本久道综合久久精品_四虎成人精品在永久免费_亚洲精品有码在线观看_国产在线视频导航

首頁

作品總是沒細節(jié)怎么辦?這3招教你給設計增加形式感!

清陽 設計資源

一、異形容器

通過制造視覺元素的差異—— 讓 “不一樣” 的元素從周圍環(huán)境中凸顯出來,自然成為視覺焦點。

引導用戶注意力優(yōu)先落在關鍵信息或操作點上,這就是對比原則,我們可以通過形狀的對比讓卡片突出,增加視覺表現(xiàn)力:

image.png

在一些視覺頁面中,也可以用異形容器增加視覺表現(xiàn)力,可以結合主題設計容器,例如下方就是一個以紙質火車票造型作為卡片背景的例子:

image.png

也可以結合內(nèi)容設計容器,例如頁面的內(nèi)容是感謝用戶,就可以從感謝信或者信紙的角度設計容器:

image.png

二、背景

在設計中,想要為卡片或頁面增加形式感,豐富背景是直接且高效的方式,可以從顏色、底紋、裝飾元素這三個核心維度展開,讓背景不再單調(diào),為整體設計加分:

1. 優(yōu)化顏色增加背景的形式感

可將背景的無彩色(如黑白、灰度色)替換為帶有明確色相的有彩色(如柔和的薄荷綠、清新的天藍、低飽和的珊瑚橙等)

借助 “無彩色與有彩色” 的屬性差異,讓卡片與周圍的淺灰背景或普通卡片形成直觀色彩對比,快速從整體布局中跳脫出來:

image.png

也可以將卡片的單一純色設計,升級為多種顏色的漸變效果 —— 通過這種漸變色,讓卡片與周圍的背景、其他組件形成鮮明對比

從而快速從整體布局中凸顯出來,成為視覺焦點,快速抓住用戶注意力:

image.png

2. 給背景增加底紋

在背景中增加底紋(如低透明度的幾何紋理、輕微的肌理質感等),不僅可以強化視覺層次,還可以向用戶傳遞頁面的風格氛圍,增強記憶點。

例如科技類產(chǎn)品用細線條網(wǎng)格底紋增強科技感,古風類產(chǎn)品可以用紙張等營造復古的氛圍感:

image.png

image.png

image.png

下面列舉了一些常見的底紋元素,可搭配圖層的混合模式、不透明度使用:

image.png

3. 在背景上增加裝飾

可以根據(jù)頁面/活動添加合適的裝飾元素,裝飾可以是圖形、文字等與頁面相關的元素。

裝飾元素主要是為了平衡界面視覺,優(yōu)化整體協(xié)調(diào)性:當界面存在 “大面積空白” 或 “元素分布不均” 時,裝飾元素可起到 “視覺平衡” 作用。

image.png

image.png

image.png

三、文字

這里的文字不僅是卡片標題,也可以是活動標題或者頁簽導航,那么文字的設計感可以怎么加呢?我們可以從圖形裝飾、線條裝飾、文字裝飾、背景裝飾四個方面給文字添加設計感:

1. 圖形裝飾

將圖形放在標題空白處增加標題的設計感:

image.png

也可以用來填補標題的空白區(qū)域,平衡視覺:

image.png

用圖形代替文字的某一個筆畫,傳遞產(chǎn)品的氛圍:

image.png

2. 線條裝飾

用簡單的線條突出標題,輔助信息分層,突出重點信息,降低認知成本:

image.png

3. 文字裝飾

用風格獨特的字體寫一句英文作為標題的裝飾:

image.png

另一種方法是將文字放大起到裝飾作用:

image.png

4. 背景裝飾

在標題后面增加背景,不僅可以保證標題的可讀性,還能讓標題抓住用戶的眼球,進一步強化視覺表現(xiàn)力:

image.png

總結

盡管上面的案例分別展示了不同的提升形式感的方法,但在實際設計中,不必局限于單一形式。

將多種手法靈活組合(比如為卡片搭配有彩色背景的同時,疊加輕量底紋并點綴細節(jié)裝飾),更能放大視覺表現(xiàn)力,讓界面擺脫單調(diào)感,呈現(xiàn)出更豐富的層次與質感。

如果這篇內(nèi)容對你有啟發(fā),或是你有其他提升形式感的實用思路,歡迎在評論區(qū)分享交流,一起探索更多設計可能性~

轉載:優(yōu)設

蘭亭妙微(藍藍設計)www.aknz.cn 是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制用戶體驗設計、交互設計UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。

 

image.png

蘭亭妙微UI設計公司 關于后臺管理系統(tǒng)首頁的設計思考

麗潔 系統(tǒng)UI設計文章及欣賞

 

一般用戶在登錄后臺管理系統(tǒng)后,后臺首頁就成為了用戶與產(chǎn)品交互的第一個頁面,這某種程度上也凸顯了這一頁面的重要性。那么,后臺管理系統(tǒng)的首頁設計可以遵循哪些策略?本文作者結合實戰(zhàn)項目發(fā)表了他的想法,一起來看看吧。

LJ5qo7k2IYPEKbcXCKMp.jpg

很久沒有更新文章了,一方面文章選題困難,公眾號的閱讀量真是有點慘不忍睹,寫作的動力有所下降。另一方面工作確實比較忙,時間精力有限,最近參加了多個工作項目一直在加班。

今天總結下項目過程中,關于后臺管理系統(tǒng)首頁設計引發(fā)的一些思考。

主要的內(nèi)容包括:

  1. 后臺首頁的作用;
  2. 首頁的設計方向;
  3. 首頁內(nèi)容的思考。

一、后臺首頁的作用

后臺首頁是用戶登錄后,與產(chǎn)品交互的第一個頁面,信息內(nèi)容非常重要,作用也非常明顯。一方面可以幫助用戶宏觀了解系統(tǒng)的整體運行狀態(tài),洞察業(yè)務問題。另一方面可以幫助用戶快速處理業(yè)務問題,不需要到專門的功能頁面操作,縮短用戶的操作路徑。

后臺首頁需要依托整個產(chǎn)品的功能體系,根據(jù)用戶角色的職能、權限、業(yè)務范圍,提取關鍵的用戶關心的業(yè)務功能點搭建頁面內(nèi)容。所以一般是在業(yè)務功能完成之后再進行首頁設計。這就要求產(chǎn)品經(jīng)理能夠從全局視角理解用戶和場景,才能做出有效的設計方案。

另外首頁不屬于具體的業(yè)務領域,所以一般不會安排固定的產(chǎn)品經(jīng)理,而是由產(chǎn)品經(jīng)理兼任。如果產(chǎn)品設計沒有整體規(guī)劃,首頁就容易被忽略,成為「三不管」地帶。

6wIxdNBsEU5XnUXQKU7e.png

二、首頁設計的方向

根據(jù)以往的設計經(jīng)驗,我總結了以下四點:

Bn60wUR8Ov1UNcQ55yt9.png

1. 內(nèi)容與用戶角色

首頁設計要求產(chǎn)品經(jīng)理對用戶角色的分類、業(yè)務職能有比較深入的了解,否則產(chǎn)品設計就可能變成內(nèi)容堆砌。

通常后臺系統(tǒng)需要面向管理層和執(zhí)行層兩類用戶,他們對于信息需求存在比較大的差異。管理層更關注宏觀層面的統(tǒng)計信息,方便了解業(yè)務動態(tài),從而制定工作決策等,所以各類可視化圖表就成為首頁重要的內(nèi)容組成。

對于執(zhí)行層用戶,主要是完成具體的工作任務,所以更加關注明細數(shù)據(jù)。除此之外,適當?shù)卦黾右恍┙y(tǒng)計數(shù)據(jù),可以更全面了解系統(tǒng)狀態(tài),也便于對上匯報,減少人工統(tǒng)計的工作量。

B 端產(chǎn)品了解用戶和場景并不容易,如果只靠“猜測”做設計,就會發(fā)現(xiàn)首頁設計有很多種可能,怎么做似乎都對,怎么做似乎都不對。而且參與的人越多,想法也會越多。

所以在項目中,需要盡可能地收集用戶場景信息加以分析完成設計,即使存在一部分“猜測”信息,也需要能夠自圓其說,才能更好的推進產(chǎn)品設計落地。

2. 場景/主題化

對于小的業(yè)務系統(tǒng),單獨的一個頁面就可以涵蓋所有的業(yè)務信息,內(nèi)容也會比較清晰簡單。

對于比較大的業(yè)務系統(tǒng),首頁包含的消息會比較多,例如阿里云、騰訊云等產(chǎn)品,一個頁面內(nèi)容無法承載所有的信息。因此需要根據(jù)場景/主題拆分首頁內(nèi)容,便于用戶有目標地快速查看信息。比如阿里云采用的是資源管理、安全管理、成本管理等主題去劃分首頁內(nèi)容。

E25h6F1hYRIde2bsD6PY.png

3. 實用性

1)串聯(lián)內(nèi)容,縮短路徑

某些場景下,首頁要滿足用戶快速處理業(yè)務工作的需求,例如待辦事項,審批操作等,通過明細列表的展示,結合抽屜等詳情信息展示,用戶可以在首頁直接處理工作任務,無需進入到功能頁面。

「常用功能」也是首頁的常見組件,類似操作系統(tǒng)桌面的快捷方式一樣。可以將一些二級甚至三級功能作為常用功能放在首頁中,用戶不需要通過菜單逐級點擊,即可進入功能頁面,對縮短用戶操作路徑也有很大幫助。

2)高頻常用功能信息聚合

首頁的價值在于幫助用戶簡單、高效的認知系統(tǒng),是高頻常用功能的信息聚合。因此需要盡量減少花哨、不實用、看似高大上的功能,或者改變展示形式,保證重要信息的優(yōu)先展示。

有些 B 端產(chǎn)品的門檻比較高,為了降低認知成本,于是有人希望在首頁中增加系統(tǒng)介紹、系統(tǒng)架構圖的形式來展示產(chǎn)品的功能流程,在產(chǎn)品演示是可以更好的讓用戶理解產(chǎn)品功能。

這些本來應該是在 PPT 中展示的信息,卻要放到首頁中展示??此瓶犰诺囊粡垐D,實際上在應用階段對用戶的工作沒有任何幫助。因為用戶根本不關心你的系統(tǒng)架構是什么,需要的是產(chǎn)品幫助他解決工作中的問題,帶來的效率提升。

即使用戶需要了解這些信息,也不是每天打開首頁就要一眼看到,可以采用其他的呈現(xiàn)方式。比如用戶引導,或者與業(yè)務信息關聯(lián),既可以呈現(xiàn)出業(yè)務流程,也可以展示業(yè)務信息,又或者首頁增加入口、引導在幫助中心查看。

4. 定制化

B 端產(chǎn)品業(yè)務功能是面向用戶角色的,同一角色的用戶具有相同的工作任務。但是首頁則有所不同,同一類角色的不同用戶,關注點也不完全相同。尤其是業(yè)務系統(tǒng)內(nèi)容較多時,首頁內(nèi)容可定制就成為了滿足不同用戶信息需求的方式。

當然系統(tǒng)的定制化并不是讓用戶從零定制,而是在系統(tǒng)初始內(nèi)容基礎上,重新組織頁面內(nèi)容、調(diào)整頁面布局等。否則定制化反而會帶給用戶更差的體驗。

三、首頁內(nèi)容應該追求簡潔還是豐富呢?

在項目設計中,就碰到了這個問題。有同事認為首頁應該簡單點,避免過多的信息量增加用戶的學習成本。

當然這個問題需要根據(jù)產(chǎn)品定位具體分析。不過總的來說,我個人認為首頁應該豐富一些。

首頁是信息聚合頁面,天然就會有較多的信息內(nèi)容,用戶需要通過信息傳遞了解系統(tǒng)的狀態(tài)和變化,人為的過濾掉內(nèi)容后會影響信息的全面性。

其次用戶有信息選擇權,通過一定時間的摸索,可以形成自己的信息查看軌跡,或者個性化定制首頁內(nèi)容過濾掉工作中冗余的信息。

而且B 端產(chǎn)品經(jīng)過多年的發(fā)展,單從布局和表現(xiàn)形式上看,首頁已經(jīng)有比較成熟的設計模式了,大多數(shù)企業(yè)用戶也形成了統(tǒng)一的認知和習慣??ㄆL格是首頁最常見的展現(xiàn)形式,卡片可以讓頁面分割更加清晰,方便信息讀取,有助于弱化信息量帶來的復雜感。即使不采用卡片分割, 可以通過間距、標題等引導用戶視線,劃分頁面內(nèi)容。

oh3DAXHb3DXZA4UYDqUl.png

四、總結

簡單總結下:

  1. 首頁考慮的設計因素比較多,每種用戶角色可能會有不同的需求,需要針對性的設計,而業(yè)務功能的用戶角色更加明確;
  2. 首頁設計需要對系統(tǒng)有全面了解,業(yè)務功能則比較聚焦;
  3. 首頁是系統(tǒng)第一個頁面,會受到更高的關注度,往往設計分歧也會比較大;產(chǎn)品設計需要做深入的分析,故事性要求也會更高;否則被噴和被 Pass的可能性會非常大;
  4. 首頁設計的內(nèi)容需要注重實用性,避免各種信息的無效堆砌。

轉載:人人都是產(chǎn)品經(jīng)理

8ad61732265770.png

蘭亭妙微(藍藍設計)www.aknz.cn 是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計交互設計UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。

e5891719196478.jpg

蘭亭妙微——從“低幼感知”到“輕松陪伴”:一次小游戲首頁的品牌與體驗升級復盤

麗潔 移動端UI設計文章及欣賞

vivo小游戲的改版揭示了輕量化產(chǎn)品的設計本質——從點擊量到用戶時長的指標躍遷。本文深度拆解其首頁分發(fā)邏輯重構與去低幼化視覺升級,揭秘如何通過動態(tài)專題矩陣、情感化設計和品牌色系統(tǒng),同時實現(xiàn)商業(yè)價值提升與品牌心智進化。

b3b22d8a-0514-11ef-bcdb-00163e142b65.png

小游戲業(yè)務的核心特點是“輕量化啟動,依賴時長變現(xiàn)”。

在產(chǎn)品形態(tài)方面,“點擊即玩”是重要特征,其試錯成本極低,用戶可快速、反復嘗試多款游戲,使用時長比點擊更能代表深入程度。在營收方面,對于依賴廣告變現(xiàn)的游戲,時長直接影響廣告曝光次數(shù);對于內(nèi)購游戲,時長則意味著付費窗口期的延長。“停留”比“點擊”更能創(chuàng)造商業(yè)價值。

依據(jù)以上兩個原因,小游戲業(yè)務成功的關鍵指標并非傳統(tǒng)的分發(fā)效率(點擊量),而是用戶游戲總時長。這是小游戲設計改版的第一個核心目標。

<圖:業(yè)務目標>

除此之外,在存量競爭時代,設計不僅僅是“做得好用”,更需要“做得準確”——準確理解業(yè)務,準確洞察用戶,準確傳遞品牌心智。

“小游戲”,在很多用戶的印象中,往往是“休閑、輕松、可愛,甚至樣式上帶點低幼感”的存在,這造就了其固有的用戶心智。

實際上,【vivo小游戲】希望服務的用戶是豐富、全面的,所以矛盾便浮出水面——亟待扭轉“低幼感知”,這就是小游戲設計改版的第二個主要目標。

在以上兩個背景之下,本次改版目標如下:

目標一(來自業(yè)務目標):提升游戲時長,讓分發(fā)更精準,幫助用戶“玩進去,愿意留下”。

目標二(來自用戶心智):去除低幼感知,重塑“年輕、放松、品質”的產(chǎn)品形象。

<圖:本次設計改版的兩個目標>

這不僅僅是一次界面優(yōu)化,更是一次以設計驅動產(chǎn)品品牌升級的系統(tǒng)性設計。下文將從三個維度,分享我們的設計推導與落地過程。

第一部分:提時長——優(yōu)化分發(fā)路徑,從“廣撒網(wǎng)”到“精準陪伴”

重構首頁分發(fā)邏輯,使其服務于“提升時長”的目標。對首頁三大核心模塊——“用戶愛玩”、“平臺推薦”、“隨機游戲”——進行了數(shù)據(jù)洞察和體驗重塑。

<圖:首頁改版的三個重要模塊>

1. 聚焦核心:強化“用戶愛玩”的心智,而非盲目曝光

數(shù)據(jù)顯示,“最近愛玩”模塊貢獻了極高的總游戲時長。這證明,用戶主動沉淀的偏好列表,是游戲啟動的最強驅動力。

新的洞察隨之而來:絕大多數(shù)的用戶,其“最近愛玩”的游戲只有1-2款。舊版首頁將4款游戲“平鋪”外顯,反而稀釋了用戶的注意力,導致分發(fā)的目標不清晰。

針對這一現(xiàn)象,我們的A/B Test結論是:滿足需求,比增加曝光更重要。新版設計強化了“用戶愛玩”的模塊心智,使其成為用戶返回時的“第一眼”核心,讓用戶能最快回到那個“TA真正想玩的游戲”,而不是在多個似是而非的選擇中猶豫,從而直接鎖定并延長核心游戲時長。

<圖:左圖為老方案,右圖為新方案>

2. 給出理由:重構“平臺推薦”,讓選擇變得容易

“平臺推薦”是發(fā)現(xiàn)新游戲的主陣地。我們放棄了“一招鮮”的模式,轉而構建了一套專題矩陣,針對不同游戲和用戶意圖,設計差異化的推薦理由:小編推薦專題:從“系統(tǒng)”到“有溫度的個體”建立了“安利官”角色,把真實的小編推向用戶。用真人頭像、親切口吻和官方認證,打造“有溫度、有信任感”的真人推薦。情感化與專業(yè)性的結合,極大地拉近了與用戶的距離。

<圖:小編推薦>

<圖:小編推薦>

場景化專題:從“游戲是什么”到“我此刻需要什么”將游戲分發(fā)融入用戶生活場景。例如,“早上好:提神醒腦”、“下午好:堅強摸魚人”、“晚上好:放松一下”。通過時間、情緒、狀態(tài)的匹配,讓游戲推薦更具說服力和即時價值。

<圖:場景化推薦>

高品質專題:從“文字說”到“視覺證明”針對精品或內(nèi)購游戲,我們用更大尺寸的卡片、更具沉浸感的圖文或視頻預覽,來直觀呈現(xiàn)游戲的“品質感”,將“高質量”這一抽象概念具體化。

<圖:左圖為老方案,右圖為新方案>

玩法專題:用IP強化“類別識別”在“男生愛玩”、“掛機輕松玩”等玩法標簽下,將專題內(nèi)最具代表性的頭部游戲IP(如“太空行動”、“一波超人”)進行視覺放大,強化用戶對專題游戲類型的“一眼識別”。

<圖:玩法專題>

魅力信息前置:從“默默無名”到“熱度可見”將“XX萬人在玩”這類強吸引力信息,從傳統(tǒng)的文字區(qū)剝離,設計為高識別度的半透明標簽,與游戲Icon強綁定。通過調(diào)整色彩、字重,使其在不遮擋Icon主視覺的同時,成為輔助用戶決策的“魅力因子”,有效提升了點擊意愿。

3. 留有余地:優(yōu)化“隨機游戲”,提供“多一次機會”

我們注意到,有相當一部分用戶是在首頁“逛了好幾屏”后仍未找到目標,此時我們猜想“隨機一下”可能是他們留下的最后機會。

強化了其“提供一次驚喜、一種可能性”的心智,為探索型用戶保留了一個“輕量級出口”,這背后是對用戶分層和場景的細致體察。

<圖:隨機玩>

設計思考:分發(fā)設計的精髓在于“對癥下藥”。我們不再追求統(tǒng)一的曝光策略,而是將首頁視為一個動態(tài)的、有層次的決策場。“用戶愛玩”是確定性滿足,“平臺推薦”是引導性探索,“隨機游戲”是可能性兜底。

設計的價值在于,為每一種用戶路徑,都鋪就了最合適的體驗軌道,最終合力指向“停留與探索”的核心目標。

第二部分:去低幼——重塑視覺語言,從“繽紛低幼”到“放松高級”

“去低幼化”不僅是風格的轉換,更是品牌心智的重塑。為此,我們建立了一套完整的研究與執(zhí)行方法。

1. 拆解“低幼感”:從感性描述到理性標準

“低幼”是一個感性評價。為了找到解法,我們首先要將其“可視化”。

對比了市面上的兒童教育產(chǎn)品,并結合對自身舊版設計的審視,提煉出三個維度的“低幼”視覺特征:

  1. 色彩:高明度、高純度色彩被大面積、平均化地使用,色相過多且對比強烈,形成“繽紛喧鬧”的觀感。
  2. 圖形:表達過于具象,細節(jié)復雜,視覺元素堆砌,呈現(xiàn)出“卡通卡片”式的質感。
  3. IP形象:IP設計(如吉祥物)偏向可愛、低齡化,缺少成人世界的“人設”感,且使用頻率過高、場景過泛。

這三點,共同構成了我們需要打破的舊有特征。

<圖:關于低幼感知來源的研究>

2. 定義新氣質:從“喧囂”到“輕松、年輕、快捷”

有了要規(guī)避的視覺特征,同時,要確立新方向。結合產(chǎn)品特性和目標用戶,我們定義了vivo秒玩小游戲應有的產(chǎn)品調(diào)性:

  • 年輕有趣:是年輕人愛用的,能帶來驚喜感的。
  • 輕松休閑:能隨時玩、不用學,是“放松”的載體。
  • 快捷高效:點擊即玩,響應迅速。

<圖:從情緒板到色彩定義>

3. 系統(tǒng)化升級:從色彩到體驗的全鏈路煥新

色彩體系重構

定義品牌色:我們摒棄了“大雜燴”式的色彩,定義了“活力黃”與“輕松綠”作為品牌主色,分別承載“生命力、有趣”與“放松、自然”的情緒。并嚴格設定了60%背景色、30%白色卡片、10%品牌色的色彩使用比例,建立清晰的視覺層次。

<圖:品牌色>

分層處理原則:

  • 氛圍層(背景/裝飾):采用“低純度/高透明/大面積”的用色原則,大量使用漸變、暈染,弱化色彩視覺重量,只為襯托氛圍,絕不搶奪信息。
  • 內(nèi)容層(信息主體):用大面積的白色卡片清晰呈現(xiàn)游戲Icon,保證內(nèi)容的“高還原、高識別、高點擊感”。
  • 操作層(高優(yōu)信息/行動點):在小面積、關鍵的操作區(qū)域(如按鈕、標簽)使用“高飽和/高明度”的品牌色,實現(xiàn)“小面積、高體感”的提亮效果,精準引導用戶操作。

<圖:分層處理原則>

注入“情緒價值”:

  • 從功能到情感“放松感”融入:在“最近愛玩”等模塊,引入海島沙灘、漂浮云朵等動態(tài)視覺元素,將“玩游戲”包裝成一種“放松”的體驗,給予用戶情感上的暗示與安撫。
  • “趣味、驚喜感”傳達:在“隨機游戲”模塊,利用骰子旋轉動畫強化“隨機、有趣”的心智;在品宣位置,用海量游戲圖標交疊微動效,直觀傳遞“海量游戲、應有盡有”的豐富感。

<圖:“海島”微動效>

<圖:隨機玩>

傳承品牌基因:我們沒有割裂歷史,而是巧妙延續(xù)了品牌核心符號“閃電”。

新版設計中,“閃電”圖形以“斜切線”的形式,融入魅力信息標簽、專題卡片頭圖等細節(jié),在去低幼的同時,保留了用戶對品牌的核心認知,完成了視覺語言的平滑演進。

<圖:老版本頁面示例>

<圖:新版本頁面示例>

設計思考:去低幼化不等于“高冷化”或“同質化”。我們的解法是建立系統(tǒng)性的設計語言。它不是對某個元素的修修補補,而是從底層色彩邏輯、視覺層次、情感傳達、品牌符號多個維度進行的一體化重構,最終在視覺上完成了從“兒童樂園”到“年輕人休閑客廳”的轉變。

總結:不止于“改版”的設計價值

回顧整個項目,這不僅僅是一次界面優(yōu)化。我們將其視作一個通過設計系統(tǒng)性地解決商業(yè)和品牌問題的范本。復盤整個過程,我們有幾點深刻的心得,這幾條心得從我們剛剛入行到目前都適用,感受愈發(fā)深刻:

1、理解產(chǎn)品是在做什么:設計必須服務于商業(yè)本質。深刻理解“小游戲靠時長盈利”這一核心,才讓我們敢于將“提升分發(fā)效率”的慣性思維,轉向“提升用戶停留與沉浸”的差異路徑,這是所有設計決策的“北極星”。

2、抓住重點:資源永遠是有限的。通過數(shù)據(jù)分析,我們精準地識別出“最近愛玩”模塊是提升大盤時長的關鍵。集中優(yōu)勢資源,在關鍵模塊上做深做透,才能帶來數(shù)據(jù)層面的最大回報。

3、以用戶需求為導向:用戶的核心需求是“找到我想玩/可能愛玩的游戲”,而不是“看到更多游戲”。設計要做的,是提供“理由”和“路徑”,幫助用戶高效決策,而不是制造“信息過載”。對“最近愛玩”模塊的聚焦,正是這一思維的體現(xiàn)。

4、任何時候都不要忘記有趣。在追求“去低幼化”的過程中,我們并沒有走向另一個極端——“嚴肅與無趣”。相反,我們將“放松”、“驚喜”、“有趣”這些屬于游戲產(chǎn)品的核心情感價值,通過動態(tài)效果、場景化文案、情感化設計重新注入體驗。

我們交付的不僅是一個“更好看、更好用”的首頁,更是一個“更清晰、更高級、更具吸引力”的vivo小游戲品牌。

注:插圖中全部實例均為設計稿,非線上截圖。游戲icon、名稱、在玩人數(shù)等基礎信息非線上信息。

轉載:人人都是產(chǎn)品經(jīng)理

8ad61732265770.png

蘭亭妙微(藍藍設計)www.aknz.cn 是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計桌面端界面設計、APP界面設計圖標定制、用戶體驗設計交互設計、UI咨詢高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。

e5891719196478.jpg

【蘭亭妙微】如何分析一個 B 端新組件,簡單聊聊~

麗潔 交互設計及用戶體驗

作為一個 B 端設計師,我們究竟要如何理解組件?

當接觸到一個新組件時,通常會陷入到迷茫。一方面是組件過于的熟悉,我們在日常的工作當中會頻繁接觸到大量的組件內(nèi)容(畢竟是組件設計師...)另一方面則是新的組件不斷涌入,我們作為設計師一時之間不知道如何進行分析,今天我們就來聊聊 B 端設計師與組件之間的“愛恨情仇”。

先來簡單說說什么是組件?

我認為組件就是組成用戶界面的基本元素,也是前端在開發(fā)過程當中,抽象出來可以復用的模塊。對于定義大家不必過于糾結,最主要還是要了解其使用,比如在下方頁面當中,會包含有哪一些組件?

A. 輸入框 開關 上傳 按鈕 文本提示

B. 輸入框 開關 上傳 按鈕 氣泡卡片

C. 輸入框 開關 圖片預覽 按鈕 文本提示

這就是我們要了解關于一個組件的判斷流程,我認為會有三步:形式、交互、場景。

一、形式?jīng)Q定功能

其實我們在去辨別新一個組件的時候,會優(yōu)先關注組件的「樣子」,進而來進行辨別。

比如下方的兩個組件,我們其實很快速就能判斷出一個是 單選框,一個是多選框。因為在我們潛意識當中單選為圓形、多選則為方形,因此對于一個組件的第一印象則會和它的形式相關。

但很多時候,隨著業(yè)務的變化,我們也會給組件更多含義。比如在下方三個新建按鈕當中,因為他們的形式不同,所對應的含義也并不相同。

通過形式上,我們可以理解為:

  • 第一個新建按鈕,
  • 第二個新建按鈕:
  • 第三個新建按鈕:

再舉一個例子,比如在這三個選擇組件當中,正是由于其組件形式的變化,導致它們在使用上也會存在較大差別~

當然,正是因為它們樣子的改變,組件的使用含義也會產(chǎn)生變化。

二、明確交互狀態(tài)

知道它的樣子還不夠,我們還要了解它究竟應該如何操作,因此就需要明確對應的交互狀態(tài)。

比如同樣給到大家兩個組件,請你去辨別這兩個組件分別是什么?

其實我們很難進行細致的辨認,因為這兩個組件在形式上基本相同。但我們一旦將其動起來,你就會發(fā)現(xiàn)不同,左側的是一個按鈕,而右側則為鏈接。

其實我們在辨別交互狀態(tài)時,通常會存在兩種辨別維度:常規(guī)交互與業(yè)務交互。

常規(guī)交互是指在網(wǎng)頁端當中的基礎交互,比如 Hover、點擊,這種情況大多數(shù)設計師經(jīng)常接觸,因此我們就不花太多時間放在這上面。

第二種交互類型是業(yè)務交互,它主要出現(xiàn)在特定的頁面上。比如在圖表中的下鉆、過濾、聯(lián)動、縮放等等;在表格就會有 凍結、拖拽、選中 等交互,這些內(nèi)容都是我們在涉及特定頁面時需要關注的。

所以我們再去理解一個組件的時候,也需要去考慮這個組件所關聯(lián)的交互狀態(tài),這樣才能夠對于這個組件有個更為全面的認識。

三、作用對比

作用對比則是去思考這個組件與其他作用類似的組件之間究竟會存在什么差別?

因為每一個組件都會有它存在的意義,我們可以通過橫向單維度的對比,了解到這個組件它所對應的特點。

這個我們來舉一個完整的例子,帶大家感受一下~

舉一個例子

比如最近在行業(yè)當中,出現(xiàn)一種新的組件叫做:螞蟻線

剛開始在騰訊云的官網(wǎng)看到了螞蟻線,但其實我對他真的一無所知。于是乎,我開始了組件調(diào)研。

 

從形式開始,你會發(fā)現(xiàn)“螞蟻線”是位于文本下方,通過虛線的方式呈現(xiàn)。

通過這種形式,我們能夠拓展一些其他的類似樣式。

比如在飛書當中,當你寫一個錯別字的時候,飛書會提供默認的下劃線提示你修改錯誤。但這個下劃線是一個實線,并且會以黃色作為標注,這就是形式上的差異。

其次,在交互上,在整個頁面中,當你將鼠標懸停在虛線上時,這個提示會告訴你這里有信息可以進行預覽。通過這樣,我們就能大致明白“螞蟻線”的含義:它出現(xiàn)在文本下方,使用虛線的方式提示用戶這里有更多的信息。用戶通過將鼠標懸停在虛線區(qū)域的文本上,便可以查看更多內(nèi)容。

最后,在對組件進行對比時,思考與“螞蟻線”具有相同作用的組件,我想到有兩個:Tooltips和Popover。并簡單整理它們在日常頁面的使用,一共會包含三種相同的情況下的交互形式。同時,明確分析緯度以信息凸顯程度進行對比,進而能夠將這三個組件進行區(qū)分。

并且在頁面中,交互的形式也會有所不同。因此我們簡單整理,會有三種相對應的對比方式。并明確它們,以信息干擾程度作為標準,來進行單維度的劃分。進而就能得到“螞蟻線”組件的一個整體的用途。

關于組件,確實由于時間有限,給大家分享到這里。

 

轉載:人人都是產(chǎn)品經(jīng)理

 

蘭亭妙微(藍藍設計)www.aknz.cn 是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。

 

image.png

設計高素質的UI應該掌握這7個關鍵屬性

之晨 交互設計及用戶體驗

我們的世界正在快速的數(shù)字化,這也是為什么UI界面在近10年來一直都是熱門話題,同時,這也意味著,作為設計師的我們比以往任何時候都要專注打造高素質的UI,以及讓用戶欲罷不能的用戶體驗。我們需要好的UI和優(yōu)秀的設計。

蘭亭妙微設計公司,一直在追求好設計,優(yōu)秀的設計,讓人難忘的設計,能夠脫穎而出的設計。我們相信設計是有跡可循的,有成熟的、可考量的標準來衡量,它甚至可以作為我們設計的方向而存在。

從網(wǎng)站到手機,從家用的恒溫控制器到汽車的控制面板,所有的這些UI構成了我們的日常數(shù)字體驗。越來越多的屏幕和日漸龐大的數(shù)字化內(nèi)容,使得我們對于優(yōu)質的UI設計越來越渴望。

雖然好設計的原則是老生常談,但是我們還是要經(jīng)??偨Y,結合自己的設計,三省吾身。

1、簡單

image.png

優(yōu)秀的UI界面是隱形的,華麗的裝飾和不必要的元素都已經(jīng)被剔除,簡單直接的頁面邏輯和直觀必要的元素構成了這樣的UI界面。設計UI的時候,你在添加任何元素的時候,都最好問一下自己“這個功能是否會影響用戶現(xiàn)有的任務?它是否真的必要?”先將你的UI內(nèi)的元素限定為必須的,專注于核心的用戶體驗。

如何設計一個簡單的UI界面,Maaemo 的產(chǎn)品在這方面就做的很突出。這個挪威餐廳的網(wǎng)站上,你看到的是預訂的表單,其他次重要的內(nèi)容被隱藏在漢堡菜單當中,避免引起混亂。用戶不用浪費時間去來回瀏覽掃視,直接進入預訂的環(huán)節(jié)。

2、清晰

清晰應該是所有UI界面都具備的基本屬性。請記住,你的UI界面存在的目的是讓用戶能夠更便捷地同你的系統(tǒng)進行交互,為此,它需要能夠清晰地同用戶進行溝通,如果用戶無法弄明白界面的使用,會因此感到沮喪。

保持清晰的UI界面設計并不難,首先要保證一點:按鈕和操作的標簽文字指向性要明確,保持清晰的信息傳遞,讓用戶能夠快速弄明白交互的指向性。

這個時候,你也別忘了開頭的“簡單”的原則。盡量不要在UI中使用冗長、復雜、難以記住的文本標簽,你的用戶不會花費時間去讀,也不會去欣賞它們,越復雜越“獨特”,就越會影響整體的用戶體驗。

一個詞能解釋清楚的事情,千萬不要用更多的語言去表述。保持簡明能夠讓你的界面更加清晰,節(jié)省用戶的閱讀時間,降低認知疲勞??赡芫喅鲋庇^又易于識別的文本很難,但是做好了是很有價值的,對于整體體驗的加分很多。

3、一致

不論是哪個設計師,都會希望自己的設計能給用戶帶來一致的體驗的吧?一致的設計能夠讓用戶對于你的設計模式更快認知、熟悉,并且在此基礎上快速適應整體的體驗。人們渴望規(guī)律,追求一致性,也希望在實際操作中驗證自己所“發(fā)現(xiàn)”的一致性。

所以,用戶是期望借助自己習得的經(jīng)驗,來探索更多的內(nèi)容的,而探索能否有效就得看設計的一致性是否夠好了。在整個UI設計中保持一致的語言、布局和設計規(guī)律,整個用戶體驗會顯得更加“通透”。

4、熟悉

image.png

用戶體驗設計的一個重要的目標是要讓用戶能夠憑借直覺來操作UI界面。那么,怎么才能讓用戶更加“直覺”地完成交互呢?用戶要能夠自然地理解其中的內(nèi)容,操作自然就不難了,也就是說,你要讓用戶對你的界面產(chǎn)生“熟悉感”。所以,你要充分利用用戶對于你的設計所熟悉的部分。

當用戶對UI界面抱有熟悉感的時候,通常意味著他們對于這個設計有所了解,甚至知道怎么交互,他們明白操作之后大概會發(fā)生什么,也知道哪些事情不應該做。所以,如果你能利用好用戶對于交互和界面模式的熟悉來進行設計的話,能讓你的用戶更快上手操作。

漢堡圖標就是這樣的典型?,F(xiàn)在當用戶看到漢堡圖標的時候,就會明白這代表著菜單。當用戶在界面中找不到預期的功能或者服務的時候,會主動地尋找漢堡圖標,希望能在其中找到需要的東西。

Born Shoes 這個網(wǎng)站也充分利用了這一點,將熟悉的圖標放在熟悉的位置,用戶上手就知道怎么用了。

5、視覺層次

image.png

UI界面的視覺層次是非常重要且常常被忽視的一個屬性,它能夠幫助用戶專注重要的內(nèi)容。如果你想讓界面中每個內(nèi)容都看起來很重要,那么只會單純地讓信息過載,讓每個元素都分攤用戶的注意力,最終只會讓整個設計顯得混亂不堪。不同尺寸的字體、不同的色彩和不同的控件最終應該是相互搭配,構成層次,有輕重緩急地呈現(xiàn)給用戶,將復雜的結構簡單化,幫助用戶完成任務。

Budnitz Bicycles 的網(wǎng)站就很好地使用色彩營造出視覺層次,吸引用戶關注到網(wǎng)站的特定部分。網(wǎng)站中的按鈕在整個設計中顯得非常顯眼,引導訪客點擊。

6、高效

image.png

你的UI界面最終的目標是要帶著用戶完成任務,達成目標,或者去他們要去的頁面。不同的流程要求不同,但是最優(yōu)秀的UI設計有個共通的特征:高效。提升界面效率最有效的方法是進行任務分析。

熟悉用戶的流程,了解用戶的目標,然后在此基礎上盡量簡化流程,使得用戶能夠便捷快速的達成目標。在此過程中,仔細考慮每個功能細節(jié),規(guī)避可能存在的漏洞,幫助用戶快速完成用戶流程。

Mulberry 在他們的活動頁面上提升了用戶效率,幫助用戶更快地挑選節(jié)日禮物,降低繁復的搜尋和思考過程。

7、響應

UI界面響應牽涉到體驗的方方面面。首先,UI界面的響應應該是迅速的,它背后的整個系統(tǒng)應該能夠快速反應,否則不夠快速的響應會讓用戶感到沮喪,緩慢的網(wǎng)頁加載過程會令人抓狂。

事實上,如果你的網(wǎng)站沒有在3秒內(nèi)加載完成,就會開始有訪客因此而流失。根據(jù) Kissmetrics 的統(tǒng)計,超過40%的訪客會在加載速度超過3s之后而離開,而加載時長的增加,更多的用戶會隨之離去。

此外,UI界面的響應是否合理,是否足夠“人性化”。當用戶點擊界面元素的時候,用戶希望知道他們的操作是否成功,而這個時候,合理而快速的界面反饋就顯得很重要了。比如,當用戶點擊一個按鈕,按鈕的狀態(tài)變化,又或者界面加載時的加載進度條,都能夠讓用戶明白狀態(tài)的改變,以及他們操作的結果。

界面的合理響應讓UI更為富有人性,減少錯誤的發(fā)生,并且讓交互進入真正良性的循環(huán)。

轉載自優(yōu)設網(wǎng)

image.png

蘭亭妙微(藍藍設計)www.aknz.cn 是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計、桌面端界面設計、APP界面設計圖標定制、用戶體驗設計交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。

一讀就懂!B端響應式設計的新手掃盲

清陽 設計資源

蘭亭妙微UI設計公司:最近重新更新一下 B 端響應式相關的內(nèi)容,幫助已經(jīng)初步掌握的同學重新鞏固,還沒學會的同學快速入門。

響應式的適配對象

響應式是一種網(wǎng)頁前端技術,讓網(wǎng)頁可以根據(jù)分辨率、設備的變更,自動調(diào)整樣式和布局。

image.png

它的誕生起源于移動互聯(lián)網(wǎng)興起的熱潮,彼時智能手機訪問網(wǎng)站的需求激增,但多數(shù)網(wǎng)站的適配都是面向電腦端的大屏幕,僅有少數(shù)網(wǎng)站會額外開發(fā)符合移動端顯示需求的版本(自適應)。

響應式的提出,就是為了解決這種問題,通過建立一套約定好的設計、開發(fā)方法,用一套代碼自動適配臺式電腦、筆記本、平板、移動端等各種設備,提高網(wǎng)站的兼容性和開發(fā)效率。

而學習響應式,首先就要從瀏覽器開始說起。

瀏覽器是一個非常特殊的軟件,比如大家熟知的 Chrome、Safari、Eage 等,我們?nèi)粘TL問的所有網(wǎng)頁,都需要通過瀏覽器加載并渲染出最終的樣式。

image.png

可以把網(wǎng)頁 HTML 文件理解成是一個程序,而瀏覽器就是運行這個程序的系統(tǒng)(環(huán)境),也就是說解析網(wǎng)頁依靠的是瀏覽器而不是 Windows、Mac、iOS、Android、Linux 等客戶端系統(tǒng)。

瀏覽器即系統(tǒng)中的系統(tǒng)(類似虛擬機),不管在任何系統(tǒng)或設備上,只要安裝了瀏覽器,就可以用大體相同的規(guī)則、邏輯去加載、渲染出網(wǎng)頁。

image.png

但不同設備的屏幕有很大差異,網(wǎng)頁如何識別并匹配這些設備呢?

方法主要有兩種,第一種是瀏覽器會識別當前系統(tǒng)和設備,并提供接口讓網(wǎng)頁讀取。而部分網(wǎng)站會準備多種規(guī)格的網(wǎng)頁,根據(jù)獲取的設備類型推送對應的規(guī)格,這種做法叫做自適應模式。

通常自適應只區(qū)分桌面端和移動端兩種,較大的門戶、購物、工具類網(wǎng)站,普遍使用自適應模式。因為移動端訪問網(wǎng)頁的需求并不高,所以會對移動端版本做大量的精簡,降低開發(fā)、維護成本。

image.png

另一種方法,則是讀取瀏覽器視圖區(qū)域的分辨率。任何瀏覽器的界面,都包含功能區(qū)域和視圖區(qū)域兩個部分,功能區(qū)域提供相關的軟件菜單、操作按鈕,視圖區(qū)域則是顯示網(wǎng)頁界面的區(qū)域。隨著設備和屏幕分辨率的變化,瀏覽器的大小也會不同,網(wǎng)頁視圖區(qū)域也會跟著縮放。

image.png

網(wǎng)頁視圖注定小于整個瀏覽器的軟件窗口,而瀏覽器作為軟件,在系統(tǒng)中的尺寸不等于系統(tǒng)分辨率(或設備分辨率),一方面有系統(tǒng)的全局組件影響,另一方面窗口并不是非得全屏,用戶可以任意調(diào)整。

image.png

所以響應式網(wǎng)頁就是根據(jù)瀏覽器的視圖區(qū)域做適配,不管你是在電腦上縮放軟件窗口,還是在不同的設備、系統(tǒng)中打開,本質上都只是顯示區(qū)域大小的變更。而在瀏覽器的檢查選項中,模擬不同的設備其實就是縮放出一個指定的視圖窗口出來。

image.png

這種依賴關系延伸出一個新的知識點,即網(wǎng)頁顯示的分辨率,和顯示設備的屏幕分辨率,是兩套不同的體系。

這是因為硬件分辨率和系統(tǒng)渲染的分辨率是兩個概念,尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本,硬件分辨率是 3024 x 1964 (254 ppi),但在系統(tǒng)的屏幕分辨率選擇中,默認的卻是 1512*982(即原來的 1/2)。

image.png

這是因為硬件分辨率太高了,1:1 渲染的話,那么大多數(shù)圖標、文字是無法被看清的,所以默認使用了 2x 的規(guī)格渲染。但這只是其中一個選項,在 HIDPI 技術的加持下,用戶還可以選擇別的分辨率,比如我會進一步調(diào)高到 1800*1169。

在 Windows 系統(tǒng)中同理,雖然有很多高分辨率的屏幕,但是用戶為了看清內(nèi)容,會在系統(tǒng)中設置 120%、150% 的放大效果,等于為系統(tǒng)分辨率做出變更。

image.png

說到底,系統(tǒng)顯示分辨率的規(guī)格也是無窮無盡的。但是不管外部的轉換邏輯有多復雜,規(guī)格有多少,都和響應式網(wǎng)頁無關,它只需要認準瀏覽器的視圖區(qū)域分辨率即可。

所以了解線上案例的響應式布局規(guī)則,或者檢查已經(jīng)開發(fā)好的響應式頁面,并不需要切換不同設備查看,只要拖拽縮放瀏覽器的大小(主要是寬度)即可獲得完整的響應效果。

 

image.png

image.png

 

最后總結起來,響應式網(wǎng)頁是面向瀏覽器視圖區(qū)域做適配的布局方法,而不是面向系統(tǒng)、屏幕分辨率的適配,這和自適應布局有本質的差異。

在 B 端領域,絕大多數(shù)項目都只部分兼容響應式,放棄移動端的適配,即使支持移動端也是使用自適應的混合模式。要面對這些復雜的場景,就月需要理解上面這些基礎的概念,否則設計師就無法真正滿足響應式項目的前期創(chuàng)建和后期交付需要。

轉載:優(yōu)設

蘭亭妙微(藍藍設計)www.aknz.cn 是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計圖標定制、用戶體驗設計、交互設計UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。

 

image.png

蘭亭妙微UI設計公司:優(yōu)質移動端UI的7項最佳實踐

之晨 移動端UI設計文章及欣賞

蘭亭妙微UI設計公司:你會發(fā)現(xiàn)現(xiàn)在的移動端UI界面中極簡風的設計越來越多了。極簡主義設計風之所以能夠如此的受歡迎,很大程度是源自于它對于設計、開發(fā)的友好,它不僅讓APP的加載速度更快,讓APP對于不同屏幕的兼容性更加優(yōu)異。與此同時,越來越多的用戶也開始青睞極簡風的設計,極簡風的UI界面不僅漂亮,而且在可用性上也非常的突出:它易于導航,并且具備強大的視覺表現(xiàn)力。

1、一屏一個任務

降低用戶完成任務之時所需耗費的精力。

你為APP的每一屏都應當承載一個對用戶有用、有價值的交互或者任務,一次完成一個任務,且只能有一個任務,其中應該不包含超過1次的行為召喚(CTA)。這樣的設計能讓用戶更輕松地學習,更便捷地使用,在設計上也更容易添加刪減以及構建。

以Uber為例,Uber 清楚地知道用戶的目的是乘坐出租車,所以,應用程序不會一次給用戶太多的信息,會根據(jù)地理信息自動檢測用戶的位置,而Uber 提供給用戶的每一個界面的交互都是單個的,用戶只需要選取位置,下單即可。

image.png

2、隱形的UI

內(nèi)容即是界面。

專注于內(nèi)容,并且盡量刪除不必要的元素,這樣可以縮短用戶集中注意力的時間,用戶將會更快地被引導到他們正在搜尋的內(nèi)容,而內(nèi)容本身正是一個隱形的界面。最典型的就是Google 地圖。在重新設計的時候,Google 地圖刪除了所有不必要的面板和按鈕,地圖本身就是最好的界面。

image.png

3、呼吸的空間

使用負空間讓重要的內(nèi)容吸引用戶的注意力。

留白,或者負空間,指的是頁面設計布局中的空白部分,或者空白元素,它們常常被忽略和忽視,雖然許多設計師認為這樣的設計會浪費屏幕的空間,但是留白本身就是設計的基本元素之一。

留白可以提升可讀性和內(nèi)容的優(yōu)先級,在頁面布局中也發(fā)揮著重要的作用。因此,它可以合理地簡化UI并提升用戶體驗。

image.png

4、直觀的導航

導航應該是每個APP當中優(yōu)先級最高的組成部分。移動端APP中導航應當容易被發(fā)現(xiàn),可訪問的,且盡可能少的占用屏幕空間。由于小屏幕的限制以及內(nèi)容優(yōu)先級的需要,移動端導航的可訪問性設計一直是一個挑戰(zhàn)。

標簽欄和導航欄是非常適合用來展現(xiàn)較少的導航選項的,它們非常適合用來展示主要的導航選項,一個簡單的點擊就能流暢地切換到不同的頁面。

image.png

5、單手操作

讓你的設計兼容更大的屏幕。

關于用戶如何握持手機,下面的圖為你展現(xiàn)了最常見的三種模式:

image.png通過觀察可以發(fā)現(xiàn),85%的用戶使用單手握持他們的手機,下面的熱圖展示了從2007年一來,各種不同尺寸的iPhone 的拇指操作區(qū)域。毫無疑問,隨著屏幕尺寸的增加,拇指能夠觸及的區(qū)域的比例正在逐步降低。所以,移動端界面的用戶體驗設計應當進行調(diào)整,嘗試讓你的APP 能夠在手機上面能夠單手操作,將導航置于用戶的拇指可以觸及的區(qū)域之內(nèi)。

image.png

6、讓APP運行快速

不要讓用戶等待內(nèi)容呈現(xiàn)

試圖讓程序的響應速度提升起來。許多任務盡量在后臺跑起來,讓前臺的展現(xiàn)速度顯得很快。將一部分操作打包到后臺運行有兩個好處:讓一些等待和加載過程不再展現(xiàn)在用戶面前,并且可以讓許多操作在用戶請求之前就發(fā)生。一個很好的例子就是 Instagram 中上傳圖片,當用戶選擇要共享的圖片之時,上傳就已經(jīng)開始。

image.png

7、善用推送通知

在推送信息之前請三思。

每天用戶都會被無數(shù)無用的推送通知所轟炸,被分散注意力,這也使得通知常常會顯得頗為惱人。根據(jù)調(diào)研,超過70%的受訪者表示,令人煩躁的推送信息是促使他們卸載應用的主要原因。

image.png

所以,要做好移動端設計,需要用好每一次的信息推送。不要為了吸引用戶而推送消息,這往往會適得其反。你需要將對于用戶有價值的信息推送出去,這樣才合適。

image.png

有效的移動端APP信息推送策略是采用多種類型的信息推送機制,推送通知,電子郵件,應用內(nèi)通知,新聞Feed等。多樣化的信息推送通過合理的協(xié)調(diào),創(chuàng)造良好的用戶體驗。

轉載自優(yōu)設網(wǎng)

image.png

蘭亭妙微(藍藍設計)www.aknz.cn 是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。

image.png

設計組件庫是提升設計效率和一致性的重要工具

之晨 圖標設計文章及欣賞

設計組件庫是提升設計效率和一致性的重要工具,但如何在頻繁迭代和動態(tài)調(diào)整中高效賦能業(yè)務設計交付,一直是行業(yè)面臨的挑戰(zhàn)。蘭亭妙微UI設計公司,分享了他們在設計組件庫建設中的新思考和實踐,供大家參考學習。

本文將分享我們對于“什么是好的設計組件”的看法,并給出一種搭建復雜組件的實用思路。我們還會從資產(chǎn)消費的角度,提供一些優(yōu)化建議。雖然過程中會涉及不少基于Figma軟件的操作細節(jié),但核心思路就像一把“萬能鑰匙”,無論在哪個設計平臺都行之有效,希望這些內(nèi)容能給廣大設計師們帶來一些新的啟發(fā)。

 

蘭亭妙微(藍藍設計)www.aknz.cn 是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計圖標定制、用戶體驗設計、交互設計、UI咨詢高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。

 

image.png

 

 

日歷

鏈接

個人資料

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

存檔