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

          首頁

          好的單選框設計具備哪些特質?把握住這些知識點!

          lanlanwork


          一、什么是單選框?

          顧名思義,單選框表示只能選擇一個選項,再具體一點,可以理解為只能從一組相互排斥的選項中選擇其中一個選項。

          單選框有選中和未選中兩種狀態,樣式上用填充的圓表示選中,描邊的圓表示未選中,通過改變狀態來給用戶反饋。

          圖片

          ▲ 常見的樣式是按鈕在左標簽在右,在結合特定的場景使用時,兩者的位置可以視情況靈活調換。

           

          二、何時使用單選框?

          除了單選框,選擇類組件還有很多其他形式,比如下拉列表、復選框等,我們首先來對比區分一下這幾個易混淆的組件。

           

          單選框VS下拉列表

          當用戶需要從大量選項中進行選擇時,為了節省空間,可以使用下拉列表代替單選按鈕。但是下拉列表將內容都隱藏在下一層級中,需要用戶多做一次選擇,操作成本和認知成本都會變高。

          圖片

          ▲ 當選擇不多于3項,建議使用單選框,這樣選項可以直接展示出來,用戶只需要點擊選擇即可;當選擇超過5項時,可以考慮使用下拉列表,確保選項不會占用大量空間。

           

          單選框VS復選框

          復選框允許用戶一次選擇多個選項,選中其中一個選項,不會對其他選項產生影響。對于何時使用單選框還是復選框沒有明確的界定,需要具體問題具體分析。

          圖片

          ▲ 這里提一個使用復選框時需要注意的小問題,比如在只有兩個選項時使用復選框,用戶可能會以為只需要從這兩個選項里面選擇一個,反而造成誤導。

           

          三、單選框設計指南

          始終確保良好的可用性

          對于這樣一個簡單的組件,想要做好用好,在設計上有一些不可忽視的細節。

          首先要避免在單選框列表中嵌套下一層級的選項,因為使用單選框的目的之一就是為了讓所有選項清晰呈現給用戶,嵌套過多層級會導致整個結構的混亂。

          圖片

          ▲ 另外要明確的是,單選按鈕不應該是唯一可點擊的熱區,而是要將按鈕和標簽一起作為熱區,便于用戶準確點擊操作

          圖片

          ▲ 這個選擇模塊由單選按鈕、文字標簽和圖標共同組成,可操作的范圍很大,視覺層次也很清晰,設計得既整潔又實用。

           

          保證可讀性

          單選框列表的布局要有邏輯性,盡量減輕用戶的認知負荷。

          圖片

          ▲ 用戶習慣于上下瀏覽選項和列表,如果將這些選項水平排布,可能會造成兩點問題:一個是瀏覽時視線移動的不習慣,另一個就是如果選項位置過于緊湊,用戶可能不知道每個標簽到底對應哪個按鈕。

          除了列表要垂直布局,標簽也需要很簡潔。標簽越長,用戶需要花費更多的時間和精力才能了解整個列表。

           

          提供認選擇

          想象這樣一個使用場景,我們下載了一個新的設計軟件,第一次打開時跳出一個彈窗,提示我們是選擇經典布局,還是個性化布局,但是我們對這個軟件不是很了解,可能并不清楚這兩個布局到底是什么樣子。

          圖片

          ▲ 在這種情況下,最好默認選中其中一個選項,這樣做一方面可以減輕用戶對于選項的糾結,另一方面還能有目的地引導用戶使用。

           

          最后

          最后為大家精選了單選框設計樣式資源,學習好的單選框設計風格和樣式,獲取最新的設計靈感!

          圖片

          關注公眾號后臺回復【單選框】獲取設計文件。

           

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

          作者:Clippp

          轉載請注明:學UI網》好的單選框設計具備哪些特質?把握住這些知識點!

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

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

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

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



          工作經驗| B 端產品組件設計細節及經驗分享(一)

          lanlanwork


          1、中性色色值為什么要使用透明度? 

          有細心的用戶發現,在 Ant Design 的設計規范里,中性色色值可以按照透明度來設置,見下圖中性色色值表(百分數代表不透明度):

          圖片

          平時大家似乎更喜歡使用 #333333、#666666 這種色值,那使用透明色有什么優勢呢?

          我們知道,中性色主要被大量的應用在界面的文字部分,此外背景、邊框、分割線等場景中也非常常見。產品中性色的定義需要考慮背景以及有色背景的差異,同時結合 WCAG 2.0 標準

          現在  Ant Design 的色板中,透明色模式和實色模式都是有的。透明度模式可以做到背景色兼容。

          如下圖示例,我們以顏色 gray-6 為例,這個顏色在實色模式的色值是 #BFBFBF,透明色模式的色值是 000000-25%。兩者在白色背景上的顏色完全相同,但是在灰色或其他顏色的背景上,卻有明顯差別:

          圖片

          因此在透明色模式下,以中性色為主的前景色,會與背景色有一個更明顯的色彩對比,對背景的兼容性也會更好,保證內容的可讀性。

          Ant Design 提供了透明色和實色兩種顏色模式供用戶選擇,也會使組件更具通用性。

           

          2、組件和設計師之間的關系是? 

          當下很多常見的、優秀的組件庫,都為設計和開發的工作提供了便利。

          圖片

          那么使用組件庫可以替代設計師么?組件和設計師之間的關系又是什么呢?我個人觀點如下:

           

          1 . 組件是「效率」工具

          組件是工具,用來為設計師和開發提升工作效率。所有組件庫的初衷都不是要替代設計師,而是要提高整個團隊的工作效率。使用組件可以從兩個方面提效:

          (1)工作內容上:可以將不必要的、重復性勞動的時間節省出來

          (2)工作流程上:便于設計師與前端開發做交接和協作,節省溝通成本

           

          2 . 組件是「質量」保障

          使用組件做設計稿,可以在一定程度上保證工作質量。組件規范了前端和設計師的工作方法,建立相對底層的系統,設定了設計和開發的質量底線。

          圖片

          基于組件規范設計和開發的產品更容易具備:

          (1)一致性:具備相對一致的表現樣式,設計風格和交互體驗上均可保持統一

          (2)可用性:對于用戶操作,可以保證最基本的可理解性和可操作性

          (3)審美性:符合基本審美標準,雖不會很亮眼,但也不會很難看

           

          3 . 設計師要「沉淀」業務組件

          設計師可以嘗試沉淀有針對性的業務組件。很多業務領域有其獨特性,比如金融類組件和政務類的產品頁面列表內容就有很大區別。單一的元素組件在應用的過程中可以被再次組合和沉淀。

          舉個例子,我之前在做業務需求設計時,相比于 AntD,其實更常用的是 TechUI —— 它是建立在 AntD 基礎上的、由我們螞蟻的設計師通過對業務需求的提煉、組合和封裝,做成的一套于螞蟻自己的【業務組件】

          圖片

          再總結下二者的區別:

          – Ant Design:是所有人的,是通用的,是單一的原子級別的(比如一個輸入框)組件。

          – TechUI:是螞蟻自己的,是私有的,是組合的區塊級別的(比如一整個表單)組件,更具備螞蟻集團自己的業務屬性。

          圖片

          針對你公司不同業務類型,沉淀出不同種類的區塊級別的組件,這類組件使用起來也會更加得心應手、加倍提效。這也是 B 端設計師可以去學習和精進的一點。

           

          4 . 設計師要「洞察」業務訴求

          使用組件可以讓設計師把節約出來的時間和精力放到更多有價值的工作上去。作為 Ant Design 的設計師之一,坦白的說,即使你的設計稿全部使用了 Ant Design 的組件搭建,最終的頁面效果也仍不完善,在用戶體驗上始終可以更進一步

          設計師應該更多去關注對用戶需求和業務邏輯的深入挖掘,不僅僅是在界面細節的表現手法上下功夫,還要學會站在全局,用系統性思維看待每一個項目,為整個產品的系統流程做優化,做更全面的產品體驗升級。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》工作經驗| B 端產品組件設計細節及經驗分享(一)

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

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

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

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


          測試了新手指引方案,總結下失敗經驗

          lanlanwork


          圖片

          上圖來源:Monday

           

          不要給用戶選擇

          有些產品還挺重視新手指引的,準備了好幾個課程。

          由于內容太多,所以拆分出來展示給用戶,甚至讓用戶自己選擇。

          圖片

          圖片

          上圖來源:Zendesk

           

          例如上面的案例,雖然并沒有強制用戶手動選擇,光是新手指引的內容列出來給用戶這件事情,已經讓人壓力山大了。

          其實用戶剛進來時,只想要利用新手指引快速上手,并不想要看到關于新手指引的介紹,更無法決定選擇什么新手指引。

          如果真的不同人群的使用功能相差很大,那么直接根據對方情況提供相應內容即可。

          這讓我想起了第一次在牛肉火鍋店點菜的情景,我這種牛肉小白用戶根本看不懂菜單,能不能給先上一份普通牛肉?

          圖片

           

          指引氣泡不需要標題

          Windows 系統給界面設計帶來一個奇怪的習慣,那就是不管什么面板,都必須有一行標題。

          圖片圖片

          如果實在想不到用什么標題了,就把描述文字第一行拆出來做標題,甚至哪怕是用系統 logo 占位,也必須要有標題!

          這讓很多新手指引的氣泡,也習慣性地配一個標題。

          如果標題就能直達主題也還好,但如果是為了占位了湊出來的,那可就太浪費用戶時間了。

          圖片

           

          不要強調跳過按鈕

          科技產品改變了人們的生活習性,其中之一就是讓我們形成了條件反射:看到任何突然出現的彈窗和氣泡,快速點擊主按鈕并讓其消失。

          后來因為移動端廣告彈窗的泛濫,現在已經進化到了,看到彈窗先找 ? 了。

          圖片

          上圖來源:不要這樣用彈窗,真的很煩

           

          很多新手指引的氣泡都會提供跳過按鈕,這樣做挺好的,因為有的用戶可能真趕時間。

          但是如果跳過按鈕做得太強,就會激發用戶的條件反射,想都不想直接點跳過:

          圖片

          這個我嘗試過了,大腦真的控制不了自己,手速已經跟膝跳反射一個級別了!

          所以,這個跳過按鈕一定要做小一點,盡量不要激發用戶的條件反射:

          圖片

           

          只要不是單擊,就得有圖示

          前面提到,千萬不要小看條件反射這個東西,這個是生物本能。

          用戶最習慣的操作就是單擊,如果你指一個箭頭給他們,十有八九立即就上去點一下。

          點一下不行,就多點幾下,實在不行就雙擊。

          如果雙擊還不行,就直接放棄了。

          大半人根本不會看到,旁邊赫然寫著「點擊鼠標右鍵」幾個字。

          圖片

          以上就是我多年做用戶測試的常見場景,總結就是:只要不是雙擊,就要有圖示,寫字根本沒什么用。

          如果是右鍵,可以把鼠標畫出來:

          圖片

          如果是雙擊,可以給個動效:

          圖片

          如果是拖拽,除了操作對象之外,還要把目標位置高亮,并給一個指示箭頭:

          圖片

          沒錯,一定做要掃一眼就能懂的程度。

           

          遮罩別太深

          有些產品,為了讓更多用戶走完新手指引,會給操作對象和氣泡之外的部分加遮罩。

          這樣沒什么不好,看起來還挺清晰的。

          但是我發現有的新手指引遮罩太強,反而起不到學習的作用。因為用戶看不清界面整體的樣貌,還是記不住操作路徑,引導完后全忘了。

          新手指引的遮罩,一定不要按照彈窗的遮罩標準去看。

          因為有彈窗時,頁面的其他部分確實不用看了;但是新手指引需強調重點,界面其它部分最好還是能看到。

          圖片

           

          總結

          把上面的幾點都集合在一張圖,對比一下:

          圖片

          這些問題,如果放在產品的一般功能上,也許不算什么。就算第一次出錯,下次也總能習慣。

          但是新手指引不一樣,這是產品給用戶的第一印象,而且通常只出現一次,錯過就沒有第二次機會了。

          這個步驟,也能直接影響到用戶的轉化意愿。

          所以,新手指引真的要避免任何小問題,把體驗的標準往上高一點。

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

          轉載請注明:學UI網》測試了新手指引方案,總結下失敗經驗

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

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

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

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



          這逆天的效果,竟然是10秒鐘做出來的,真實大開眼界!

          lanlanwork

          莫b

          圖片

          圖片

          圖片

          再酷炫一點的,甚至可以讓3d動起來:

          這樣的效果如果做成封面,是不是老帥了!

          如果你不會動效也不會3d,沒關系,今天給大家介紹一個神奇,上面的3d動態效果非常多:

          咔咔就是一頓選擇! 還有各種屬性各種調整:

          圖片

          調整出自己滿意的效果之后,文字往上面咔咔一放:

          圖片

          圖片

          圖片

          尤其是后面的元素是動態的:

          這封面可不得了啊,做個匯報啥的,必須震懾一下老板,讓他尖叫就完了!
          (我這個動態gif圖效果是用屏幕錄制,然后用ps把mov格式轉成gif的)

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》這逆天的效果,竟然是10秒鐘做出來的,真實大開眼界!

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

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

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

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



          B端產品C端化,抱歉我想的太簡單!

          lanlanwork


          為什么要 C 端化?

          其實 B 端產品 C 端化,并不是因為傳統的 B 端產品沒 C 端好用(不是這么比的)。

          其實關鍵還是獲客模式的轉變。

          傳統的 B 端產品是銷售驅動,銷售人員通過電話、上門拜訪等形式促使客戶下單。

          一旦成功賣出,只要后續的服務不太差,客戶就沒必要更換遷移。

          現在 B 端市場越來越大、行業信息越來越透明、客戶的判斷能力越來越強,傳統銷售模式開始變為互聯網營銷

          B 端產品在網上發布信息并投放廣告,吸引客戶自己前來試用并購買,只需提供少量客服人員即可。

          這與以往的 B 端業務模式有很大不同,所以就需要變革。

          所謂「B 端產品 C 端化」,表面上是學習 C 端的用戶體驗,背后的真正意圖是要學習人家 C 端的互聯網獲客能力。

          圖片

           

          怎樣才是好的 C 端化?

          我發現 B 端產品的 C 端化程度,和他們的互聯網廣告投放力度成正相關。

          例如我在油管上經常受到 Monday、GoDaddy 這兩款 B 端產品的輪番轟炸。

          先不說好不好用(畢竟我也不是目標客戶),我發現他們用起來真的很有「C 端感」,和傳統的 B 端產品果真不一樣。

          倒不是什么“輕量化、趣味性和人文關懷”,而是因為他們在我打開網站的那一刻,就開始不斷吸引我探索使用

          我拿 GitLab 和 Monday 的官網首頁對比一下,也許你就能感受到了:

          圖片

          前者像是一板一眼的「老實人」,后者則像是對你笑瞇瞇的「綠茶妹」,高下立判。

          “輕量化、趣味性和人文關懷”這些東西,并不足以打動用戶試用和購買,頂多只能算是「低段位」手段。

          只有「高段位」手段,才能讓用戶不自主地地被吸引,心甘情愿地掏錢。

          可是要做到「高段位」真的很不容易,我今天就總結幾個技巧吧~

           

          1. 直接坦誠

          遇到兩個陌生人:一個打官腔又遮遮掩掩的;另一個說話友善接地氣又誠實,你會更喜歡哪個?

          可能大多數人跟我一樣會喜歡第二個。

          C 端化做得好的 B 端產品,會把自己的產品預覽圖直接放到首頁供人觀看,而不是搞一張概念圖外加一堆高大上的廣告詞。

          前面放過的那張案例,這里也可能拿來用:

          圖片

          GitLab 的官網畫了一些很抽象的概念圖,寫了一些很抽象的描述,給人感覺很模糊。

          Monday 的官網明確把自己的業務類型列了出來供用戶選擇,還把每種業務對應的圖標和展示方式畫了出來,感覺很明確清晰。

           

          2. 有效互動

          遇到兩個健身房銷售:一個上來就說一個勁地介紹服務;另一個則先確認你平時的健身習慣,再根據你的情況介紹服務,你會更愿意聽誰說話?

          我肯定更喜歡第二個。

          C 端化做得好的 B 端產品,不是簡單地展示信息,而是先了解用戶,再根據用戶的需求提供不同的信息甚至服務。

          圖片

          Zendesk 的網站,會把自己的功能列出來給用戶,給的圖像和描述又很抽象,毫無互動感。

          而 Asana 會讓用戶選擇自己需要的功能,并直接給出具體案例的界面展示圖。

           

          3. 降低門檻

          遇到商場逛街時遇到兩個陌生餐館,一家在二樓;另一家在一樓,你會愿意嘗試哪家?

          肯定是第二個。

          很多 C 端化做的好的 B 端產品,會把表單用彈窗的樣式放在產品上面,讓用戶感覺只要填寫完就能立即使用了

          圖片

          比起 Trello, Smartsheet 只是在表單展示了一下產品內部,就讓用戶感覺門檻低了好多。

          即便 Smartsheet 的新用戶后面發現背后那張圖真的這是一張圖而已,要填的一點不少,但這時都已經快填完了……

           

          4. 循序漸進

          兩家陌生的兩家餐廳都把菜單擺出來了,一家的菜單寫得密密麻麻;另一家的菜單雖然菜品不多,但是推薦菜品和菜式分類很清晰,你會更愿意嘗試哪家?

          我相信很多人都會更愿意嘗試后者。

          C 端化做得好的 B 端產品,不會太在意自己的產品是不是看起來功能齊全,而是更在意用戶是否能夠很好的理解產品,不要造成心理負擔。

          圖片

          上圖來源:Figma這些交互細節,B端設計也值得借鑒

           

          Sketch 和 Figma 的屬性面板在功能上其實沒有很大的差異,但是后者看起來卻清晰簡潔許多,對新用戶更加友好。

           

          總結

          B 端產品 C 端化這個理念其實很好,但如果被誤以為只是向 C 端學習用戶體驗那就可惜了。

          用戶體驗只是手段,關鍵目的是在沒有銷售人員參與的情況下,如何從互聯網獲客。

          這次的經驗的提醒我,以后如果再看到一些很火概念,不要簡單的從表面理解,而是要站在決策者的角度,多思考背后的真實意圖。

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

          轉載請注明:學UI網》B端產品C端化,抱歉我想的太簡單!

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

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

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

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


          重新設計東南亞頭部在線超市的真實案例

          lanlanwork


          I. 發現

          客戶訪談

          由于這位甲方的合作態度良好,所以設計師有機會與 SESA 的創始人和產品經理進行了 2-3 次會議。

          借此了解了業務目標、用戶需求和技術限制等關鍵問題:

          圖片

          主要問題:

          • 低轉化率:雜亂的界面使用戶很難瀏覽商品。
          • 手機端體驗不友好:幾乎 90% 的用戶是通過手機訪問網站,但手機版的設計不夠理想。
          • 手機端糟糕的界面和體驗:目前他們使用的是現有的網站模板,根據目標用戶的反饋,缺乏優化而且加載速度很慢。

          客戶需求

          • 一鍵式購物
          • 輕松的界面和體驗
          • 無縫的商品搜索
          • 折扣和優惠更容易被看到
          • 使用網站時能感覺熟悉而簡便

          成功指標

          • 增加客單價
          • 增強人們的對品牌的認知感
          • 增加用戶和訂單數量
          • 無縫的體驗
          • 讓健康的生活方式更加受歡迎、評價、容易取得,更加有趣而美好
          • 提供并教育用戶健康的生活方式,并轉化為愉快美好的生活

           

          目標人群

          根據產品團隊提供的數據,整理出了目標人群的特征:

          圖片

           

          II. 構思

          人物角色

          根據以上信息,整理出了兩個完全不同的人物角色:

          圖片圖片

           

          故事版

          沒有區分人物角色的故事版:

          圖片

          目標用戶的故事版:

          圖片

           

          體驗地圖

          思考分析用戶旅程的五個階段(探索網站、比較商品、確認下單、完成購買和接收配送)和用戶感知的三個方面(行為、思考和感知),制作了體驗地圖:

          圖片

          將當中的關鍵信息挑選出來:

          圖片

           

          競品分析

          設計師找到了三家主要競品,先大概了解他們的特色和優勢:

          圖片圖片圖片

          然后從 Google Play 的評論中尋找競品的問題,這樣就可以思考如何戰勝他們:

          圖片圖片

          P.S. 評論分析是一種簡單有效的競品分析利器(也可以用來分析自己的產品),具體方法我之前有分享過:別總想著數據分析/用戶調研,先把評論分析做了吧!

           

          III. 設計

          信息導航

          先把大致的用戶流程確定下來,這樣對整個產品就有了一個整體構思:

          圖片

           

          線框圖

          然后用手畫出線框圖,定下頁面的整體布局:

          圖片

           

          低保真

          將線框圖手稿用繪圖軟件細化,制作成低保真方案,用來向客戶展示和做用戶測試:

          圖片

          圖片

           

          IV. 完成

          可用性測試

          找用戶做測試時,用的是低保真可交互原型。

          根據測試發現的問題,設計師直接將優化方案運用到了高保真方案上,所以下面整理的問題都用高保真方案來配圖展示:

          • 1. 自動定位:測試之前用戶必須手動搜索位置。
          • 2. 屬性選擇:由于客戶想要一鍵式購物,所以當用戶點擊熟悉(通常是重量)右側的箭頭時,可以反轉卡片進行詳細選擇。

          圖片

          • 3. 促銷展示:原本設計了三個促銷區,但是測試中發現用戶面對大量的信息無法充分理解,所以移除了一部分,只保留了頭圖和分類優惠。

          • 4. 商品導航:為了避免用戶迷路,將商品分類導航放在了所有頁面頂部,并且懸停時展示子分類和相關文章。

           

          高保真

          圖片

           

          響應式

          這個網站需要具備很高的響應式能力,不論在 PC 端還是手機端,都能輕松使用。

          但由于 PC 端和手機端的尺寸相差太大了,所以不得不使用斷點(Breakpoint)來判斷用戶當前處在哪個端,并展示相應的界面。

          這個斷點的概念在柵格系統很常用到,指的是當界面尺寸縮小或增大到某個(或幾個)零界點時,間距大小或其它界面元素發生突變。

          圖片

          上圖來源:三種最主流的響應式柵格

           

          這個方案的對于移動端的特殊處理包括:

          • 確保商品分類的位置,方便用戶記憶
          • 使用漢堡菜單
          • 提供模仿原生 APP 的吸底導航

          圖片

           

          Before&After

          最后對比一下優化前后的方案:

          圖片

          圖片
          圖片
          圖片

          圖片

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

          轉載請注明:學UI網》重新設計東南亞頭部在線超市的真實案例

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

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

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

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




          原子設計方法論!值得一學的設計思維模式

          lanlanwork


          1、什么是原子設計?

          原子設計是創建設計系統的理論方法,分為原子、分子、組織、模板、頁面五個層次。從最基礎的原子開始,原子構成分子,分子組成組織,相互協作以創造出更有效的頁面。

          原子設計借鑒了化學中看待事物的方式,并將其應用在數字產品中。例如我們看的界面是由一些基本的元素組成,文字,顏色和圖標等都是一個個原子。

          圖片

          原子設計是一種思維模式,并不特指某一種設計風格或框架。通過原子設計理論,將產品和頁面聯系為一個有機的整體,其中的每個小元素都發揮著至關重要的作用。

           

          2、原子設計方法論: 從原子到產品

          原子設計有特定的框架,方便幫助設計師組織思路并在設計過程中作為指導。

           

          原子

          原子指化學反應不可再分的基本微粒,雖然基礎但會對分子和個體的形成產生很大的影響。

          同理在設計中,原子是構成設計的最基礎的元素,可以是一個icon、一種字體…本身不具備特有的功能但這些基礎元素同樣值得重視。

          圖片

           

          分子

          分子由原子構成,以一定的次序和排列方式結合成分子。回到設計中,多個設計元素組合在一起,也會創造出一種新東西——具有明確功能性的組件。

          圖片

          原子設計強大的地方在于,可以為分子(組件)的創造分配時間,以確保組件具有明確的意義和功能。

           

          組織

          不同的分子組合形成組織,在設計中各種不同的組件組合在一起,形成一個完整的功能模塊,例如在首頁輪播圖模塊,有圖像、文字等元素,還有按鈕、導航箭頭等組件。

          利用組織這個概念能幫助設計師建立模塊化意識,對頁面結構有更深入的理解。

          圖片

           

          模板

          通過元素、組件和功能模塊的相互關聯,從而得到產品的模板即產品框架,也可以理解為產品的低保真線框圖。

          圖片

          在這個階段,產品的信息架構和可視化的層次結構變得非常重要。產品頁面、搜索結果頁、主頁等都有各自的模板,會顯示內容的結構和基本的原型,方便后期使用。

           

          頁面

          在模板基礎上,繼續添加需要的細節,最終會形成完整的頁面,即產品的高保真原型。

          這個階段中需要注意的是,頁面中所有的占位符盡可能提供真實的內容——真實的圖像、真實的文案。

          圖片

          對于完成的頁面,我們可以利用原子設計的靈活性來調整和優化頁面設計。

          比如當有某些地方的設計沒有達到預期,可以靈活調整頁面中的某個分子或組織模塊來實現想要的效果。

           

          3、原子設計的優勢

          靈活性和適應性

          原子設計是在設計過程中構建事物的方式,但它并不限制對環境變化做出反應的自由。

          通過為產品中的每種類型的內容創建組件和模式,獲得一個靈活的系統。模板為產品的一致性提供了一定的支撐,后期既可以按這些模板原型快速設計,也可以根據需求靈活調整。

          原子設計相當于將設計內容納入到一個模式里,組成的頁面不僅擁有準確的內容,并能以最好的樣式展現出來。

          圖片

           

          系統模式

          原子設計鼓勵設計師投入時間和精力來創建整個系統,以便在產品設計的最后階段,能夠以一種高效的方式靈活地完成設計工作。

          圖片

           

          更少的組件,更高效的開發

          利用原子設計可以確保在項目過程中組件的數量會受到一定的控制,避免團隊重復設計同一個組件的多個版本或提供樣式差不多的副本。

          圖片

          控制UI組件的數量,帶來的好處之一就是開發的效率會變得更高。有了以原子設計方法為基礎的理論架構,設計過程的每個環節會緊緊串聯在一起,避免混亂。

           

          最后

          原子設計成為一種用戶體驗設計方法,以全新的方式帶領大家設計每一個元素、組件以及頁面,通過這樣的方法論有助于設計師構建一個完整的設計系統。

           

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

          作者:Clippp

          轉載請注明:學UI網》原子設計方法論!值得一學的設計思維模式

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

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

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

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



          2021 必備的超贊神器,用上它,效率都要提升三倍!!

          lanlanwork


          圖片
          上圖就是這個神器制作出來的一些效果,之前看Dribble上面有很多類似的設計,現在終于知道它們大部分來源于這個神器。
          下面我也找了一些案例,大家一起來看看。
          圖片
          圖片
          圖片
          這樣看,效果還是真的不錯,它支持顏色修改、樣式修改,目前一共有11種幾何樣式。
          圖片
          好了,現在下面正式介紹這個傳說中的神器,我相信大家一定會喜歡上的。
          圖片
          上圖就是這個神器的基本外貌,一共11種基礎類型,當點擊其中一個進去后,可以進行編輯。
          這里我點擊上圖中的第二個模式(MIXTAPE)進去。
          圖片
          如果大家英文不好,可以將整個頁面翻譯成中文,Google自帶的翻譯。
          進入這個頁面,大家可以根據自己喜歡的風格調整樣式,同時還可以修改顏色。
          圖片

          比如我可以選擇8X12列和行的幾何布局。

          圖片
          對顏色、列和行、開啟陰影調整,得到如上效果。
          圖片

          最終可以導出一張高清大圖(3240X4860),尺寸是完全夠用的。

          圖片

          隨便調整下又是一張不錯的幾何背景,還可以作為作品集封面。好了,關鍵時刻來了,神器的網址已經打包好,大家可以拿去使用。

          領取方式如下:添加小編微信,備注:神器699,小編會將下載地址發給你(小編不是機器人,回復會慢一些,大家稍等)。

           

          原文地址: 功夫UX(公眾號)
          作者: 功夫UX

          轉載請注明:學UI網》2021 必備的超贊神器,用上它,效率都要提升三倍?。?

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

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

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

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



          需求太碎?設計師如何在小業務中提煉價值

          lanlanwork


          Chapter One .
          理清小業務的業務目標

          相對于大業務(例如網站改版),小業務因為簡單,其業務目標界定常容易被忽略。在日常設計中常會遇見設計師在不知道業務目標是什么、目標模糊、目標不正確的情況,直接從梳理小業務具備哪些功能入手,分析下現狀問題后開始制定設計策略,這往往會導致設計出現解決不了關鍵問題、出現偏差情況。產品功能本身只是滿足用戶需求和實現業務目標的服務載體,只是策略的表象。理清小業務所承擔的業務目標是前提,那么如何理清呢?

           

          理清業務目標

          小業務目標來自大業務目標,對大業務的業務目標進行一級級向下拆解后,即可獲得小業務對應的目標。目標拆解需要遵循MECE原則,拆解方法包含:二分法、過程法、要素法、公式法、矩陣法。(tips:目標的拆解有一定難度)

          圖片

          Dapp設計詳情為例,在酷家樂大增長業務背景下,用戶活躍和用戶留存為核心的目標,設計詳情處于設計路徑的一個節點,拆解得到設計詳情的5個主要業務目標:

          • 設計詳情-用戶周活躍
          • 設計詳情-新用戶留存
          • 設計詳情-老用戶留存
          • 設計詳情-內容投稿數
          • 設計詳情-內容分享數
          圖片

          業務目標可分為2個類別:

          • 第一類別:符合用戶意愿,如活躍、留存,在滿足用戶需求的情況下可以自然達成;
          • 第二類別:不符合用戶意愿,如內容投稿、內容分享,用戶不太會主動去完成,需要去創造動機,激勵用戶進行。

           

          Chapter Two .
          挖掘小業務關聯的用戶需求場景

          有小業務的業務目標后,第二步就需要給用戶提供價值滿足用戶需求,以此來實現業務目標的達成。梳理清楚小業務服務了哪些用戶需求是提供價值的前提,那如何獲取用戶需求場景呢?

           

          用戶訪談——獲取相關用戶需求場景

          用戶需求場景可以幫我們清晰了解到用戶使用產品的原因。用戶需求場景可以一句話進行界定,包含四個關鍵要素,其中需求本身最為核心,需要挖掘出當前訴求和其背后的潛在需求。

          “在【某環境下】,【某用戶】做了【某事】來滿足【某需求】”

          圖片

          用戶訪談為了挖掘到更為深入用戶需求場景的要素信息。以設計師入行年限分組(1-3年、3-5年、5年以上),每次分組訪談2-3個設計師。梳理出設計詳情相關的8個需求場景:

          圖片

          訪談信息整合如下

          圖片

           

          規整用戶需求場景

          在業務訪談中獲取的場景往往都是碎片化的,碎片化場景對設計指導容易出現偏差,需要把場景結構化,為后續的方案設計提供依據。我把獲得的場景按照設計師設計流程進行規整,按設計前、設計中、設計后三個階段進行劃分。

          圖片

          以上梳理了設計詳情相關的用戶需求場景,再來看原設計詳情只基礎滿足了資料管理和方案展示的2個單一場景,在設計師的整個設計流程中只占了一部分。從設計層面來看,該2個場景局限在方案設計大場景中,設計更多做的是對其方案設計操作的體驗優化,在原有較好操作體驗的現狀下,其對給用戶創造價值上沒有很大增量。再從以上業務目標來看,2個單一場景很難去促使用戶對內容進行分享和投稿。

           

          Chapter Three .
          梳理產品功能矩陣

          在理清小業務的業務目標和需求場景后,下一步就是按照場景去梳理產品能力。

           

          小業務功能現狀分析

          老版app設計詳情的功能進行初步的現狀分析,設計詳情包含渲染、圖文編輯、圖片管理、投稿、分享5個主要功能。從需求場景來看,多個場景無法實現,如營銷、談單;從業務目標來看,通過當前功能有較大的優化空間,如當前投稿很難讓用戶知道投稿有什么價值。

          圖片

           

          產品能力梳理

          分析現狀發現功能不足以支撐用戶需求場景,有獲取功能2個方向:

          1. 挖掘現有能力:可以擴大梳理范圍,從小業務所在的上一級業務到整個平臺,一級級往上梳理場景對應的現有功能。
          2. 打造新能力:圍繞場景,打造出新的功能

          圖片

          挖掘平臺上現有能力,可對業務的能力價值最大化利用,與其他業務形成互通,實現1+1大于2的業務價值。亦可圍繞場景打造新能力,可反推產品去發倔新功能。

          以下是設計詳情涉及所有場景的產品功能矩陣,從平臺獲取到了很多全新的能力,以及對原有的能力進行了能力拓展。

          圖片

           

          Chapter Four .
          拆解每個場景的設計目標和策略

          在梳理出產品能力后,需要通過設計策略把產品能力有效組織起來,讓用戶快速感知快速上手使用。設計策略推導自設計目標,那如何得到設計目標?

          基于用戶需求場景將行為事件拆分,提煉行為事件再推導出設計目標,再基于設計目標給出設計策略。

          圖片

          Dapp設計詳情受制于移動端能力,只涉及設計詳情中5個相關場景,其設計目標和設計策略的拆解結果如下

          圖片

          拆解出設計目標后,基于目標分析產品現狀得到存在的設計問題。為什么要基于目標分析現狀?首先需要明確什么是問題,問題是導致目標和現狀不一致的原因。只有明確了目標才可以理性分析與現狀存在多少問題。在日常中時??吹皆O計師會直接得到問題,很多情況是默認假設了一個預設目標,但這目標得到不嚴謹、不全面,容易導致得到的問題本身也出現偏差。設計策略基于設計目標或問題得出,其最終都來自設計目標。

          圖片

          對老版Dapp設計詳情現狀進行了分析,得到了問題:

          圖片

           

          Chapter Five .
          設計策略落地

          在上一步得到設計策略后,圍繞著設計策略是設計方案。本段將不全部展開說明,只選3個關鍵點講述設計方案的思考

           

          設計詳情框架的設計

          Dapp設計詳情涉及5個場景的承載及產品功能繁多,設計三步思考:

          第一步:簡化功能認知,對功能結構化,以場景的維度重組織功能,并以場景打造功能集合的認知,建立場景能力區;

          第二步:梳理場景共同涉及的內容,作為聯系的載體承載場景的放置,設計詳情中展示態的方案涉及到了5個場景中的4個場景;

          第三步:提取場景中即時性和高優先級功能,打造快捷功能區

          框架如下:

          圖片

          建立框架后,填充具體的能力和內容。如場景入口放置于底部,并根據場景優先級做了主次的區分。

          圖片

          設計詳情框架建立后,打造細分場景中的設計。

           

          營銷獲客場景設計

          營銷場景的設計,將營銷組成拆分為可營銷內容、營銷的渠道、渠道內容展現三大類,就可以清晰去梳理出現有的功能,以及可從內容、渠道各自去拓展挖掘。內容和渠道清晰后,再傳達各渠道提供的價值激勵用戶去觸發行為。

          圖片

           

          談單場景設計

          談單場景關鍵在方案詳情上,談單面對不同情況,存在多種內容形式去展示方案。在上面內容梳理中最主要是3個內容:圖文方案、全屋漫游、渲染圖冊。在方案詳情中,頭部承載了全屋漫游、圖冊,如圖文方案過于繁瑣可直接點擊全屋漫游圖進行講解,亦可點擊封面進入圖冊直接圖片說明。圖文詳情加上了房間切換的導航,可快速切換到需要講解的地方。

           

          Chapter Six .
          上線驗證

          上線后數據平穩后觀測,設計詳情的周活提升了89%,每個場景下的功能數據都得到顯著的提升(tips:有部分數據因技術原因沒有采集到)。除了改版了Dapp側的設計詳情,后續對PCweb側的設計詳情進行迭代,同樣起到不錯的結果。數據的結果驗證了方法的可行,并起到了積極的效果。

          圖片

           

          Chapter Seven .
          思考小結

          以上是我應用這套設計方法去做了塊小業務優化,反向推動進入產品迭代,上線后取得了不錯的成績。在本次賦能后,對小業務中多了一些感悟

          • 小業務是大業務的縮影,可以作為去賦能大業務前沿驗證的實驗田,大概率可以快速驗證自己的想法,即使方向錯了因為小業務改動影響面也小
          • 因知識廣度和深度的限制,不是所有設計師都可以一開始就可以把控大業務,小業務可作為打磨設計深度專業度,一些小業務的復雜度并不低于大業務
          • 該設計方法同樣適用于大業務,但方法是死的,不是所有情況都套用,得需要把握重點靈活應用
          • 不要總想著搞個大新聞,在能力未被業務方認可時,小業務的賦能可以成為一個很好的發聲口
          • 不要輕視小業務,有可能是你根本還不了解

          以上內容,感謝閱讀!

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:小波

          轉載請注明:學UI網》需求太碎?設計師如何在小業務中提煉價值

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

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

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

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


          重新設計東南亞頭部在線超市的真實案例

          lanlanwork


          I. 發現

          客戶訪談

          由于這位甲方的合作態度良好,所以設計師有機會與 SESA 的創始人和產品經理進行了 2-3 次會議。

          借此了解了業務目標、用戶需求和技術限制等關鍵問題:

          圖片

          主要問題:

          • 低轉化率:雜亂的界面使用戶很難瀏覽商品。
          • 手機端體驗不友好:幾乎 90% 的用戶是通過手機訪問網站,但手機版的設計不夠理想。
          • 手機端糟糕的界面和體驗:目前他們使用的是現有的網站模板,根據目標用戶的反饋,缺乏優化而且加載速度很慢。

          客戶需求

          • 一鍵式購物
          • 輕松的界面和體驗
          • 無縫的商品搜索
          • 折扣和優惠更容易被看到
          • 使用網站時能感覺熟悉而簡便

          成功指標

          • 增加客單價
          • 增強人們的對品牌的認知感
          • 增加用戶和訂單數量
          • 無縫的體驗
          • 讓健康的生活方式更加受歡迎、評價、容易取得,更加有趣而美好
          • 提供并教育用戶健康的生活方式,并轉化為愉快美好的生活

           

          目標人群

          根據產品團隊提供的數據,整理出了目標人群的特征:

          圖片

           

          II. 構思

          人物角色

          根據以上信息,整理出了兩個完全不同的人物角色:

          圖片圖片

           

          故事版

          沒有區分人物角色的故事版:

          圖片

          目標用戶的故事版:

          圖片

           

          體驗地圖

          思考分析用戶旅程的五個階段(探索網站、比較商品、確認下單、完成購買和接收配送)和用戶感知的三個方面(行為、思考和感知),制作了體驗地圖:

          圖片

          將當中的關鍵信息挑選出來:

          圖片

           

          競品分析

          設計師找到了三家主要競品,先大概了解他們的特色和優勢:

          圖片圖片圖片

          然后從 Google Play 的評論中尋找競品的問題,這樣就可以思考如何戰勝他們:

          圖片圖片

          P.S. 評論分析是一種簡單有效的競品分析利器(也可以用來分析自己的產品),具體方法我之前有分享過:別總想著數據分析/用戶調研,先把評論分析做了吧!

           

          III. 設計

          信息導航

          先把大致的用戶流程確定下來,這樣對整個產品就有了一個整體構思:

          圖片

           

          線框圖

          然后用手畫出線框圖,定下頁面的整體布局:

          圖片

           

          低保真

          將線框圖手稿用繪圖軟件細化,制作成低保真方案,用來向客戶展示和做用戶測試:

          圖片

          圖片

           

          IV. 完成

          可用性測試

          找用戶做測試時,用的是低保真可交互原型。

          根據測試發現的問題,設計師直接將優化方案運用到了高保真方案上,所以下面整理的問題都用高保真方案來配圖展示:

          • 1. 自動定位:測試之前用戶必須手動搜索位置。
          • 2. 屬性選擇:由于客戶想要一鍵式購物,所以當用戶點擊熟悉(通常是重量)右側的箭頭時,可以反轉卡片進行詳細選擇。

          圖片

          • 3. 促銷展示:原本設計了三個促銷區,但是測試中發現用戶面對大量的信息無法充分理解,所以移除了一部分,只保留了頭圖和分類優惠。

          • 4. 商品導航:為了避免用戶迷路,將商品分類導航放在了所有頁面頂部,并且懸停時展示子分類和相關文章。

           

          高保真

          圖片

           

          響應式

          這個網站需要具備很高的響應式能力,不論在 PC 端還是手機端,都能輕松使用。

          但由于 PC 端和手機端的尺寸相差太大了,所以不得不使用斷點(Breakpoint)來判斷用戶當前處在哪個端,并展示相應的界面。

          這個斷點的概念在柵格系統很常用到,指的是當界面尺寸縮小或增大到某個(或幾個)零界點時,間距大小或其它界面元素發生突變。

          圖片

          上圖來源:三種最主流的響應式柵格

           

          這個方案的對于移動端的特殊處理包括:

          • 確保商品分類的位置,方便用戶記憶
          • 使用漢堡菜單
          • 提供模仿原生 APP 的吸底導航

          圖片

           

          Before&After

          最后對比一下優化前后的方案:

          圖片

          圖片
          圖片
          圖片

          圖片

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

          轉載請注明:學UI網》重新設計東南亞頭部在線超市的真實案例

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

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

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

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




          日歷

          鏈接

          個人資料

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

          存檔

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