什么是柵格？我這里就不做說(shuō)明了。很多優(yōu)設(shè)的文章都寫(xiě)的很清晰了。這篇文章僅從我最開(kāi)始接觸柵格所遇到的困惑和部分設(shè)計(jì)師始終糾結(jié)的點(diǎn)來(lái)和大家一起討論討論。
B 端到底用什么尺寸進(jìn)行設(shè)計(jì)？
要弄清楚用什么尺寸設(shè)計(jì)，首先要確定布局。我們常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是這三者的延伸和拓展。上下布局一般是固定頂部，有點(diǎn)類似于 PC 網(wǎng)頁(yè)設(shè)計(jì)，實(shí)際上也差不多。現(xiàn)在的B端設(shè)計(jì)中很多都會(huì)搭配著這種布局用，比如幫助中心、消息通知，客戶入網(wǎng)申請(qǐng)等（這些我都遇見(jiàn)并做過(guò)）。左右布局和“T”字布局，一般固定左側(cè)，右側(cè)區(qū)域做自適應(yīng)。
我們看一下百度統(tǒng)計(jì)最新出來(lái)的當(dāng)前計(jì)算機(jī)分辨率數(shù)據(jù)，從統(tǒng)計(jì)的數(shù)據(jù)中可以看出，小尺寸的屏幕是越來(lái)越少了。但是不是我們就要用最小的尺寸或者用份額最大的 1920 進(jìn)行設(shè)計(jì)了？
顯然不是按照這個(gè)維度來(lái)確定尺寸的。對(duì)網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，設(shè)計(jì)師差不多都知道有一個(gè) 1200 有效內(nèi)容區(qū)域的說(shuō)法。如果沒(méi)有特殊要求，上下布局也是遵循這個(gè)原則的。設(shè)計(jì)師中絕大部分，包括我很多同事平時(shí)基本上用的 1920 和 1440 兩種尺寸來(lái)進(jìn)行設(shè)計(jì)。對(duì)于 B 端來(lái)說(shuō)，不管你采用 1920 或者 1440，在做上下布局頁(yè)面定寬設(shè)計(jì)的時(shí)候，遵循 1200 有效內(nèi)容區(qū)域這個(gè)原則就是沒(méi)有問(wèn)題的，看了很多文章上面舉例了 960、990、1024、1156 等等，大家都不用糾結(jié)，沒(méi)有特殊要求，這些都沒(méi)啥問(wèn)題。
上下布局在 B 端設(shè)計(jì)中是一個(gè)補(bǔ)充，有的可能有，有的可能沒(méi)有，所以用 1920 還是 1440 最好還是根據(jù)左右布局來(lái)，保持統(tǒng)一。兩年前我看過(guò)一篇大廠寫(xiě)的布局的文章，用的是 1280 的尺寸，記得是說(shuō)因?yàn)榭紤]縮小瀏覽器會(huì)發(fā)生遮擋或者擠壓（別問(wèn)我為啥還記得，因?yàn)楫?dāng)時(shí)對(duì)于尺寸糾結(jié)的太厲害，至今難以忘懷），現(xiàn)在因?yàn)榧夹g(shù)等方面的發(fā)展，個(gè)人認(rèn)為再用 1280 的做已經(jīng)不合適了。1440 的尺寸目前做中后臺(tái)是比較通用的，大家也可以參考看一下螞蟻 Ant Design。至于 1920 的用來(lái)設(shè)計(jì) B 端行不行呢？我認(rèn)為也是可以的，我就用過(guò)，也沒(méi)用戶反饋說(shuō)顯示有問(wèn)題，我就當(dāng)他沒(méi)問(wèn)題了。不過(guò)我還是建議大家在做 B端設(shè)計(jì)的時(shí)候用 1440 的來(lái)做，特別是用戶群很復(fù)雜的情況下，方便低分辨率的電腦查看。當(dāng)然如果我們給某一企業(yè)做定制服務(wù)，那就沒(méi)尺寸的問(wèn)題了，照著客戶電腦尺寸來(lái)就行了。
現(xiàn)在有很多插件可以進(jìn)行布局，軟件一般也有自帶布局功能。這里不做陳述：
這里介紹我常用的 sketch 布局。
這里我也創(chuàng)建了一個(gè) 1440 的網(wǎng)格系統(tǒng)，供大家參考，大家也可以根據(jù)自己的實(shí)際情況去建立自己的網(wǎng)格。
頂部高度沒(méi)有特殊要求建議不要超過(guò) 100px，我一般就是 60-80px 內(nèi)設(shè)定的；左側(cè)可以根據(jù)目錄內(nèi)容自己設(shè)定一下，一般 200 多就差不多了。邊距我一般設(shè)定 20px、24px。這樣再對(duì)剩下的距離做柵格就行了，列寬保持偶數(shù)即可。
有時(shí)候做柵格的時(shí)候會(huì)遇到一部分列寬是 42px，一部分列寬是 43px，這種設(shè)定也是可以的，回歸到柵格系統(tǒng)的意義，柵格本質(zhì)上不是為了保證像素級(jí)精確，而是為了保證瀏覽視覺(jué)級(jí)別的秩序、協(xié)調(diào)與統(tǒng)一，所以大家沒(méi)有必要糾結(jié)。
“沒(méi)有絕對(duì)正確的柵格設(shè)計(jì)，只有最適合的柵格設(shè)計(jì)”，希望這篇文章可以幫助對(duì)柵格有疑惑的設(shè)計(jì)師們，同時(shí)也期待大家留言，大家一起學(xué)習(xí)探討。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：神經(jīng)蛙
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
前言
表單是我們生活中常見(jiàn)的信息添加、錄入的方式之一，如何進(jìn)行表單的設(shè)計(jì)也是 B 端設(shè)計(jì)師的必修課。身邊別的部門的同事常常會(huì)說(shuō)：表單不就是幾個(gè)輸入框，幾個(gè)組件組成的東西么，挺簡(jiǎn)單的，有什么好設(shè)計(jì)的。但通常情況下，越是簡(jiǎn)單的東西，要思考的點(diǎn)卻越多，想要把一個(gè)表單做好也是一件不容易的事情。
生活中，大多數(shù)人都不喜歡表單，比如前段時(shí)間有一些許久沒(méi)有聯(lián)系過(guò)的朋友讓我?guī)兔μ顚?xiě)一下調(diào)查問(wèn)卷，作為一個(gè)熱心市民的我，自然是選擇點(diǎn)開(kāi)鏈接幫忙填寫(xiě)；一鼓作氣填了一段時(shí)間后，看著剩下的問(wèn)題，我不耐煩的放棄了填寫(xiě)這個(gè)調(diào)查問(wèn)卷。所以作為設(shè)計(jì)師，我們應(yīng)該“由內(nèi)而外”而不是“由外而內(nèi)”的去設(shè)計(jì)表單，如何讓表單變得更容易讓人接受也是設(shè)計(jì)師應(yīng)該考慮的問(wèn)題。
更多兆日UCD的干貨：
表單是一種用于信息添加、錄入的頁(yè)面類型。是連接用戶與數(shù)據(jù)庫(kù)的橋梁，通過(guò)引導(dǎo)用戶進(jìn)行信息的填寫(xiě)，從而提交數(shù)據(jù)給后臺(tái)。在用戶填寫(xiě)提交時(shí)，還需要對(duì)用戶輸入內(nèi)容進(jìn)行校驗(yàn)與反饋，保證用戶信息填寫(xiě)的完整度。
填寫(xiě)表單是一件麻煩事，當(dāng)我們想做的是投票、網(wǎng)上購(gòu)物或者添加好友之前，總是會(huì)有表單防礙著我們。正因?yàn)槎鄶?shù)人不喜歡填寫(xiě)表單，所以在做表單設(shè)計(jì)時(shí)，我們的首要目標(biāo)是讓人們迅速輕松的完成填寫(xiě)，同時(shí)獲得系統(tǒng)和用戶想要的東西。
1. 表單拆分
基礎(chǔ)表單中會(huì)有以下六個(gè)元素：
1. 標(biāo)簽：標(biāo)簽文本主要是解釋輸入項(xiàng)的含義，一般不宜太長(zhǎng)，需要簡(jiǎn)明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項(xiàng)。
2. 占位提示：直接展示在輸入項(xiàng)中，采用弱提示文本對(duì)所需信息描述，當(dāng)用戶輸入信息時(shí)即消失。
3. 校驗(yàn)：對(duì)輸入項(xiàng)進(jìn)行驗(yàn)證，并給出反饋提示，如：用戶未填寫(xiě)，格式錯(cuò)誤、內(nèi)容錯(cuò)誤等
4. 基礎(chǔ)組件：可交互輸入的區(qū)域，是構(gòu)成表單的核心內(nèi)容，主要有：輸入框、單（復(fù)）選框、上傳、時(shí)間選擇器、開(kāi)關(guān)……
5. 提示：描述該輸入項(xiàng)需要的輸入類型，如：上傳的文件類型
6. 按鈕：用戶完成輸入后，點(diǎn)擊按鈕進(jìn)行提交、進(jìn)入下一步等，按鈕一般是跟隨的最后一個(gè)輸入項(xiàng)后面，若輸入項(xiàng)超出一屏顯示，建議將按鈕懸浮固定在底部。
當(dāng)我們開(kāi)始制作某一表單的時(shí)候，我們需要強(qiáng)迫自己思考一下每個(gè)元素的 UI 問(wèn)題：
2. 表單錄入模式
表單根據(jù)錄入模式可以分為：?jiǎn)尾奖韱巍⒎植奖韱魏透呒?jí)表單
① 單步表單：
單步錄入指的是在一個(gè)頁(yè)面即可完成內(nèi)容輸入。使用于內(nèi)容較少，結(jié)構(gòu)簡(jiǎn)單的場(chǎng)景，我們常見(jiàn)的登錄頁(yè)就是典型的單步表單。
② 分步表單：
內(nèi)容較多、錄入內(nèi)容的方式差異較大的情況且業(yè)務(wù)本身具有流程化特性，一般通過(guò)添加分步導(dǎo)航展示內(nèi)容。常見(jiàn)的例如銀行轉(zhuǎn)賬，修改密碼等等。
③ 高級(jí)表單（分組表單）：
高級(jí)表單（分組表單）：主要用于需要一次性錄入大批量數(shù)據(jù)的場(chǎng)景。高級(jí)表單與分步表單有點(diǎn)類似，都是為了減輕用戶填寫(xiě)壓力，將填寫(xiě)內(nèi)容進(jìn)行分塊。不同的點(diǎn)在于，分步表單的流程化明顯，后一步填寫(xiě)的內(nèi)容都是基于前一步來(lái)填寫(xiě)、是前一步反饋。
3. 表單的頁(yè)面框架
表單的頁(yè)面框架指的是承載著整個(gè)表單頁(yè)的頁(yè)面框架，即：整頁(yè)式（新頁(yè)面）、彈窗式、側(cè)邊欄式。因?yàn)槠漤?yè)面面積大小不一樣，所以使用情境有所不同。
整頁(yè)式（新頁(yè)面）：最常用方式，適用于絕大部分的表單，可以支持構(gòu)建復(fù)雜的表單。
彈窗式：通過(guò)小面積的彈窗進(jìn)行輕量化的編輯，方便快速進(jìn)行增、刪、改、查；輸入項(xiàng)較少，一般不會(huì)有滾動(dòng)條。
側(cè)邊欄式：與彈窗式相似，通過(guò)小面積的側(cè)邊欄進(jìn)行編輯；可承載比彈窗更復(fù)雜一些的表單內(nèi)容，可以有滾動(dòng)條。
我們?cè)谶x擇頁(yè)面框架時(shí)通常需要綜合以下三個(gè)因素去考慮：
4. 表單的排列方式
① 布局方式
在制作表單的時(shí)候分成兩種排列方式：?jiǎn)瘟胁季趾投嗔胁季?。我們可以通過(guò)以下幾個(gè)因素去考慮使用什么布局：
1. 在輸入項(xiàng)不多的情況下，建議采用單列布局，因?yàn)閱瘟胁季?，用戶填?xiě)的路徑就是從上至下的一條直線，十分符合用戶的視覺(jué)動(dòng)線，能夠提高用戶瀏覽與填寫(xiě)的效率。
2. 多列布局的表單會(huì)導(dǎo)致用戶的視覺(jué)路徑變長(zhǎng)，用戶需以 “Z” 字形的視覺(jué)動(dòng)線掃描表單，會(huì)提高瀏覽與填寫(xiě)的效率，并且多列表單容易造成用戶填寫(xiě)時(shí)的混亂，易填錯(cuò)，體驗(yàn)差。
但是有時(shí)部分業(yè)務(wù)訴求和某些特性的場(chǎng)景要求，會(huì)需要在有限的空間上放入更多的控件來(lái)收集用戶的信息，這時(shí)就不得不使用多列布局的樣式，因?yàn)槎嗔心軌蚴】v向空間。
單列布局
優(yōu)勢(shì)：視覺(jué)路徑清晰，填寫(xiě)效率高，體驗(yàn)好；
劣勢(shì)：垂直空間占用率高。
建議使用場(chǎng)景：表單內(nèi)容較少的情況下使用單列布局
多列布局
優(yōu)勢(shì)：省空間，能夠放置更多的控件；
劣勢(shì)：視覺(jué)路徑模糊，填寫(xiě)成本高，填寫(xiě)易出錯(cuò)。
建議使用場(chǎng)景：關(guān)聯(lián)性強(qiáng)的填寫(xiě)項(xiàng)橫向排放，且將該列中最重要填寫(xiě)項(xiàng)的放于最左側(cè)。
② 標(biāo)簽對(duì)齊方式
標(biāo)簽的對(duì)齊方式有：左對(duì)齊、右對(duì)齊和頂對(duì)齊，除了需要考慮單列式布局還是多列式布局，還有我們也需要考慮標(biāo)簽的對(duì)齊方式。
馬泰奧·彭佐在 2006 年 7 月對(duì)表單的每種對(duì)齊方式做過(guò)眼動(dòng)測(cè)試研究，根據(jù)研究結(jié)論做出以下分析：
頂對(duì)齊標(biāo)簽：
研究中，從標(biāo)簽移動(dòng)到輸入框只需 50 毫秒。比左對(duì)齊標(biāo)簽快了 10 倍，后者需要 500 毫秒；比右對(duì)齊標(biāo)簽方式快 2 倍，后者高達(dá) 240 秒。能迅速填完頂對(duì)齊標(biāo)簽表單的原因之一，是因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行上下單向運(yùn)動(dòng)。
優(yōu)勢(shì)：眼動(dòng)測(cè)試中移動(dòng)速度最快，最有利于提高用戶填寫(xiě)表單的效率。標(biāo)簽字?jǐn)?shù)相比于左右對(duì)齊標(biāo)簽可容納更多字?jǐn)?shù)。
劣勢(shì)：縱向空間占用率高，對(duì)于小屏用戶不太友好（設(shè)計(jì)前需要考慮用戶使用場(chǎng)景以及使用設(shè)備）
建議使用場(chǎng)景：希望用戶快速完成表單；對(duì)標(biāo)簽的擴(kuò)展性高，有國(guó)際化需求（中文轉(zhuǎn)英文，英文會(huì)比較長(zhǎng)）；更適用于彈窗式、側(cè)邊欄式布局。
右對(duì)齊標(biāo)簽：
如果要盡量減少表單占用垂直屏幕空間，右對(duì)齊能提供快速完成時(shí)間。研究中，專家用戶和新手用戶掃視（眼睛運(yùn)動(dòng)）右對(duì)齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時(shí)間分別在 170 毫秒和 240 毫秒，而填寫(xiě)完成時(shí)間比左對(duì)齊快 2 倍。
優(yōu)勢(shì)：標(biāo)簽和輸入框位置緊密，更方便填寫(xiě)
劣勢(shì)：右對(duì)齊的布局會(huì)造成標(biāo)簽的左側(cè)不齊，影響快速閱讀表單的效率問(wèn)題；如果增加填寫(xiě)項(xiàng)標(biāo)題字?jǐn)?shù)過(guò)多，整體的表單頁(yè)都需要修改，右對(duì)齊靈活性低。
建議使用場(chǎng)景：適用于需要填寫(xiě)效率但受到屏幕垂直面積限制的頁(yè)面。更適用于整頁(yè)式布局。
左對(duì)齊標(biāo)簽：
在頂、右、左三種方案中，左對(duì)齊表單填寫(xiě)速度最慢。因?yàn)樽髮?duì)齊表單解析問(wèn)題時(shí)眼球定位次數(shù)最多，用戶一般情況下都能將左對(duì)齊布局中的標(biāo)簽和輸入框聯(lián)系起來(lái)，只是花費(fèi)時(shí)間較長(zhǎng)。在研究中，典型掃視時(shí)間為 500 毫秒，很長(zhǎng)說(shuō)明用戶經(jīng)歷了沉重的認(rèn)知壓力。
優(yōu)勢(shì)：易瀏覽標(biāo)簽；占用縱向空間較少
劣勢(shì)：標(biāo)簽和輸入框距離較大，表單填寫(xiě)效率低
建議使用場(chǎng)景：需要讓用戶認(rèn)真思考后填寫(xiě)的頁(yè)面；更適用于整頁(yè)式布局
輸入字段上方的粗體標(biāo)簽
在頂對(duì)齊的情況下，設(shè)計(jì)師可能會(huì)想：如果我們將標(biāo)簽進(jìn)行加重，這增加了它們的視覺(jué)重量，并將它們帶到了布局的最前面，這樣說(shuō)是不是可以讓用戶更好的去完成表單的填寫(xiě)呢？但事實(shí)卻和設(shè)想相反：粗體標(biāo)簽反而增加了用戶填寫(xiě)的負(fù)擔(dān)。
粗體標(biāo)簽導(dǎo)致從標(biāo)簽移動(dòng)到輸入字段的掃視時(shí)間增加了近 60% ，從沒(méi)有粗體標(biāo)簽的 50 毫秒到有粗體標(biāo)簽的 80 毫秒，更突出的標(biāo)簽沒(méi)有明顯優(yōu)勢(shì)。粗體標(biāo)簽更難讓用戶閱讀和感知——可能是因?yàn)榇煮w文本和輸入字段的相鄰粗邊框之間存在更多的視覺(jué)混淆。
小結(jié)
標(biāo)簽位置：?jiǎn)螐男式嵌瓤矗攲?duì)齊>右對(duì)齊>左對(duì)齊，但是根據(jù)應(yīng)用場(chǎng)景，效率快并不是我們選擇標(biāo)簽對(duì)齊方式的唯一的指標(biāo)。在大多數(shù)情況下，將標(biāo)簽放在輸入字段上方效果更好，頂對(duì)齊的情況下標(biāo)簽的擴(kuò)展性更高，且用戶不會(huì)被迫分開(kāi)查看標(biāo)簽和輸入字段。需要注意在視覺(jué)上將下一個(gè)輸入字段的標(biāo)簽與前一個(gè)輸入字段分開(kāi)。
粗體標(biāo)簽：閱讀粗體標(biāo)簽對(duì)用戶來(lái)說(shuō)有點(diǎn)困難，因此最好使用純文本標(biāo)簽。但是，當(dāng)使用粗體標(biāo)簽時(shí)，可能希望將輸入字段設(shè)置為沒(méi)有粗邊框。
1. 什么是表單的校驗(yàn)
為了讓用戶準(zhǔn)確的填寫(xiě)表單，在用戶填寫(xiě)表單中/填寫(xiě)表單后，常常會(huì)增加我們常說(shuō)的“反饋提示“，針對(duì)反饋信息的準(zhǔn)確性，我們會(huì)采用兩種校驗(yàn)形式：前端校驗(yàn)和后端校驗(yàn)。
① 前端校驗(yàn)：
主要負(fù)責(zé)校驗(yàn)輸入的內(nèi)容格式是否正確；例如常見(jiàn)的手機(jī)號(hào)格式是否正確、密碼格式是否符合要求。
② 后端校驗(yàn)：
與數(shù)據(jù)庫(kù)相關(guān)，主要負(fù)責(zé)校驗(yàn)輸入內(nèi)容是否正確；例如常見(jiàn)的手機(jī)號(hào)是否存在，密碼是否正確。
③ 校驗(yàn)觸發(fā)條件：
④ 報(bào)錯(cuò)方式：
2. 校驗(yàn)形式
根據(jù)不同的校驗(yàn)觸發(fā)條件和報(bào)錯(cuò)方式，我們可以組合成以下幾種校驗(yàn)形式：
① 輸入時(shí)即時(shí)驗(yàn)證，即時(shí)報(bào)錯(cuò)
用戶在輸入的過(guò)程中進(jìn)行實(shí)時(shí)驗(yàn)證，輸入框處于聚焦時(shí)開(kāi)始提示，隨著輸入的過(guò)程，符合要求后已與用戶通過(guò)驗(yàn)證的反饋。例如在注冊(cè)阿里云賬號(hào)時(shí)，設(shè)置密碼需要滿足三個(gè)條件，這里采取了即時(shí)驗(yàn)證。
優(yōu)點(diǎn)：可以實(shí)時(shí)告知用戶表單的填寫(xiě)時(shí)候符合規(guī)范
缺點(diǎn)：實(shí)時(shí)驗(yàn)證會(huì)使用戶分散注意力，也有可能會(huì)引起用戶的反感
使用場(chǎng)景：注冊(cè)時(shí)需要設(shè)置密碼，通過(guò)密碼不同的組成，時(shí)判斷密碼的強(qiáng)度，比如純數(shù)字密碼符合最低安全要求密碼，但增加大些字母和小寫(xiě)字母后就形成了更安全的密碼
② 失去焦點(diǎn)后即時(shí)報(bào)錯(cuò)
用戶在輸入完成后進(jìn)行驗(yàn)證，輸入框失去聚焦后（即用戶點(diǎn)擊輸入框以外的位置后）與用戶進(jìn)行反饋。例如在注冊(cè)網(wǎng)易郵箱時(shí)，填寫(xiě)完畢后即時(shí)報(bào)錯(cuò)。
優(yōu)點(diǎn)：為用戶修改錯(cuò)誤節(jié)省時(shí)間、避免出現(xiàn)很多錯(cuò)誤需要改正的情況。
缺點(diǎn)：如果輸入有誤，用戶需要多一步操作，點(diǎn)擊會(huì)有錯(cuò)誤的輸入框進(jìn)行修改。
使用場(chǎng)景：注冊(cè)用戶名時(shí)，取消聚焦后會(huì)反饋用戶名是否可用，不可用的情況下是被注冊(cè)還是格式有問(wèn)題。
③ 操作后（保存/提交/下一步）后全部報(bào)錯(cuò)
用戶完成表單填寫(xiě)后，點(diǎn)擊操作按鈕（保存/提交/下一步），系統(tǒng)將表單統(tǒng)一上傳到后端數(shù)據(jù)庫(kù)中進(jìn)行對(duì)比后集中與用戶進(jìn)行反饋。
優(yōu)點(diǎn)：減少對(duì)用戶的打擾，減少后端服務(wù)器壓力，提高效率
缺點(diǎn)：用戶只能點(diǎn)擊按鈕后才可以得到反饋，不能及時(shí)修改；若表單過(guò)長(zhǎng)，用戶返回修改的路徑也將增加。
使用場(chǎng)景：登錄賬號(hào)是判斷密碼是否正確
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：兆日UCD
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
標(biāo)簽: ui 界面設(shè)計(jì) 設(shè)計(jì)流行趨勢(shì) 社交APP
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
遙望app的設(shè)計(jì)在整體上的風(fēng)格化很強(qiáng)，有自己的獨(dú)特性。為了讓用戶之間的粘性更好，更是在活動(dòng)上、動(dòng)效上花了很多心思，給用戶帶來(lái)很多有趣且良好的體驗(yàn)，讓我?guī)闳ンw驗(yàn)一下吧
整個(gè)app的設(shè)計(jì)語(yǔ)言貫穿了星形、圓形和三角形 ，同時(shí)增加上面三種圖形的線性來(lái)點(diǎn)綴設(shè)計(jì)。tab圖標(biāo)是圓形和三角形的排列組合，同時(shí)增加線的形式點(diǎn)綴其中，層次更加豐富。其他頁(yè)面的設(shè)計(jì)也是同理，通過(guò)將上面3種圖形排列組合，貫穿到整個(gè)頁(yè)面，設(shè)計(jì)語(yǔ)言十分統(tǒng)一。
空界面的設(shè)計(jì)運(yùn)用手的動(dòng)作將每個(gè)頁(yè)面的情緒感拉的滿滿的，在互動(dòng)消息的版塊，從關(guān)注到@我，每一個(gè)頁(yè)面通過(guò)不同的情緒表達(dá)方式極大了緩解了用戶的焦慮，同時(shí)也增加了一些趣味性。
勛章是根據(jù)你的確幸值的多少，等級(jí)的高低，送禮物的多少，以及你在平臺(tái)的表現(xiàn)會(huì)給你發(fā)放不同的勛章，以此讓用戶享受到尊享和定制的感覺(jué)，增加用戶的參與感和在平臺(tái)的粘性。
遙望app的動(dòng)效設(shè)計(jì)也是十分的流暢和有趣，線性的風(fēng)格特征的插畫(huà)、溫暖的文案和趣味的動(dòng)效，帶來(lái)的絲滑體驗(yàn)感十分強(qiáng)烈。
遙望app首頁(yè)上面的頭像是匹配器，隨著頭像慢慢的流過(guò),頭像旁邊還有對(duì)話框彈出介紹用戶的信息，點(diǎn)擊會(huì)有兩只手彼此召喚，再點(diǎn)擊幸會(huì)就可以和其他的朋友打招呼了。在匹配器下面的“遙望一下”點(diǎn)擊也可進(jìn)入到好友快速閃過(guò)的頁(yè)面，點(diǎn)擊可以同樣到打招呼頁(yè)面，多個(gè)入口引導(dǎo)用戶相互吸引從而形成社交動(dòng)機(jī)。
加載的動(dòng)態(tài)效果加入了遙望的IP形象，一個(gè)是像地球一樣的自轉(zhuǎn)，一個(gè)是像風(fēng)箏一樣在天空飛的效果，動(dòng)態(tài)十分流暢且有趣。
記錄心情這個(gè)是個(gè)很有趣的設(shè)計(jì)細(xì)節(jié)，在記錄心情發(fā)表后，在查看心情的小罐子里就能夠看到你的心情小表情，并且還有心情占比、情緒波動(dòng)分析，最后在日歷上還能看到每日心情的狀態(tài)，可以很好的記錄每日的心情。
查看心情
放個(gè)氣球把心情寫(xiě)進(jìn)氣球發(fā)送出去，可以抒發(fā)自己的情緒。同時(shí)，你想自己接收就可以點(diǎn)收一個(gè)，出現(xiàn)氣球動(dòng)效加載，就會(huì)接收到別人發(fā)出的信息，不想要了，可以點(diǎn)放飛消息就沒(méi)有了。
收氣球
雖然泡泡這種形式很常見(jiàn)，但是遙望在細(xì)節(jié)處做的設(shè)計(jì)還是很用心，很容易觸動(dòng)用戶。發(fā)射泡泡很容易讓然想到泡泡相機(jī)，加上“biubiu”的音效，有很強(qiáng)的場(chǎng)景感。
配配app的設(shè)計(jì)可以說(shuō)是以IP形象為切入的設(shè)計(jì)，app里面有著各種各樣的表情和動(dòng)勢(shì)，生動(dòng)且逗比。而且配配在設(shè)計(jì)的時(shí)候會(huì)融入很多小的細(xì)節(jié)，也能帶給我們很多不一樣的感受。整個(gè)ip融入可以說(shuō)做的很徹底，能夠讓用戶的品牌感知十分深刻。
貼貼功能用了一個(gè)超大的特殊的文字字體設(shè)計(jì)，十分醒目，在瀑布流的頁(yè)面對(duì)用戶的信息區(qū)分的比較清楚，但是對(duì)于用戶的照片也形成了遮擋，有的時(shí)候并不是很好。發(fā)布貼貼的超大字體的設(shè)計(jì)很少有人這么設(shè)計(jì)，雖然看起來(lái)粗糙，但是卻與眾不同。
配配app讓人印象比較深刻的就是這個(gè)IP的形象了，在頁(yè)面的各種地方都能看到他，無(wú)論是在催促你、還是在悠閑的吃東西，還是舉起手或是一起打call，哪里都少不了它。它的設(shè)定非常生活化，也很貼近我們的日常，所以這樣才更夠親近。
點(diǎn)亮設(shè)計(jì)就是點(diǎn)擊后，寫(xiě)下一個(gè)故事就可以和其他用戶打招呼了，點(diǎn)亮后燈泡會(huì)發(fā)出光，然后有星星散落下來(lái)，將表情運(yùn)用在按鈕上也是很新穎的設(shè)計(jì)方法了。
發(fā)布動(dòng)態(tài)的功能IP會(huì)向你招招手，引導(dǎo)用戶參與發(fā)布動(dòng)態(tài)。
配配的動(dòng)態(tài)背景很有意思，打call、吃蘋(píng)果、打盹，根據(jù)不同用戶展示不同的動(dòng)態(tài)背景。
糖果app的設(shè)計(jì)在于匹配器和其他的很與眾不同，像是在一起炫舞的樣子，看起來(lái)很有場(chǎng)景感。糖果app的整體視覺(jué)風(fēng)格比較中規(guī)中矩，
不過(guò)有一些的功能設(shè)計(jì)和設(shè)計(jì)小細(xì)節(jié)值得體驗(yàn)一下。
糖果的首頁(yè)的匹配器設(shè)計(jì)是一群人在廣場(chǎng)上一起炫舞，然后各自擺著不同的怪異的姿勢(shì)，設(shè)計(jì)上十分新穎。
戀愛(ài)上上簽就像我們?nèi)ニ聫R里求姻緣一樣，通過(guò)搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛，最后終于連接上一個(gè)十分匹配的好友。
解憂罐子就是把心情放在罐子里，發(fā)送出去，別人可以看到你的罐子，然后你自己也可以做罐子發(fā)送給別人。
無(wú)聊嗶嗶雞就是一只雞不停的晃動(dòng)，可以發(fā)送一句消息直接可以連接到好友。
Blurrr app是一款功能強(qiáng)大的視頻剪輯軟件，Blurrr雖然是一款工具軟件，但是在配色和設(shè)計(jì)上還是十分大膽，熒光綠的顏色和黑色的結(jié)合，十分亮眼，里面的動(dòng)效也十分細(xì)膩，非常吸引人的眼球。
引導(dǎo)頁(yè)的設(shè)計(jì)用多彩的圖形設(shè)計(jì)+表情+動(dòng)效設(shè)計(jì)的方式，打造了靈動(dòng)的引導(dǎo)頁(yè)設(shè)計(jì)，形成了自己很獨(dú)特的風(fēng)格。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
一、Photoshop(Beta)版本安裝
PS的AI功能需要在Beta版本中才能使用，安裝過(guò)程很簡(jiǎn)單，可以從下列這個(gè)網(wǎng)址前往Adobe官網(wǎng)下載Photoshop(Beta)版本：
https://helpx.adobe.com/cn/photoshop/using/generative-fill.html
點(diǎn)擊「試用」按鈕，會(huì)調(diào)起電腦中的Creative Cloud應(yīng)用，正常來(lái)說(shuō)大家電腦里有Adobe軟件一般都會(huì)有Creative Cloud，沒(méi)下載的話按提示下載就可。
在Creative Cloud中找到①Beta應(yīng)用程序，點(diǎn)擊②安裝按鈕，再點(diǎn)擊③打開(kāi)按鈕，就可以啟動(dòng)Beta版PS啦！(我這里已經(jīng)安裝過(guò)，所以直接顯示了安裝按鈕)
Beta版PS白色的logo和有趣的啟動(dòng)頁(yè)面??
二、AI創(chuàng)意填充功能
Midjourney生成的圖默認(rèn)是方形，主體位于畫(huà)面的中央。如果我們想把主體的位置移到畫(huà)面左側(cè)或右側(cè)，需要花費(fèi)很大的精力，而PS(Beta)的AI創(chuàng)意填充功能可以很好解決這個(gè)痛點(diǎn)問(wèn)題！
下圖是在Midjourney中生成的例圖，人物在畫(huà)面的正中間，關(guān)鍵詞描述：
「A portal to another dimension, with a blonde woman dressed as space girl, cyber punk style, hyperrealism, 4k, natural light. --v 5.1」
如果我想在不摳像、不變形拉伸的情況下，把圖片變成橫版尺寸，并把人物移到畫(huà)面右邊，需要在PS(Beta)中怎么操作呢？
① 先把例圖拖到PS中，用[C]裁剪工具在畫(huà)布左邊拉一個(gè)空白。
② 切換到[M]選框工具，框選剛才拉出的空白畫(huà)布，下方會(huì)出現(xiàn)一個(gè)工具欄。
③ 點(diǎn)擊工具欄的第一個(gè)「創(chuàng)成式填充」按鈕，進(jìn)入到AI創(chuàng)意填充功能。
PS的創(chuàng)意填充看起來(lái)很像把Midjourney的輸入框移植到PS中，但功能上又和Midjourney不太一樣：
·PS的輸入框沒(méi)有復(fù)雜的指令，只需要輸入關(guān)鍵詞描述，就能夠在選區(qū)內(nèi)生成想要的內(nèi)容；
·支持不輸入內(nèi)容，直接點(diǎn)擊「生成」按鈕，AI會(huì)根據(jù)畫(huà)面周圍的內(nèi)容智能填充選區(qū)。
三、不輸入內(nèi)容直接生成
第一次體驗(yàn)我沒(méi)有輸入任何內(nèi)容，直接點(diǎn)擊PS的「生成」按鈕，一次能生成3張圖片。點(diǎn)擊左右箭頭可以切換查看3張圖，如果覺(jué)得不滿意可以再點(diǎn)擊「生成」，再生成3張?zhí)畛鋱D。
效果圖1??
效果圖2??
效果圖3??
第一次測(cè)試生成的圖片效果遠(yuǎn)超出預(yù)期，和原圖風(fēng)格也很接近，唯一不足的地方是和原圖拼接處有一條白線，看起來(lái)有點(diǎn)礙眼。
經(jīng)過(guò)多次嘗試后，終于發(fā)現(xiàn)了問(wèn)題所在：如果框選時(shí)剛好只選取了空白畫(huà)布，生成出來(lái)的新圖和原圖之間就會(huì)產(chǎn)生明顯的接縫。簡(jiǎn)單高效的解決方式是在框選畫(huà)布的時(shí)候多框一點(diǎn)點(diǎn)原圖。
這樣再點(diǎn)擊「生成」按鈕，運(yùn)算出來(lái)就會(huì)有很完美的過(guò)渡，看不出破綻。
四、輸入關(guān)鍵詞描述
體驗(yàn)完不輸入關(guān)鍵詞直接生成后，接下來(lái)體驗(yàn)一下輸入關(guān)鍵詞描述后生成的圖片效果如何～這次使用同樣的方法在例圖右側(cè)先拉出一個(gè)空白畫(huà)布，輸入關(guān)鍵詞描述：
「Particle effect, sense of technology」
生成的圖片效果很棒，和原圖完美地融合在一起，不得不服啊太厲害了！
效果圖1??
效果圖2??
右側(cè)的屬性欄會(huì)記錄你剛輸入的關(guān)鍵詞，可以隨時(shí)修改關(guān)鍵詞，點(diǎn)擊再次生成3張圖，依次類推，生成的所有圖都會(huì)保留下來(lái)，方便選擇。
最后
通過(guò)這次體驗(yàn)感覺(jué)PS的AI填充非常強(qiáng)大，而且效果很精準(zhǔn)，誰(shuí)能想到在PS中就能完成對(duì)一張圖的拉伸和智能填充。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
首先說(shuō)明，競(jìng)品調(diào)研的方法有很多，本文只提供一種方法供參考，建議大家活學(xué)活用。
建議從下面4個(gè)方面入手：
1）調(diào)研背景
主要說(shuō)一些為什么要調(diào)研，希望通過(guò)調(diào)研答達(dá)到什么樣的目的？是視覺(jué)升級(jí)、體驗(yàn)升級(jí)還是為了提升轉(zhuǎn)化率？只有了解為什么做調(diào)研這件事情，才能知道從哪幾個(gè)維度調(diào)研。
2）調(diào)研樣本
建議選幾個(gè)直接競(jìng)品，再選幾個(gè)優(yōu)秀的次要競(jìng)品也是可以的，可以幫助補(bǔ)齊盲點(diǎn)。
3）調(diào)研維度
調(diào)研維度要根據(jù)調(diào)研目的來(lái)確定，例如如果是為了視覺(jué)升級(jí)，那么調(diào)研維度主要就集中在視覺(jué)效果上，如果是體驗(yàn)升級(jí)，那么調(diào)研維度主要集中在交互體驗(yàn)層面。
所以維度的選擇一定是和此次調(diào)研的目的緊密相關(guān)的，不過(guò)，倒也不是說(shuō)如果是視覺(jué)升級(jí)就只調(diào)研視覺(jué)方面的內(nèi)容，而是咱們要有一個(gè)主要的調(diào)研方向，啥都想要，最后啥都做不好。
4）結(jié)論
結(jié)論是最重要的，畢竟，做這次的調(diào)研不就是為了這份結(jié)論嗎？所以最后一定要有結(jié)論，也就是咱們通過(guò)調(diào)研得到了什么結(jié)論。
我公司這個(gè)項(xiàng)目是做一個(gè)官網(wǎng)的改版，官網(wǎng)主要就改版主要目標(biāo)有兩個(gè)：
第一個(gè)目標(biāo)是視覺(jué)體驗(yàn)升級(jí)，拆解下來(lái)就是界面更好看，內(nèi)容更好找。
第二個(gè)目標(biāo)是提升用戶轉(zhuǎn)化率，更細(xì)致的拆解一下就是讓更多的用戶點(diǎn)擊【咨詢】按鈕。
可以得到關(guān)鍵詞：界面更好看、內(nèi)容更好找、咨詢客服的人數(shù)更多。
好，咱們繼續(xù)，下一步是找樣本。
前面提到過(guò)，樣本最好是直接競(jìng)品+間接競(jìng)品（主要是一線大廠競(jìng)品）。
所以這次調(diào)研我選擇了幾個(gè)直接競(jìng)品的官網(wǎng)，以及華為、飛書(shū)等這樣的做的比較優(yōu)秀的產(chǎn)品進(jìn)行輔助分析。
調(diào)研維度又可以分為兩大部分：整體結(jié)構(gòu)、內(nèi)容拆解。
了解整體架構(gòu)是每個(gè)競(jìng)品調(diào)研都離不開(kāi)的步驟，可以幫助我們快速了解行業(yè)內(nèi)的通識(shí)性做法，畢竟站在巨人的肩膀上才能看得更遠(yuǎn)嘛。
1）整體架構(gòu)
我當(dāng)時(shí)的做法是把主要競(jìng)品的官網(wǎng)都截圖下來(lái)，然后一個(gè)模塊一個(gè)模塊的去分析，其實(shí)看下來(lái)你會(huì)發(fā)現(xiàn)，大家的做法都是有跡可循的。
看下面的圖片，我把他們類似的模塊用同樣的顏色框出來(lái)，框出來(lái)后就會(huì)發(fā)現(xiàn)，哦，原來(lái)，這就是行業(yè)內(nèi)的通識(shí)性做法。
然后我把這種通識(shí)性做法歸納總結(jié)出來(lái)，發(fā)現(xiàn)，其實(shí)官網(wǎng)首頁(yè)可以劃分為四大板塊：
你看，看似有很多復(fù)雜內(nèi)容的官網(wǎng)， 其實(shí)也就這幾個(gè)模塊，這樣看是不是就清晰多了。
既然咱們通過(guò)架構(gòu)梳理來(lái)了官網(wǎng)的內(nèi)容，下一步就進(jìn)行內(nèi)容的拆解了，拆解什么內(nèi)容？就是拆解上面總結(jié)出來(lái)的規(guī)律呀。
2）內(nèi)容拆解
為啥要拆解內(nèi)容呢？
因?yàn)樵蹅兏?jìng)品分析的目的不就是要做到“人有我優(yōu)”嘛，咱們競(jìng)品分析是為了青出于藍(lán)而勝于藍(lán)呀，所以咱們不能直接抄人家的內(nèi)容，這是無(wú)效設(shè)計(jì)，咱們要做的是分析他們的優(yōu)點(diǎn)，然后借鑒，然后超越。
進(jìn)行內(nèi)容拆解的時(shí)候，建議先定幾個(gè)拆解維度，不然會(huì)沒(méi)有方向，這里我分了三個(gè)維度來(lái)進(jìn)行拆解：
我就拿【建立認(rèn)知】板塊來(lái)舉例。
官網(wǎng)首頁(yè)的建立認(rèn)知是什么？
是讓進(jìn)來(lái)的用戶對(duì)整個(gè)網(wǎng)站有一個(gè)基礎(chǔ)的認(rèn)知，顧客來(lái)了，對(duì)店鋪總要有一個(gè)第一印象吧。
通過(guò)前面的架構(gòu)拆解我們發(fā)現(xiàn)，首頁(yè)一般使用4種方法來(lái)對(duì)用戶建立認(rèn)知，哪四種？
banner、產(chǎn)品介紹、解決方案、產(chǎn)品優(yōu)勢(shì)
一個(gè)用戶看了banner，瀏覽了產(chǎn)品介紹和解決方案，看了產(chǎn)品優(yōu)勢(shì)，是不是對(duì)咱們的產(chǎn)品有了一個(gè)認(rèn)知了，這就是建立認(rèn)知的過(guò)程。
那么咱們?nèi)绾稳シ治瞿兀?br />
我的做法是一個(gè)個(gè)板塊分析，有些麻煩啊，但是相信我，值得。
下面我就拿建立認(rèn)知里面的“產(chǎn)品介紹”來(lái)舉例子，看看如何去分析產(chǎn)品介紹這個(gè)板塊。
使用3個(gè)維度來(lái)分析：
維度1：用戶訴求（用戶進(jìn)來(lái)之后的訴求）
產(chǎn)品介紹內(nèi)容是否有我需要的產(chǎn)品和功能？是否滿足我的需求？
維度2：業(yè)務(wù)策略（針對(duì)用戶訴求，業(yè)務(wù)是怎么解決的）
講清楚三個(gè)問(wèn)題，即“我們的產(chǎn)品是什么”、“我們能做什么”、“我們有什么優(yōu)勢(shì)“
維度3：常用表達(dá)形式（用什么樣的表達(dá)方式來(lái)實(shí)現(xiàn)策略）
拆解下來(lái)，是不是對(duì)產(chǎn)品介紹板塊很了解了，產(chǎn)品介紹板塊主要的目的就是為了講清楚咱們是誰(shuí)，咱們的優(yōu)勢(shì)啊。王婆賣瓜，瓜雖好，但是咱們得讓來(lái)的人知道咱們的瓜好呀，所以表達(dá)方式也是至關(guān)重要的，用什么形式去表達(dá)這個(gè)板塊呢？其實(shí)競(jìng)品已經(jīng)有了很好的解決方案，那就是上面描述的。
你看，這樣一通分析，其實(shí)你的方案就自然而出來(lái)了，你知道往哪個(gè)方向去使勁了，而不是看別人有啥咱們就做啥。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
在大數(shù)據(jù)盛行的今天，人們不僅僅講究以事實(shí)說(shuō)話，更愿意以數(shù)據(jù)講話。數(shù)據(jù)作為結(jié)果的直接衡量指標(biāo)，更真實(shí)、也更具有說(shuō)服力，那如何直觀的展示數(shù)據(jù)，幫助決策者做出正確決策或行動(dòng)，發(fā)揮數(shù)據(jù)最大的價(jià)值？可視化數(shù)據(jù)大屏應(yīng)運(yùn)而生，讓我們一起來(lái)談?wù)劙?
說(shuō)到數(shù)據(jù)大屏的時(shí)候，我們要先了解一下數(shù)據(jù)可視化，那什么叫做數(shù)據(jù)可視化呢？比較專業(yè)的解釋是利用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換成圖形或圖像在屏幕上顯示出來(lái)，并進(jìn)行交互處理的一種理論、方法和技術(shù)，它為我們研究、處理、分析數(shù)據(jù)提供了理論依據(jù)。
我們?nèi)说拇竽X處理視覺(jué)信息的速度比文字快幾萬(wàn)倍，將抽象的數(shù)據(jù)轉(zhuǎn)化成圖表、圖形能更快速幫助我們更快理解數(shù)據(jù)中的含義，趨勢(shì)以及相關(guān)性。
簡(jiǎn)單來(lái)說(shuō)，可視化數(shù)據(jù)大屏，將我們難以理解的抽象的數(shù)據(jù)概念以圖形化的形式展現(xiàn)，方便我們快速理解這些數(shù)據(jù)的含義，也方便這些重要的信息在最短的時(shí)間內(nèi)傳給最重要的人。
數(shù)據(jù)大屏可分為信息展示類、數(shù)據(jù)分析類、監(jiān)控預(yù)警類，多展示酷炫的效果，數(shù)據(jù)之間有層次區(qū)分，好的數(shù)據(jù)大屏是布局、色彩、圖表、動(dòng)效的綜合運(yùn)用。
數(shù)據(jù)可視化，讓很多員工從繁瑣復(fù)雜的數(shù)據(jù)工作中解脫過(guò)來(lái)，那它到底有什么優(yōu)點(diǎn)呢？
近幾年來(lái)，國(guó)家的相關(guān)法律政策相繼出臺(tái)，大數(shù)據(jù)企業(yè)的技術(shù)研發(fā)水平不斷提高，促使大數(shù)據(jù)行業(yè)市場(chǎng)規(guī)模從 2014 年的 212.5 億元增長(zhǎng)至 2020 年的 548.5 億元，數(shù)據(jù)可視化對(duì)于公司發(fā)現(xiàn)解鎖數(shù)據(jù)潛在價(jià)值意義重大。
有研究表明，人類可以用比處理文字快60000倍的速度來(lái)處理圖像，可視化能直觀呈現(xiàn)大量數(shù)據(jù)，以前企業(yè)員工檢測(cè)到數(shù)據(jù)進(jìn)行匯總分析需要數(shù)小時(shí)，可視化通過(guò)特定的格式來(lái)呈現(xiàn)大量數(shù)據(jù)幾乎不費(fèi)時(shí)間。
視覺(jué)形式的數(shù)據(jù)更易理解，數(shù)據(jù)可視化能快速顯示操作、運(yùn)營(yíng)與結(jié)果之間的關(guān)系。企業(yè)管理不是憑空作決定，正確的方式應(yīng)該是，依據(jù)所獲得的數(shù)據(jù)信息來(lái)做輔助分析，數(shù)據(jù)可視化內(nèi)容能讓管理人員和決策者清楚看清數(shù)據(jù)趨勢(shì)，快速制定及消化關(guān)鍵指標(biāo)。
比如當(dāng)上圖科學(xué)決策平臺(tái)的網(wǎng)絡(luò)總數(shù)特別時(shí)多，決策者可以快速調(diào)取相關(guān)數(shù)據(jù)找出異常原因 —— 是上次活動(dòng)運(yùn)營(yíng)推廣到位，故增加了很多用戶？也就是決策者可以通過(guò)異常數(shù)據(jù)快速鉆取數(shù)據(jù)，用來(lái)解釋正在發(fā)揮作用的運(yùn)營(yíng)條件或決策與所遇到的指標(biāo)之間的關(guān)系。
根據(jù)Aberdeen報(bào)告收集的信息，利用數(shù)據(jù)可視化的組織能夠及時(shí)訪問(wèn)信息的可能性比其他組織高28％。數(shù)據(jù)可視化有助于我們以客戶和投資者能理解的方式向他們提供信息，它比PPT更容易讓人理解，也能吸引那些對(duì)企業(yè)內(nèi)容運(yùn)作了解甚少的人。
比如上方的區(qū)域經(jīng)濟(jì)地圖，通過(guò)地圖與定位街道區(qū)域內(nèi)容、顏色結(jié)合的展示樣式，很容易看出各街道產(chǎn)值、稅收等，也更有場(chǎng)景感；居民可支配收入版塊，通過(guò)顏色區(qū)分、大小圓形、時(shí)間線來(lái)直觀展示居民收入變化內(nèi)容，形象且清晰。
制作數(shù)據(jù)可視化的工具有很多，最常見(jiàn)的就是Excel工具，非常容易上手，基本人人都會(huì)，操作簡(jiǎn)單，但它的缺點(diǎn)也很明顯，沒(méi)什么特色，靜態(tài)數(shù)據(jù)展示過(guò)于死板，樣式老舊。第二類是Python等編程類工具，這類優(yōu)點(diǎn)是碼數(shù)據(jù)速度快，自動(dòng)獲取，看起來(lái)很高端，但缺點(diǎn)也很明顯，如：學(xué)習(xí)成本高、學(xué)習(xí)比較困難、很難比較熟練的掌握等。
第三類就是SAAS類可視化工具，這類工具容易上手，操作簡(jiǎn)單、動(dòng)態(tài)數(shù)據(jù)自動(dòng)獲取、動(dòng)態(tài)效果無(wú)敵炫酷，不需要下載安裝，缺點(diǎn)就是部分渲染組件比較耗費(fèi)電腦配置。那我們今天就來(lái)推薦幾款常用的SAAS工具。
網(wǎng)易有數(shù)大數(shù)據(jù)是一個(gè)企業(yè)級(jí)的大屏大數(shù)據(jù)可視化展示系統(tǒng)平臺(tái)，具有深度的交互式數(shù)據(jù)探索。它有豐富的使用場(chǎng)景，支持?jǐn)?shù)據(jù)接入、數(shù)據(jù)導(dǎo)入處理、數(shù)據(jù)分析生成報(bào)告等，用戶無(wú)需編程，簡(jiǎn)單拖拽即可生成可視化圖表。缺點(diǎn)是數(shù)據(jù)探索性分析能力有限。
網(wǎng)易有數(shù)可視化實(shí)戰(zhàn)案例——業(yè)務(wù)安全大屏。通過(guò)大屏進(jìn)行業(yè)務(wù)安全監(jiān)控，清晰的展示各業(yè)務(wù)分布要點(diǎn)的數(shù)據(jù)情況，頂部實(shí)時(shí)更新各重要區(qū)域數(shù)據(jù)情況，銷量對(duì)比、售后情況，產(chǎn)品產(chǎn)比，以及用戶分布也有清晰的直觀展示。
FineBI作為一款商業(yè)智能（BI）軟件，擁有豐富的報(bào)表編輯和數(shù)據(jù)分析功能，同時(shí)它也支持可視化大屏的編輯。決策報(bào)表采用了畫(huà)布式操作界面，通過(guò)拖拉拽可以想成一個(gè)強(qiáng)大的、全面的可視化大屏，能實(shí)現(xiàn)在一個(gè)頁(yè)面整合不同的數(shù)據(jù)，完美的展示各類業(yè)務(wù)指標(biāo)，實(shí)現(xiàn)數(shù)據(jù)多維度分析。缺點(diǎn)是大屏組件不夠豐富，開(kāi)發(fā)拓展性不強(qiáng)，不支持云端托管等。
帆軟可視化實(shí)戰(zhàn)案例——銀行大屏駕駛艙。通過(guò)大屏直觀展示銀行存款、貸款數(shù)據(jù)，業(yè)務(wù)辦理詳情等，圖表形式展示內(nèi)部管理、外部管理情況，分行放貸統(tǒng)計(jì)情況等，便于數(shù)據(jù)管理查看及決策制定參考。
Data V是阿里云內(nèi)部的可視化大屏開(kāi)發(fā)平臺(tái)，同時(shí)面向開(kāi)發(fā)者和零基礎(chǔ)用戶，支持大屏圖形化編輯和在線編程開(kāi)發(fā)，可幫助非專業(yè)的工程師通過(guò)圖形化的界面搭建專業(yè)水準(zhǔn)的可視化應(yīng)用。
它有海量行業(yè)模板，DataV數(shù)據(jù)可視化設(shè)計(jì)團(tuán)隊(duì)會(huì)定期從大量真實(shí)項(xiàng)目中尋找優(yōu)質(zhì)場(chǎng)景，制作為模板，涵蓋媒體、零售、工業(yè)、電商、金融、防疫、氣象等多個(gè)行業(yè)，為用戶提供會(huì)議展覽、業(yè)務(wù)監(jiān)控、風(fēng)險(xiǎn)預(yù)警、地理信息分析等各種設(shè)計(jì)參考。
產(chǎn)品功能方面，它有豐富的可視化編輯工具，提供多種業(yè)務(wù)模塊級(jí)的非圖表組件，只要通過(guò)拖拉拽便可創(chuàng)造出專業(yè)的可視化應(yīng)用，另外豐富的組件庫(kù)與模板庫(kù)包含多種場(chǎng)景模板，簡(jiǎn)單修改即可快速投入使用。智能化工具擁有主題配色，一鍵美化、大屏智能生成等工具，快速解決在搭建可視化應(yīng)用時(shí)遇到的整體樣式配置困難。專業(yè)的地理信息可視化，支持地理軌跡、飛線、熱力分布、3D地球等效果，同時(shí)數(shù)據(jù)驅(qū)動(dòng)三維世界生成，低代碼交互配置將復(fù)雜邏輯可視化呈現(xiàn)，整體效果更炫酷。它還有靈活開(kāi)放的部署方式，支持多種發(fā)布方式，如：鏈接分享、二維碼發(fā)布；支持自定義組件接入；支持云上部署，也支持線上開(kāi)發(fā)。
DataV數(shù)據(jù)可視化實(shí)戰(zhàn)案例——智慧工廠生產(chǎn)控制大屏，綜合呈現(xiàn)了每個(gè)生產(chǎn)階段的生產(chǎn)狀態(tài)參數(shù)，將整個(gè)車間的情況匯總到一個(gè)調(diào)度控制中心，方便管理人員了解各階段的工作情況。
袋鼠云數(shù)據(jù)可視化EAsyV，擁有業(yè)內(nèi)領(lǐng)先的數(shù)據(jù)可視化大屏故事策劃、視覺(jué)設(shè)計(jì)、前端和數(shù)據(jù)開(kāi)發(fā)技術(shù)實(shí)力，尤其擅長(zhǎng)3D模型展示，基于GIS地理信息展示等。它里面有豐富的組件，樣式制作精美，支持多種不同類型的數(shù)據(jù)導(dǎo)入，還有動(dòng)態(tài)面板和交互功能，讓大屏看起來(lái)更靈動(dòng)。
EasyV數(shù)據(jù)可視化實(shí)戰(zhàn)案例——寧波圖書(shū)館可視化平臺(tái)。大屏包含人流分析監(jiān)測(cè)、讀者畫(huà)像分析、借閱行為洞察等，從多角度全面的幫助用戶及時(shí)把握?qǐng)鲳^運(yùn)營(yíng)效果，為其提供館內(nèi)建設(shè)與活動(dòng)運(yùn)營(yíng)的監(jiān)控分析服務(wù)。
深色的大屏設(shè)計(jì)能讓其數(shù)據(jù)顯示更明顯，也方便營(yíng)造科技感，另外大屏設(shè)計(jì)圖表文字的顏色要統(tǒng)一，避免出挑的內(nèi)容分散用戶注意力，使用圖片或者是動(dòng)態(tài)的背景，也可以讓大屏更有氛圍感。那除了這些，好的大屏還有哪些特質(zhì)呢？
首先是策劃有故事。從客戶的真實(shí)需求去梳理數(shù)據(jù)可視化內(nèi)部的視覺(jué)傳達(dá)，確保內(nèi)容傳達(dá)克制有條理，有重點(diǎn)、有故事。盡可能讓用戶花費(fèi)更少的時(shí)間獲取更多信息，完成數(shù)據(jù)空間到圖形空間的映射，讓數(shù)據(jù)的價(jià)值被看見(jiàn)。
如上方的品牌銷售數(shù)據(jù)大屏，銷售額與門店數(shù)，數(shù)據(jù)明顯，與銷售額相關(guān)內(nèi)容有季度線上線下銷售額，會(huì)員數(shù)、款式數(shù)量、爆款排行等，故這塊內(nèi)容排在左側(cè)。右側(cè)就是區(qū)域訂單、毛利統(tǒng)計(jì)。中間放用戶關(guān)心的地圖區(qū)域分布、爆款分析等內(nèi)容。
其次是可視化要有效率。通過(guò)工具軟件，數(shù)據(jù)可視化變得更簡(jiǎn)單高效，變得靈活易實(shí)現(xiàn)，多端適配，加入組件化的拖拉拽操作，加入了多種交互和遠(yuǎn)程控制，能有效率的實(shí)現(xiàn)海量數(shù)據(jù)實(shí)時(shí)同步，實(shí)現(xiàn)高效率、高質(zhì)量大屏交付。
最后是大屏要有數(shù)據(jù)價(jià)值。數(shù)據(jù)可視化最重要的還是要落實(shí)到數(shù)據(jù)上，脫離數(shù)據(jù)談美觀是不切實(shí)際的空想，數(shù)據(jù)可視化就是要充分利用并方大數(shù)據(jù)的價(jià)值，保證數(shù)據(jù)實(shí)時(shí)、全域、精準(zhǔn)、讓數(shù)據(jù)講話。
設(shè)計(jì)可視化數(shù)據(jù)大屏?xí)r我們?cè)O(shè)計(jì)師要抓住問(wèn)題的重點(diǎn)，即這樣設(shè)計(jì)出來(lái)的內(nèi)容能不能真的讓數(shù)據(jù)產(chǎn)生價(jià)值，能否經(jīng)得起業(yè)務(wù)部門推敲？是否為企業(yè)經(jīng)營(yíng)提供了幫助？思考完這些再去做的大屏更有價(jià)值，大屏做的酷炫是其次，能夠讓人一目了然的看見(jiàn)關(guān)鍵信息，聯(lián)想到業(yè)務(wù)實(shí)際，才是我們?cè)O(shè)計(jì)師最需要關(guān)注的方向。
文章來(lái)源：站酷 作者：知果日記YRrui
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
費(fèi)茨定律(Fitts'sLw)是一個(gè)描述人類運(yùn)行學(xué)的經(jīng)驗(yàn)公式，用于計(jì)算人們移動(dòng)手指或鼠標(biāo)等設(shè)備到某個(gè)目標(biāo)的時(shí)間，以考慮目標(biāo)大小和距離為主。
費(fèi)茨定律的公式是T=a+blog2(D/S+1)，其中T是時(shí)間，a和b是實(shí)驗(yàn)測(cè)得的常數(shù)，D是目標(biāo)的距離，S是目標(biāo)的大小。說(shuō)明了在給定目標(biāo)情況下，目標(biāo)距離越遠(yuǎn)，需要的時(shí)間越長(zhǎng)；在給定距離的情況下，目標(biāo)越小，需要的時(shí)間越長(zhǎng)。
費(fèi)茨定律廣泛地用于人機(jī)交互界面設(shè)計(jì)中，例如在B端常用的設(shè)計(jì)按鈕上，可根據(jù)該定律來(lái)選擇適當(dāng)?shù)哪繕?biāo)大小和間距，以使用戶更好地達(dá)到業(yè)務(wù)目標(biāo)。
比如在B端產(chǎn)品彈窗界面設(shè)計(jì)中，確定和取消按鈕都會(huì)放在右下角，使得用戶更容易點(diǎn)擊。確定按鈕更高頻故放在最右邊，視覺(jué)表現(xiàn)更明顯，使其更容易一眼點(diǎn)擊。此外，兩個(gè)按鈕之間的距離也很重要，因?yàn)樗鼤?huì)影響到用戶的點(diǎn)擊時(shí)間，為了讓用戶更容易進(jìn)行選擇，按 鈕間保持12px距離，避免用戶誤觸。
1956年美國(guó)心理學(xué)家喬治·米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人的短時(shí)記憶能力廣度為7±2個(gè)信息塊，記憶信息超過(guò)了該范圍就容易出錯(cuò)。因此心理學(xué)家把這個(gè)神奇的記憶容量規(guī)律稱為“7±2法則”。 在人機(jī)交互設(shè)計(jì)界面中，如果要引入新的元素或操作，應(yīng)該盡可能地減少其數(shù)量和復(fù)雜性，以便用戶更容易理解和記憶。
比如在B端卡片設(shè)計(jì)中的操作按鈕一般會(huì)控制在7-2法則即5個(gè)操作按鈕，若有其它操作會(huì)隱藏在更多按鈕里面，把頻次較高的按鈕放在一級(jí)展示中，頻次較少的按鈕放在二級(jí)浮窗展示中。通過(guò)分解復(fù)雜的任務(wù)和信息，減少冗余內(nèi)容使得用戶更容易理解且更快完成業(yè)務(wù)過(guò)程。
格式塔原理是心理學(xué)的一個(gè)概念，也廣泛應(yīng)用于設(shè)計(jì)領(lǐng)域中。該原理認(rèn)為人類大腦在處理感知信息時(shí)，會(huì)自動(dòng)將信息組織成具有整體性、完整性和結(jié)構(gòu)性的形態(tài)，即所謂的“格式塔”。
在設(shè)計(jì)中，格式塔原理有幾個(gè)常見(jiàn)應(yīng)用：
1.相似性原則：相似的事物更容易被視為一組，與不同的事物分離。因此，設(shè)計(jì)師可以使用相似的顏色、形狀、大小等元素來(lái)將相關(guān)的信息組織在一起，提高信息的可讀性和易用性。
2.接近性原則：接近的事物更容易被視為一組，與遠(yuǎn)離的事物分離。因此，設(shè)計(jì)師可以使用空間布局來(lái)將相關(guān)的信息組織在一起，提高信息的可讀性和易用性。
3.對(duì)稱性原則：人類大腦喜歡對(duì)稱和平衡的形態(tài)。因此，設(shè)計(jì)師可以使用對(duì)稱的布局來(lái)吸引用戶的注意力，提高視覺(jué)吸引力和美感。
4.閉合性原則：人類大腦傾向于將不完整的形狀視為完整的形狀。因此，設(shè)計(jì)師可以使用封閉的形狀來(lái)強(qiáng)調(diào)信息，使用戶更容易理解和記憶。
相似性原則的應(yīng)用比如在B端的卡片設(shè)計(jì)中，所有的卡片樣式相似在人腦理解中默認(rèn)會(huì)視為相同的一組數(shù)據(jù)。
接近性原則比如在B端的表單設(shè)計(jì)中，常常會(huì)將一組數(shù)據(jù)通過(guò)接近性原則組織在一起，提高信息易讀性。
對(duì)稱性原則常用在大屏與報(bào)表設(shè)計(jì)中，通過(guò)對(duì)稱性布局提高視覺(jué)美感，吸引用戶注意力。
閉合性原則常用于連續(xù)性表格或圖形等設(shè)計(jì)中，通過(guò)不連續(xù)性來(lái)讓用戶大腦形成封閉路徑強(qiáng)調(diào)后續(xù)可讀信息。
比如在下面的表格中通過(guò)形狀的不連續(xù)性反而讓用戶大腦更快感知到還有信息可以滾動(dòng)查看。
雅各布定律(Jacob'sLaw)是一條常被引用的交互設(shè)計(jì)法則，它由美國(guó)心理學(xué)家Donald Norman提出。該定律指出，人們?cè)谑褂萌魏涡孪到y(tǒng)時(shí)，都會(huì)將他們以前所經(jīng)驗(yàn)過(guò)的類似系統(tǒng)的知識(shí)應(yīng)用于新系統(tǒng)。
雅各布定律的核心思想是，在設(shè)計(jì)新系統(tǒng)時(shí)，應(yīng)該考慮到用戶的現(xiàn)有經(jīng)驗(yàn)和期望，并盡量避免創(chuàng)造完全不同的界面模式。這樣可以使用戶更容易理解和掌握新系統(tǒng)，并減少學(xué)習(xí)成本。
比如在B端設(shè)計(jì)中常用到的圖表編輯快鍵可以延用用戶在其他系統(tǒng)常用到的快捷鍵，如win或mac系統(tǒng)都常用到的快捷指令可復(fù)用到B端產(chǎn)品的快捷操作中。
防錯(cuò)原則(Principle of Fail--Safe or Fault-Tolerance)是一種設(shè)計(jì)思想，其目的是減少或避免因錯(cuò)誤或故障而導(dǎo)致的不良后果。它通常被用于設(shè)計(jì)高度可靠的系統(tǒng)或設(shè)備，以確保在錯(cuò)誤事故發(fā)生時(shí)，系統(tǒng)或設(shè)備仍然能夠繼續(xù)正常運(yùn)行，或者能夠平穩(wěn)地停止運(yùn)行，以避免進(jìn)一步的損害或危險(xiǎn)。
在界面設(shè)計(jì)中如設(shè)計(jì)可撤銷操作，通過(guò)系統(tǒng)中允許用戶執(zhí)行可撤銷操作，以避免因誤操作而導(dǎo)致的不良后果。
或在界面設(shè)計(jì)中常用到的反饋和提醒彈窗等操作，以幫助用戶及時(shí)發(fā)現(xiàn)錯(cuò)誤或故障，并采取適當(dāng)?shù)拇胧?
泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明確提出，也稱 「復(fù)雜性質(zhì)量守恒」。
該基本定律覺(jué)得：該定律認(rèn)為每一個(gè)過(guò)程都有其固定的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過(guò)這個(gè)點(diǎn)過(guò)程就不能再簡(jiǎn)化了，你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。
可以通過(guò)簡(jiǎn)約至上的隱藏、轉(zhuǎn)移、刪除等原則進(jìn)行用戶體驗(yàn)的提升。
早在14世紀(jì)，哲學(xué)家、圣方濟(jì)各會(huì)修士奧卡姆的威廉提出來(lái)了奧卡姆剃刀原理，這個(gè)原理說(shuō)的是“切勿浪費(fèi)較多東西去做較少的東西同樣可以做好的事情”，后來(lái)以一種更為廣泛的形式被人們知曉“如無(wú)必要，勿增實(shí)體”。
奧卡姆剃刀常用于兩種假說(shuō)的取舍上：如果對(duì)于同一現(xiàn)象有兩種不同的假說(shuō)，我們應(yīng)該采取比較簡(jiǎn)單的那一種。對(duì)于幾個(gè)功能相同的設(shè)計(jì)，在設(shè)計(jì)都可用的情況下，則選擇視覺(jué)干擾較少的設(shè)計(jì)。
在設(shè)計(jì)上則能夠指導(dǎo)我們對(duì)產(chǎn)品做減法，去減少不必要的元素，在進(jìn)行設(shè)計(jì)的時(shí)候，先分析用戶的的主流程是什么，流程內(nèi)的引導(dǎo)盡量弱化，沒(méi)有必要?jiǎng)t不增加。
比如在B端產(chǎn)品設(shè)計(jì)中的登錄頁(yè)面以登錄流程為核心，不需要增加其它沒(méi)必要的流程。
除了以上七大定律外，也有尼爾森的10大設(shè)計(jì)原則，與以上定律基本一致?？偠灾换ピO(shè)計(jì)規(guī)律的宗旨都是幫助設(shè)計(jì)師創(chuàng)造易用、高效、愉悅的用戶體驗(yàn)。在B端產(chǎn)品設(shè)計(jì)中，將交互定律貫穿于產(chǎn)品設(shè)計(jì)中可以提升產(chǎn)品易用性，降低學(xué)習(xí)成本，使產(chǎn)品更規(guī)范，對(duì)企業(yè)用戶的工作效率與商業(yè)價(jià)值都有積極的影響
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：麗創(chuàng)輕文
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
六、B端C化未來(lái)的設(shè)計(jì)方向
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：酷家樂(lè)UED
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wnxcall.com