柵格一直都是很多同學(xué)非常疑惑的地方，無論是柵格的日常使用，又或者是柵格在整個(gè)產(chǎn)品當(dāng)中的作用，一直以來都有非常多的疑惑，今天就來聊聊柵格在實(shí)際工作如何使用，以及產(chǎn)品之間究竟有何區(qū)別。

上期回顧：

其實(shí)在說柵格的使用，我們就在討論網(wǎng)頁(yè)當(dāng)中的布局方式，以及他們之間的不同點(diǎn)。

網(wǎng)頁(yè)的布局方式：

布局方式，本質(zhì)上就是去處理窗口寬度與網(wǎng)頁(yè)內(nèi)容的關(guān)系

用戶會(huì)使用瀏覽器打開不同尺寸的窗口寬度，而網(wǎng)頁(yè)內(nèi)容究竟應(yīng)該如何去適應(yīng)這些窗口尺寸？

通常會(huì)分為：固定布局、流式布局、自適應(yīng)布局、響應(yīng)式布局

1. 固定布局（Static Layout）

固定布局是一種最為簡(jiǎn)單的方式，它的設(shè)計(jì)邏輯是將頁(yè)面當(dāng)中的內(nèi)容 “寫死固定” 在屏幕上，內(nèi)容不會(huì)隨著本身窗口寬度進(jìn)行改變，所有元素都使用 px 作為基礎(chǔ)單位

當(dāng)然在固定布局當(dāng)中，窗口大小與頁(yè)面內(nèi)容會(huì)存在兩種基本關(guān)系：窗口過大則將頁(yè)面元素進(jìn)行居中，窗口過小則展示橫向滾動(dòng)條

固定布局的好處是這種方式相對(duì)簡(jiǎn)單，只需將頁(yè)面設(shè)計(jì)好即可，不會(huì)存在太多兼容性的問題（因?yàn)橐矇焊鶝]有考慮兼容性的相關(guān)問題）

固定布局通常出現(xiàn)在 老舊的政府項(xiàng)目、網(wǎng)頁(yè)的登錄注冊(cè)中

2. 流式布局（Liquid Layout）

流式布局是最基礎(chǔ)的變化布局，它的設(shè)計(jì)邏輯是將頁(yè)面當(dāng)中的元素設(shè)計(jì)成可以流動(dòng)的 “水” ，通過在頁(yè)面，設(shè)計(jì)不同的“杯子”容器來裝下頁(yè)面內(nèi)容

這里的“水”一般指的是 文字、圖標(biāo)、以及一些頁(yè)面重復(fù)出現(xiàn)的元素。而杯子通常是我們?cè)O(shè)計(jì)的容器，它高度固定，只會(huì)變化其寬度，比如卡片、外層容器控制寬度 等等...

因?yàn)椤氨印钡南拗?，也就?dǎo)致水會(huì)根據(jù)杯子的寬度進(jìn)行延展流動(dòng)，進(jìn)而形成流式布局

使用流式布局可以通過較低的開發(fā)成本，來實(shí)現(xiàn)一個(gè)頁(yè)面當(dāng)中多尺寸的小范圍適配，如果屏幕尺寸跨度較大，則會(huì)比較困難

而流式布局最常使用的方式就是通過柵格系統(tǒng)，來確定整個(gè)“杯子”的寬度，進(jìn)而讓“水”能夠在頁(yè)面當(dāng)中實(shí)時(shí)滾動(dòng)展示

這里有兩個(gè)需要注意的點(diǎn)：

在研發(fā)層面，杯子的大小是需要進(jìn)行限制的，通常會(huì)去設(shè)定它的最大值與最小值，當(dāng)它超過最大值則居中對(duì)齊，當(dāng)他

在流式布局當(dāng)中，窗口超過其最大值則固定左側(cè)，右側(cè)空白補(bǔ)充；窗口小于其最小值則展示橫向滾動(dòng)條

比如與上方同樣的案例，將頁(yè)面當(dāng)中內(nèi)容的文字實(shí)現(xiàn)成流式布局，并且將其流體布局的寬度限制為 200px - 120px，這時(shí)則會(huì)形成頁(yè)面的寬度變化，會(huì)導(dǎo)致內(nèi)容發(fā)生直接的變化

流動(dòng)的“水” 需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個(gè)寬度無法裝下如此多“水”的情況，通常我們可以使用 “...” 進(jìn)行標(biāo)注。這個(gè)思路后續(xù)在響應(yīng)式布局當(dāng)中也會(huì)體現(xiàn)

3. 自適應(yīng)布局（Adaptive Layout）

自適應(yīng)布局是將差別較大的屏幕尺寸，去創(chuàng)建多個(gè)不同的設(shè)計(jì)稿，每一個(gè)設(shè)計(jì)稿去對(duì)應(yīng) 一個(gè)用戶實(shí)際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設(shè)計(jì)方案

通俗一點(diǎn)來說，自適應(yīng)就是去單獨(dú)設(shè)計(jì)桌面端、平板端、移動(dòng)端的頁(yè)面，并且將它們?nèi)哌M(jìn)行獨(dú)立，而系統(tǒng)通過不同尺寸間的 屏幕斷點(diǎn)/瀏覽器 UA 等...（實(shí)際前端判斷遠(yuǎn)比這個(gè)更加復(fù)雜，但是為了方便理解可以暫且這么認(rèn)為），進(jìn)而適應(yīng)出不同的設(shè)計(jì)頁(yè)面

而通俗一點(diǎn)來說，自適應(yīng)是使用多套代碼去對(duì)應(yīng)多個(gè)頁(yè)面，并且都是在業(yè)務(wù)非常復(fù)雜的情況下進(jìn)行使用，在國(guó)內(nèi)當(dāng)中最常使用便是 桌面端與移動(dòng)端 的產(chǎn)品

比如 語(yǔ)雀 當(dāng)中的 桌面端與移動(dòng)端就是一個(gè)典型案例，他通過判斷用戶的使用設(shè)備，將頁(yè)面拆分為了，桌面端、移動(dòng)設(shè)備端、小程序（單獨(dú)設(shè)計(jì)適配的）。因此只需要將每種設(shè)備的設(shè)計(jì)思路分析清楚即可

自適應(yīng)布局與柵格

自適應(yīng)主要是表達(dá)多個(gè)設(shè)備尺寸下進(jìn)行切換的 布局方式，在不同的設(shè)備之間，也是需要去使用流式布局以及其他布局方式

而不同的設(shè)備之間，屏幕分辨率的差異就會(huì)涉及到一個(gè)關(guān)鍵點(diǎn)，屏幕斷點(diǎn)

屏幕斷點(diǎn)

屏幕斷點(diǎn)，又叫媒體查詢 @media，因?yàn)樵谡麄€(gè)設(shè)計(jì)當(dāng)中，屏幕尺寸是極其復(fù)雜的，除了我們常見的尺寸：1920、1080、1440、1366

用戶還可以通過調(diào)整窗口的大小，進(jìn)而改變網(wǎng)頁(yè)尺寸。而屏幕斷點(diǎn)，最主要是判斷屏幕的寬度，來確定目前的尺寸究竟應(yīng)該采取什么設(shè)計(jì)方案

比如在設(shè)計(jì)一款成熟的 B 端產(chǎn)品時(shí)，因?yàn)樯虡I(yè)的緣故我們作為各大平臺(tái)（釘釘、企微、飛書）的 ISV（合作上架），產(chǎn)品上架到不同平臺(tái)時(shí)，需要對(duì)不同平臺(tái)尺寸進(jìn)行調(diào)整，比如釘釘為 1024px、企微為 980px、飛書為 1280px，這時(shí)為了滿足用戶的實(shí)際場(chǎng)景，會(huì)將這幾類特殊的尺寸作為屏幕斷點(diǎn)進(jìn)行對(duì)應(yīng)的布局設(shè)計(jì)，以滿足不同產(chǎn)品當(dāng)中的最佳實(shí)踐

關(guān)于屏幕斷點(diǎn)的媒體查詢，是在前端 CSS3 代碼當(dāng)中，提供給用戶校驗(yàn)整個(gè)屏幕的寬度，比如在下圖前端代碼當(dāng)中，則代表在屏幕尺寸小于 480px 時(shí)，使用 字體大小為 16px

而確定斷點(diǎn)才是這其核心，這里給大家提供兩個(gè)思路，實(shí)際設(shè)計(jì)當(dāng)中還會(huì)更為復(fù)雜：

物理斷點(diǎn)：也就是屏幕當(dāng)中，已經(jīng)劃分好的斷點(diǎn)方式，比如顯示器的全寬大小、不同設(shè)備之間的屏幕分辨率差異

設(shè)計(jì)斷點(diǎn)：在設(shè)計(jì)過程當(dāng)中，一些必要的屏幕尺寸。比如上方講到不同平臺(tái)的設(shè)計(jì)問題

其實(shí)屏幕斷點(diǎn)不是最終目的，最終還是想通過屏幕斷點(diǎn)，將頁(yè)面當(dāng)中不同的不同元素的處理方式實(shí)現(xiàn)在設(shè)計(jì)稿中，如果不需要，完全可以不考慮增加屏幕斷點(diǎn)。

4. 響應(yīng)式布局（Responsive Layout）

這里先多聊一句，其實(shí)響應(yīng)式的大規(guī)模普及，是源自 2015 年 Google 的倡導(dǎo)（可以看到 Google 旗下的很多產(chǎn)品都采取的響應(yīng)式布局，例如 YouTube），它最初的目的非常簡(jiǎn)單，就是為了提高響應(yīng)式在移動(dòng)終端上的運(yùn)行效率。因?yàn)樵?2015 年時(shí)，安卓 生態(tài)下的屏幕尺寸多到可怕，以至于需要有一套解決辦法來讓用戶運(yùn)行并使用。

響應(yīng)式布局是確保一個(gè)頁(yè)面當(dāng)中所有的設(shè)備（桌面端、平板端、移動(dòng)端）都能夠展示出非常滿意的效果，進(jìn)行產(chǎn)生的一種技術(shù)方案。它更像是 流式布局與自適應(yīng)布局 的結(jié)合，它能夠通過對(duì)屏幕尺寸的快速響應(yīng)，進(jìn)而對(duì)頁(yè)面的內(nèi)容進(jìn)行更為細(xì)致的變化。

通俗一點(diǎn)來說就是通過一套代碼去實(shí)現(xiàn)多個(gè)頁(yè)面，并且將多個(gè)頁(yè)面的內(nèi)容進(jìn)行細(xì)化，進(jìn)而能夠快速適配多個(gè)設(shè)備。

對(duì)于多個(gè)設(shè)備，最主要是調(diào)整頁(yè)面柵格數(shù)量、水槽寬度、頁(yè)面距進(jìn)行適應(yīng)，比如在 YouTube 當(dāng)中，就是通過響應(yīng)式布局，讓頁(yè)面實(shí)時(shí)響應(yīng)進(jìn)行處理。

響應(yīng)式布局與柵格

比如以 Ant Design Pro 的頁(yè)面進(jìn)行拆解，你會(huì)發(fā)現(xiàn)它在 575、767、991 的尺寸中，頁(yè)面布局發(fā)生變化，然后根據(jù)屏幕斷點(diǎn)之間的頁(yè)面布局，采用向下兼容的適配方式，Ant design Pro 屏幕斷點(diǎn)可以劃分為 320、576、768、992、1200，響應(yīng)策略如下圖：

布局與柵格的關(guān)系

你會(huì)發(fā)現(xiàn)布局其實(shí)是依賴于柵格，而柵格的使用，正是由于不同的布局所導(dǎo)致。只有通過柵格，才能夠確定流式布局的比例、響應(yīng)式布局的變化方式，但是在 B 端產(chǎn)品當(dāng)中，并不是所有頁(yè)面都需要使用柵格，經(jīng)?？吹揭恍┳髌芳鋵?shí)是為了柵格而柵格

在 B 端產(chǎn)品當(dāng)中在，真正使用柵格的地方更多是工作臺(tái)、官網(wǎng)，而其他相對(duì)復(fù)雜的頁(yè)面是沒辦法使用柵格，而對(duì)我們每一個(gè)產(chǎn)品而言，可以優(yōu)化的點(diǎn)就是在屏幕尺寸較小的情況下，默認(rèn)讓整個(gè)產(chǎn)品導(dǎo)航菜單收起，以提供給用戶更多展示內(nèi)容。

文章來源：優(yōu)設(shè)網(wǎng)    作者：CE青年

什么是柵格？我這里就不做說明了。很多優(yōu)設(shè)的文章都寫的很清晰了。這篇文章僅從我最開始接觸柵格所遇到的困惑和部分設(shè)計(jì)師始終糾結(jié)的點(diǎn)來和大家一起討論討論。

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)等（這些我都遇見并做過）。左右布局和“T”字布局，一般固定左側(cè)，右側(cè)區(qū)域做自適應(yīng)。

根據(jù)布局確定明確設(shè)計(jì)尺寸范圍

我們看一下百度統(tǒng)計(jì)最新出來的當(dāng)前計(jì)算機(jī)分辨率數(shù)據(jù)，從統(tǒng)計(jì)的數(shù)據(jù)中可以看出，小尺寸的屏幕是越來越少了。但是不是我們就要用最小的尺寸或者用份額最大的 1920 進(jìn)行設(shè)計(jì)了？

顯然不是按照這個(gè)維度來確定尺寸的。對(duì)網(wǎng)頁(yè)設(shè)計(jì)來說，設(shè)計(jì)師差不多都知道有一個(gè) 1200 有效內(nèi)容區(qū)域的說法。如果沒有特殊要求，上下布局也是遵循這個(gè)原則的。設(shè)計(jì)師中絕大部分，包括我很多同事平時(shí)基本上用的 1920 和 1440 兩種尺寸來進(jìn)行設(shè)計(jì)。對(duì)于 B 端來說，不管你采用 1920 或者 1440，在做上下布局頁(yè)面定寬設(shè)計(jì)的時(shí)候，遵循 1200 有效內(nèi)容區(qū)域這個(gè)原則就是沒有問題的，看了很多文章上面舉例了 960、990、1024、1156 等等，大家都不用糾結(jié)，沒有特殊要求，這些都沒啥問題。

上下布局在 B 端設(shè)計(jì)中是一個(gè)補(bǔ)充，有的可能有，有的可能沒有，所以用 1920 還是 1440 最好還是根據(jù)左右布局來，保持統(tǒng)一。兩年前我看過一篇大廠寫的布局的文章，用的是 1280 的尺寸，記得是說因?yàn)榭紤]縮小瀏覽器會(huì)發(fā)生遮擋或者擠壓（別問我為啥還記得，因?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 的用來設(shè)計(jì) B 端行不行呢？我認(rèn)為也是可以的，我就用過，也沒用戶反饋說顯示有問題，我就當(dāng)他沒問題了。不過我還是建議大家在做 B端設(shè)計(jì)的時(shí)候用 1440 的來做，特別是用戶群很復(fù)雜的情況下，方便低分辨率的電腦查看。當(dāng)然如果我們給某一企業(yè)做定制服務(wù)，那就沒尺寸的問題了，照著客戶電腦尺寸來就行了。

如何來進(jìn)行柵格布局？

現(xiàn)在有很多插件可以進(jìn)行布局，軟件一般也有自帶布局功能。這里不做陳述：

這里介紹我常用的 sketch 布局。

這里我也創(chuàng)建了一個(gè) 1440 的網(wǎng)格系統(tǒng)，供大家參考，大家也可以根據(jù)自己的實(shí)際情況去建立自己的網(wǎng)格。

頂部高度沒有特殊要求建議不要超過 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í)精確，而是為了保證瀏覽視覺級(jí)別的秩序、協(xié)調(diào)與統(tǒng)一，所以大家沒有必要糾結(jié)。

“沒有絕對(duì)正確的柵格設(shè)計(jì)，只有最適合的柵格設(shè)計(jì)”，希望這篇文章可以幫助對(duì)柵格有疑惑的設(shè)計(jì)師們，同時(shí)也期待大家留言，大家一起學(xué)習(xí)探討。

文章來源：優(yōu)設(shè)網(wǎng)    作者：神經(jīng)蛙

前言

表單是我們生活中常見的信息添加、錄入的方式之一，如何進(jìn)行表單的設(shè)計(jì)也是 B 端設(shè)計(jì)師的必修課。身邊別的部門的同事常常會(huì)說：表單不就是幾個(gè)輸入框，幾個(gè)組件組成的東西么，挺簡(jiǎn)單的，有什么好設(shè)計(jì)的。但通常情況下，越是簡(jiǎn)單的東西，要思考的點(diǎn)卻越多，想要把一個(gè)表單做好也是一件不容易的事情。

生活中，大多數(shù)人都不喜歡表單，比如前段時(shí)間有一些許久沒有聯(lián)系過的朋友讓我?guī)兔μ顚懸幌抡{(diào)查問卷，作為一個(gè)熱心市民的我，自然是選擇點(diǎn)開鏈接幫忙填寫；一鼓作氣填了一段時(shí)間后，看著剩下的問題，我不耐煩的放棄了填寫這個(gè)調(diào)查問卷。所以作為設(shè)計(jì)師，我們應(yīng)該“由內(nèi)而外”而不是“由外而內(nèi)”的去設(shè)計(jì)表單，如何讓表單變得更容易讓人接受也是設(shè)計(jì)師應(yīng)該考慮的問題。

更多兆日UCD的干貨：

一、什么是表單

表單是一種用于信息添加、錄入的頁(yè)面類型。是連接用戶與數(shù)據(jù)庫(kù)的橋梁，通過引導(dǎo)用戶進(jìn)行信息的填寫，從而提交數(shù)據(jù)給后臺(tái)。在用戶填寫提交時(shí)，還需要對(duì)用戶輸入內(nèi)容進(jìn)行校驗(yàn)與反饋，保證用戶信息填寫的完整度。

填寫表單是一件麻煩事，當(dāng)我們想做的是投票、網(wǎng)上購(gòu)物或者添加好友之前，總是會(huì)有表單防礙著我們。正因?yàn)槎鄶?shù)人不喜歡填寫表單，所以在做表單設(shè)計(jì)時(shí)，我們的首要目標(biāo)是讓人們迅速輕松的完成填寫，同時(shí)獲得系統(tǒng)和用戶想要的東西。

二、如何進(jìn)行表單設(shè)計(jì)

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)證，并給出反饋提示，如：用戶未填寫，格式錯(cuò)誤、內(nèi)容錯(cuò)誤等

4. 基礎(chǔ)組件：可交互輸入的區(qū)域，是構(gòu)成表單的核心內(nèi)容，主要有：輸入框、單（復(fù)）選框、上傳、時(shí)間選擇器、開關(guān)……

5. 提示：描述該輸入項(xiàng)需要的輸入類型，如：上傳的文件類型

6. 按鈕：用戶完成輸入后，點(diǎn)擊按鈕進(jìn)行提交、進(jìn)入下一步等，按鈕一般是跟隨的最后一個(gè)輸入項(xiàng)后面，若輸入項(xiàng)超出一屏顯示，建議將按鈕懸浮固定在底部。

當(dāng)我們開始制作某一表單的時(shí)候，我們需要強(qiáng)迫自己思考一下每個(gè)元素的 UI 問題：

1. 這個(gè)元素是什么類型的？
2. 如何處理其他這類東西？
3. 元素之間有什么關(guān)系？
4. 通過合并相同類別元素或者擴(kuò)展該元素和其他元素之間的關(guān)系，能否簡(jiǎn)化設(shè)計(jì)？

2. 表單錄入模式

表單根據(jù)錄入模式可以分為：?jiǎn)尾奖韱?、分步表單和高?jí)表單

① 單步表單：

單步錄入指的是在一個(gè)頁(yè)面即可完成內(nèi)容輸入。使用于內(nèi)容較少，結(jié)構(gòu)簡(jiǎn)單的場(chǎng)景，我們常見的登錄頁(yè)就是典型的單步表單。

② 分步表單：

內(nèi)容較多、錄入內(nèi)容的方式差異較大的情況且業(yè)務(wù)本身具有流程化特性，一般通過添加分步導(dǎo)航展示內(nèi)容。常見的例如銀行轉(zhuǎn)賬，修改密碼等等。

③ 高級(jí)表單（分組表單）：

高級(jí)表單（分組表單）：主要用于需要一次性錄入大批量數(shù)據(jù)的場(chǎng)景。高級(jí)表單與分步表單有點(diǎn)類似，都是為了減輕用戶填寫壓力，將填寫內(nèi)容進(jìn)行分塊。不同的點(diǎn)在于，分步表單的流程化明顯，后一步填寫的內(nèi)容都是基于前一步來填寫、是前一步反饋。

3. 表單的頁(yè)面框架

表單的頁(yè)面框架指的是承載著整個(gè)表單頁(yè)的頁(yè)面框架，即：整頁(yè)式（新頁(yè)面）、彈窗式、側(cè)邊欄式。因?yàn)槠漤?yè)面面積大小不一樣，所以使用情境有所不同。

整頁(yè)式（新頁(yè)面）：最常用方式，適用于絕大部分的表單，可以支持構(gòu)建復(fù)雜的表單。

彈窗式：通過小面積的彈窗進(jìn)行輕量化的編輯，方便快速進(jìn)行增、刪、改、查；輸入項(xiàng)較少，一般不會(huì)有滾動(dòng)條。

側(cè)邊欄式：與彈窗式相似，通過小面積的側(cè)邊欄進(jìn)行編輯；可承載比彈窗更復(fù)雜一些的表單內(nèi)容，可以有滾動(dòng)條。

我們?cè)谶x擇頁(yè)面框架時(shí)通常需要綜合以下三個(gè)因素去考慮：

1. 內(nèi)容數(shù)量 ：內(nèi)容如果較多不適合使用彈窗式
2. 與原頁(yè)面關(guān)聯(lián)程度 ：需與原頁(yè)面關(guān)聯(lián)強(qiáng)建議使用彈窗式、側(cè)邊欄式
3. 表單的復(fù)雜程度： 一般高級(jí)表單、分組表單、分步驟表單、有表格聚合的表單、聯(lián)動(dòng)表單等都建議采用整頁(yè)式的框架來展現(xiàn)。

4. 表單的排列方式

① 布局方式

在制作表單的時(shí)候分成兩種排列方式：?jiǎn)瘟胁季趾投嗔胁季帧Ｎ覀兛梢酝ㄟ^以下幾個(gè)因素去考慮使用什么布局：

1. 在輸入項(xiàng)不多的情況下，建議采用單列布局，因?yàn)閱瘟胁季郑脩籼顚懙穆窂骄褪菑纳现料碌囊粭l直線，十分符合用戶的視覺動(dòng)線，能夠提高用戶瀏覽與填寫的效率。

2. 多列布局的表單會(huì)導(dǎo)致用戶的視覺路徑變長(zhǎng)，用戶需以 “Z” 字形的視覺動(dòng)線掃描表單，會(huì)提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時(shí)的混亂，易填錯(cuò)，體驗(yàn)差。

但是有時(shí)部分業(yè)務(wù)訴求和某些特性的場(chǎng)景要求，會(huì)需要在有限的空間上放入更多的控件來收集用戶的信息，這時(shí)就不得不使用多列布局的樣式，因?yàn)槎嗔心軌蚴】v向空間。

單列布局

優(yōu)勢(shì)：視覺路徑清晰，填寫效率高，體驗(yàn)好；

劣勢(shì)：垂直空間占用率高。

建議使用場(chǎng)景：表單內(nèi)容較少的情況下使用單列布局

多列布局

優(yōu)勢(shì)：省空間，能夠放置更多的控件；

劣勢(shì)：視覺路徑模糊，填寫成本高，填寫易出錯(cuò)。

建議使用場(chǎng)景：關(guān)聯(lián)性強(qiáng)的填寫項(xiàng)橫向排放，且將該列中最重要填寫項(xiàng)的放于最左側(cè)。

② 標(biāo)簽對(duì)齊方式

標(biāo)簽的對(duì)齊方式有：左對(duì)齊、右對(duì)齊和頂對(duì)齊，除了需要考慮單列式布局還是多列式布局，還有我們也需要考慮標(biāo)簽的對(duì)齊方式。

馬泰奧·彭佐在 2006 年 7 月對(duì)表單的每種對(duì)齊方式做過眼動(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)速度最快，最有利于提高用戶填寫表單的效率。標(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 毫秒，而填寫完成時(shí)間比左對(duì)齊快 2 倍。

優(yōu)勢(shì)：標(biāo)簽和輸入框位置緊密，更方便填寫

劣勢(shì)：右對(duì)齊的布局會(huì)造成標(biāo)簽的左側(cè)不齊，影響快速閱讀表單的效率問題；如果增加填寫項(xiàng)標(biāo)題字?jǐn)?shù)過多，整體的表單頁(yè)都需要修改，右對(duì)齊靈活性低。
建議使用場(chǎng)景：適用于需要填寫效率但受到屏幕垂直面積限制的頁(yè)面。更適用于整頁(yè)式布局。

左對(duì)齊標(biāo)簽：

在頂、右、左三種方案中，左對(duì)齊表單填寫速度最慢。因?yàn)樽髮?duì)齊表單解析問題時(shí)眼球定位次數(shù)最多，用戶一般情況下都能將左對(duì)齊布局中的標(biāo)簽和輸入框聯(lián)系起來，只是花費(fèi)時(shí)間較長(zhǎng)。在研究中，典型掃視時(shí)間為 500 毫秒，很長(zhǎng)說明用戶經(jīng)歷了沉重的認(rèn)知壓力。

優(yōu)勢(shì)：易瀏覽標(biāo)簽；占用縱向空間較少

劣勢(shì)：標(biāo)簽和輸入框距離較大，表單填寫效率低

建議使用場(chǎng)景：需要讓用戶認(rèn)真思考后填寫的頁(yè)面；更適用于整頁(yè)式布局

輸入字段上方的粗體標(biāo)簽

在頂對(duì)齊的情況下，設(shè)計(jì)師可能會(huì)想：如果我們將標(biāo)簽進(jìn)行加重，這增加了它們的視覺重量，并將它們帶到了布局的最前面，這樣說是不是可以讓用戶更好的去完成表單的填寫呢？但事實(shí)卻和設(shè)想相反：粗體標(biāo)簽反而增加了用戶填寫的負(fù)擔(dān)。

粗體標(biāo)簽導(dǎo)致從標(biāo)簽移動(dòng)到輸入字段的掃視時(shí)間增加了近 60% ，從沒有粗體標(biāo)簽的 50 毫秒到有粗體標(biāo)簽的 80 毫秒，更突出的標(biāo)簽沒有明顯優(yōu)勢(shì)。粗體標(biāo)簽更難讓用戶閱讀和感知——可能是因?yàn)榇煮w文本和輸入字段的相鄰粗邊框之間存在更多的視覺混淆。

小結(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ì)被迫分開查看標(biāo)簽和輸入字段。需要注意在視覺上將下一個(gè)輸入字段的標(biāo)簽與前一個(gè)輸入字段分開。

粗體標(biāo)簽：閱讀粗體標(biāo)簽對(duì)用戶來說有點(diǎn)困難，因此最好使用純文本標(biāo)簽。但是，當(dāng)使用粗體標(biāo)簽時(shí)，可能希望將輸入字段設(shè)置為沒有粗邊框。

三、表單校驗(yàn)形式

1. 什么是表單的校驗(yàn)

為了讓用戶準(zhǔn)確的填寫表單，在用戶填寫表單中/填寫表單后，常常會(huì)增加我們常說的“反饋提示“，針對(duì)反饋信息的準(zhǔn)確性，我們會(huì)采用兩種校驗(yàn)形式：前端校驗(yàn)和后端校驗(yàn)。

① 前端校驗(yàn)：

主要負(fù)責(zé)校驗(yàn)輸入的內(nèi)容格式是否正確；例如常見的手機(jī)號(hào)格式是否正確、密碼格式是否符合要求。

② 后端校驗(yàn)：

與數(shù)據(jù)庫(kù)相關(guān)，主要負(fù)責(zé)校驗(yàn)輸入內(nèi)容是否正確；例如常見的手機(jī)號(hào)是否存在，密碼是否正確。

③ 校驗(yàn)觸發(fā)條件：

1. 用戶輸入時(shí)進(jìn)行校驗(yàn)（例如：注冊(cè)輸入密碼時(shí)，實(shí)時(shí)顯示密碼強(qiáng)度）
2. 用戶輸入完成失去焦點(diǎn)時(shí)進(jìn)行校驗(yàn)（例如：注冊(cè)重復(fù)輸入密碼時(shí)，密碼與前一次輸入的是否一致）
3. 用戶輸入完成點(diǎn)擊操作按鈕時(shí)進(jìn)行校驗(yàn)（例如：注冊(cè)點(diǎn)擊提交時(shí)進(jìn)行校驗(yàn)，手機(jī)號(hào)已被注冊(cè)所以未通過注冊(cè)）

④ 報(bào)錯(cuò)方式：

1. 即時(shí)報(bào)錯(cuò)
2. 輸入完成后點(diǎn)擊 提交/下一步/保存 等操作后報(bào)錯(cuò)

2. 校驗(yàn)形式

根據(jù)不同的校驗(yàn)觸發(fā)條件和報(bào)錯(cuò)方式，我們可以組合成以下幾種校驗(yàn)形式：

① 輸入時(shí)即時(shí)驗(yàn)證，即時(shí)報(bào)錯(cuò)

用戶在輸入的過程中進(jìn)行實(shí)時(shí)驗(yàn)證，輸入框處于聚焦時(shí)開始提示，隨著輸入的過程，符合要求后已與用戶通過驗(yàn)證的反饋。例如在注冊(cè)阿里云賬號(hào)時(shí)，設(shè)置密碼需要滿足三個(gè)條件，這里采取了即時(shí)驗(yàn)證。

優(yōu)點(diǎn)：可以實(shí)時(shí)告知用戶表單的填寫時(shí)候符合規(guī)范

缺點(diǎn)：實(shí)時(shí)驗(yàn)證會(huì)使用戶分散注意力，也有可能會(huì)引起用戶的反感

使用場(chǎng)景：注冊(cè)時(shí)需要設(shè)置密碼，通過密碼不同的組成，時(shí)判斷密碼的強(qiáng)度，比如純數(shù)字密碼符合最低安全要求密碼，但增加大些字母和小寫字母后就形成了更安全的密碼

② 失去焦點(diǎn)后即時(shí)報(bào)錯(cuò)

用戶在輸入完成后進(jìn)行驗(yàn)證，輸入框失去聚焦后（即用戶點(diǎn)擊輸入框以外的位置后）與用戶進(jìn)行反饋。例如在注冊(cè)網(wǎng)易郵箱時(shí)，填寫完畢后即時(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è)還是格式有問題。

③ 操作后（保存/提交/下一步）后全部報(bào)錯(cuò)

用戶完成表單填寫后，點(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í)修改；若表單過長(zhǎng)，用戶返回修改的路徑也將增加。

使用場(chǎng)景：登錄賬號(hào)是判斷密碼是否正確

響應(yīng)百度服務(wù)化戰(zhàn)略，設(shè)計(jì)通過服務(wù)分發(fā)+供給的建設(shè)，為用戶提供發(fā)現(xiàn)、使用、復(fù)訪的閉環(huán)查詢服務(wù)體驗(yàn)。

藍(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.teruid.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ì)公司。

1.遙望app

1.視覺設(shè)計(jì)

遙望app的設(shè)計(jì)在整體上的風(fēng)格化很強(qiáng)，有自己的獨(dú)特性。為了讓用戶之間的粘性更好，更是在活動(dòng)上、動(dòng)效上花了很多心思，給用戶帶來很多有趣且良好的體驗(yàn)，讓我?guī)闳ンw驗(yàn)一下吧

2.設(shè)計(jì)語(yǔ)言

整個(gè)app的設(shè)計(jì)語(yǔ)言貫穿了星形、圓形和三角形 ，同時(shí)增加上面三種圖形的線性來點(diǎn)綴設(shè)計(jì)。tab圖標(biāo)是圓形和三角形的排列組合，同時(shí)增加線的形式點(diǎn)綴其中，層次更加豐富。其他頁(yè)面的設(shè)計(jì)也是同理，通過將上面3種圖形排列組合，貫穿到整個(gè)頁(yè)面，設(shè)計(jì)語(yǔ)言十分統(tǒng)一。

3.空界面設(shè)計(jì)

空界面的設(shè)計(jì)運(yùn)用手的動(dòng)作將每個(gè)頁(yè)面的情緒感拉的滿滿的，在互動(dòng)消息的版塊，從關(guān)注到@我，每一個(gè)頁(yè)面通過不同的情緒表達(dá)方式極大了緩解了用戶的焦慮，同時(shí)也增加了一些趣味性。

4.勛章設(shè)計(jì)

勛章是根據(jù)你的確幸值的多少，等級(jí)的高低，送禮物的多少，以及你在平臺(tái)的表現(xiàn)會(huì)給你發(fā)放不同的勛章，以此讓用戶享受到尊享和定制的感覺，增加用戶的參與感和在平臺(tái)的粘性。

2.動(dòng)效設(shè)計(jì)

遙望app的動(dòng)效設(shè)計(jì)也是十分的流暢和有趣，線性的風(fēng)格特征的插畫、溫暖的文案和趣味的動(dòng)效，帶來的絲滑體驗(yàn)感十分強(qiáng)烈。

1.匹配器

遙望app首頁(yè)上面的頭像是匹配器，隨著頭像慢慢的流過,頭像旁邊還有對(duì)話框彈出介紹用戶的信息，點(diǎn)擊會(huì)有兩只手彼此召喚，再點(diǎn)擊幸會(huì)就可以和其他的朋友打招呼了。在匹配器下面的“遙望一下”點(diǎn)擊也可進(jìn)入到好友快速閃過的頁(yè)面，點(diǎn)擊可以同樣到打招呼頁(yè)面，多個(gè)入口引導(dǎo)用戶相互吸引從而形成社交動(dòng)機(jī)。

2.下拉加載

加載的動(dòng)態(tài)效果加入了遙望的IP形象，一個(gè)是像地球一樣的自轉(zhuǎn)，一個(gè)是像風(fēng)箏一樣在天空飛的效果，動(dòng)態(tài)十分流暢且有趣。

3.記錄心情

記錄心情這個(gè)是個(gè)很有趣的設(shè)計(jì)細(xì)節(jié)，在記錄心情發(fā)表后，在查看心情的小罐子里就能夠看到你的心情小表情，并且還有心情占比、情緒波動(dòng)分析，最后在日歷上還能看到每日心情的狀態(tài)，可以很好的記錄每日的心情。

查看心情

3.彩蛋設(shè)計(jì)

1.放個(gè)氣球

放個(gè)氣球把心情寫進(jìn)氣球發(fā)送出去，可以抒發(fā)自己的情緒。同時(shí)，你想自己接收就可以點(diǎn)收一個(gè)，出現(xiàn)氣球動(dòng)效加載，就會(huì)接收到別人發(fā)出的信息，不想要了，可以點(diǎn)放飛消息就沒有了。

收氣球

2.發(fā)射泡泡

雖然泡泡這種形式很常見，但是遙望在細(xì)節(jié)處做的設(shè)計(jì)還是很用心，很容易觸動(dòng)用戶。發(fā)射泡泡很容易讓然想到泡泡相機(jī)，加上“biubiu”的音效，有很強(qiáng)的場(chǎng)景感。

2. 配配app

1.視覺設(shè)計(jì)

配配app的設(shè)計(jì)可以說是以IP形象為切入的設(shè)計(jì)，app里面有著各種各樣的表情和動(dòng)勢(shì)，生動(dòng)且逗比。而且配配在設(shè)計(jì)的時(shí)候會(huì)融入很多小的細(xì)節(jié)，也能帶給我們很多不一樣的感受。整個(gè)ip融入可以說做的很徹底，能夠讓用戶的品牌感知十分深刻。

2.文字字體

貼貼功能用了一個(gè)超大的特殊的文字字體設(shè)計(jì)，十分醒目，在瀑布流的頁(yè)面對(duì)用戶的信息區(qū)分的比較清楚，但是對(duì)于用戶的照片也形成了遮擋，有的時(shí)候并不是很好。發(fā)布貼貼的超大字體的設(shè)計(jì)很少有人這么設(shè)計(jì)，雖然看起來粗糙，但是卻與眾不同。

3.品牌融入

配配app讓人印象比較深刻的就是這個(gè)IP的形象了，在頁(yè)面的各種地方都能看到他，無論是在催促你、還是在悠閑的吃東西，還是舉起手或是一起打call，哪里都少不了它。它的設(shè)定非常生活化，也很貼近我們的日常，所以這樣才更夠親近。

2.動(dòng)效設(shè)計(jì)

1.點(diǎn)亮

點(diǎn)亮設(shè)計(jì)就是點(diǎn)擊后，寫下一個(gè)故事就可以和其他用戶打招呼了，點(diǎn)亮后燈泡會(huì)發(fā)出光，然后有星星散落下來，將表情運(yùn)用在按鈕上也是很新穎的設(shè)計(jì)方法了。

2.發(fā)布動(dòng)態(tài)

發(fā)布動(dòng)態(tài)的功能IP會(huì)向你招招手，引導(dǎo)用戶參與發(fā)布動(dòng)態(tài)。

3.動(dòng)態(tài)背景

配配的動(dòng)態(tài)背景很有意思，打call、吃蘋果、打盹，根據(jù)不同用戶展示不同的動(dòng)態(tài)背景。

3.糖果app

糖果app的設(shè)計(jì)在于匹配器和其他的很與眾不同，像是在一起炫舞的樣子，看起來很有場(chǎng)景感。糖果app的整體視覺風(fēng)格比較中規(guī)中矩，

不過有一些的功能設(shè)計(jì)和設(shè)計(jì)小細(xì)節(jié)值得體驗(yàn)一下。

1.廣場(chǎng)匹配器

糖果的首頁(yè)的匹配器設(shè)計(jì)是一群人在廣場(chǎng)上一起炫舞，然后各自擺著不同的怪異的姿勢(shì)，設(shè)計(jì)上十分新穎。

2.戀愛上上簽

戀愛上上簽就像我們?nèi)ニ聫R里求姻緣一樣，通過搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛，最后終于連接上一個(gè)十分匹配的好友。

3.解憂罐子

解憂罐子就是把心情放在罐子里，發(fā)送出去，別人可以看到你的罐子，然后你自己也可以做罐子發(fā)送給別人。

4.無聊嗶嗶雞

無聊嗶嗶雞就是一只雞不停的晃動(dòng)，可以發(fā)送一句消息直接可以連接到好友。

4.Blurrr app

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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.teruid.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版本中才能使用，安裝過程很簡(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)用，正常來說大家電腦里有Adobe軟件一般都會(huì)有Creative Cloud，沒下載的話按提示下載就可。

在Creative Cloud中找到①Beta應(yīng)用程序，點(diǎn)擊②安裝按鈕，再點(diǎn)擊③打開按鈕，就可以啟動(dòng)Beta版PS啦！(我這里已經(jīng)安裝過，所以直接顯示了安裝按鈕)

Beta版PS白色的logo和有趣的啟動(dòng)頁(yè)面??

二、AI創(chuàng)意填充功能

Midjourney生成的圖默認(rèn)是方形，主體位于畫面的中央。如果我們想把主體的位置移到畫面左側(cè)或右側(cè)，需要花費(fèi)很大的精力，而PS(Beta)的AI創(chuàng)意填充功能可以很好解決這個(gè)痛點(diǎn)問題！

下圖是在Midjourney中生成的例圖，人物在畫面的正中間，關(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」

如果我想在不摳像、不變形拉伸的情況下，把圖片變成橫版尺寸，并把人物移到畫面右邊，需要在PS(Beta)中怎么操作呢？

① 先把例圖拖到PS中，用[C]裁剪工具在畫布左邊拉一個(gè)空白。

② 切換到[M]選框工具，框選剛才拉出的空白畫布，下方會(huì)出現(xiàn)一個(gè)工具欄。

③ 點(diǎn)擊工具欄的第一個(gè)「創(chuàng)成式填充」按鈕，進(jìn)入到AI創(chuàng)意填充功能。

PS的創(chuàng)意填充看起來很像把Midjourney的輸入框移植到PS中，但功能上又和Midjourney不太一樣：

·PS的輸入框沒有復(fù)雜的指令，只需要輸入關(guān)鍵詞描述，就能夠在選區(qū)內(nèi)生成想要的內(nèi)容；

·支持不輸入內(nèi)容，直接點(diǎn)擊「生成」按鈕，AI會(huì)根據(jù)畫面周圍的內(nèi)容智能填充選區(qū)。

三、不輸入內(nèi)容直接生成

第一次體驗(yàn)我沒有輸入任何內(nèi)容，直接點(diǎn)擊PS的「生成」按鈕，一次能生成3張圖片。點(diǎn)擊左右箭頭可以切換查看3張圖，如果覺得不滿意可以再點(diǎn)擊「生成」，再生成3張?zhí)畛鋱D。

效果圖1??

效果圖2??

效果圖3??

第一次測(cè)試生成的圖片效果遠(yuǎn)超出預(yù)期，和原圖風(fēng)格也很接近，唯一不足的地方是和原圖拼接處有一條白線，看起來有點(diǎn)礙眼。

經(jīng)過多次嘗試后，終于發(fā)現(xiàn)了問題所在：如果框選時(shí)剛好只選取了空白畫布，生成出來的新圖和原圖之間就會(huì)產(chǎn)生明顯的接縫。簡(jiǎn)單高效的解決方式是在框選畫布的時(shí)候多框一點(diǎn)點(diǎn)原圖。

這樣再點(diǎn)擊「生成」按鈕，運(yùn)算出來就會(huì)有很完美的過渡，看不出破綻。

四、輸入關(guān)鍵詞描述

體驗(yàn)完不輸入關(guān)鍵詞直接生成后，接下來體驗(yàn)一下輸入關(guān)鍵詞描述后生成的圖片效果如何～這次使用同樣的方法在例圖右側(cè)先拉出一個(gè)空白畫布，輸入關(guān)鍵詞描述：

「Particle effect, sense of technology」

生成的圖片效果很棒，和原圖完美地融合在一起，不得不服啊太厲害了！

效果圖1??

效果圖2??

右側(cè)的屬性欄會(huì)記錄你剛輸入的關(guān)鍵詞，可以隨時(shí)修改關(guān)鍵詞，點(diǎn)擊再次生成3張圖，依次類推，生成的所有圖都會(huì)保留下來，方便選擇。

最后

通過這次體驗(yàn)感覺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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.teruid.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ì)公司。

一、競(jìng)品調(diào)研的結(jié)構(gòu)

首先說明，競(jìng)品調(diào)研的方法有很多，本文只提供一種方法供參考，建議大家活學(xué)活用。

建議從下面4個(gè)方面入手：

1）調(diào)研背景
主要說一些為什么要調(diào)研，希望通過調(diào)研答達(dá)到什么樣的目的？是視覺升級(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)研目的來確定，例如如果是為了視覺升級(jí)，那么調(diào)研維度主要就集中在視覺效果上，如果是體驗(yàn)升級(jí)，那么調(diào)研維度主要集中在交互體驗(yàn)層面。
所以維度的選擇一定是和此次調(diào)研的目的緊密相關(guān)的，不過，倒也不是說如果是視覺升級(jí)就只調(diào)研視覺方面的內(nèi)容，而是咱們要有一個(gè)主要的調(diào)研方向，啥都想要，最后啥都做不好。

4）結(jié)論
結(jié)論是最重要的，畢竟，做這次的調(diào)研不就是為了這份結(jié)論嗎？所以最后一定要有結(jié)論，也就是咱們通過調(diào)研得到了什么結(jié)論。

二、實(shí)例拆解

1、調(diào)研背景

我公司這個(gè)項(xiàng)目是做一個(gè)官網(wǎng)的改版，官網(wǎng)主要就改版主要目標(biāo)有兩個(gè)：

第一個(gè)目標(biāo)是視覺體驗(yàn)升級(jí)，拆解下來就是界面更好看，內(nèi)容更好找。
第二個(gè)目標(biāo)是提升用戶轉(zhuǎn)化率，更細(xì)致的拆解一下就是讓更多的用戶點(diǎn)擊【咨詢】按鈕。

可以得到關(guān)鍵詞：界面更好看、內(nèi)容更好找、咨詢客服的人數(shù)更多。

好，咱們繼續(xù)，下一步是找樣本。

2、調(diào)研樣本

前面提到過，樣本最好是直接競(jìng)品+間接競(jìng)品（主要是一線大廠競(jìng)品）。
所以這次調(diào)研我選擇了幾個(gè)直接競(jìng)品的官網(wǎng)，以及華為、飛書等這樣的做的比較優(yōu)秀的產(chǎn)品進(jìn)行輔助分析。

3、選取調(diào)研維度

調(diào)研維度又可以分為兩大部分：整體結(jié)構(gòu)、內(nèi)容拆解。

了解整體架構(gòu)是每個(gè)競(jìng)品調(diào)研都離不開的步驟，可以幫助我們快速了解行業(yè)內(nèi)的通識(shí)性做法，畢竟站在巨人的肩膀上才能看得更遠(yuǎn)嘛。

1）整體架構(gòu)
我當(dāng)時(shí)的做法是把主要競(jìng)品的官網(wǎng)都截圖下來，然后一個(gè)模塊一個(gè)模塊的去分析，其實(shí)看下來你會(huì)發(fā)現(xiàn)，大家的做法都是有跡可循的。
看下面的圖片，我把他們類似的模塊用同樣的顏色框出來，框出來后就會(huì)發(fā)現(xiàn)，哦，原來，這就是行業(yè)內(nèi)的通識(shí)性做法。

然后我把這種通識(shí)性做法歸納總結(jié)出來，發(fā)現(xiàn)，其實(shí)官網(wǎng)首頁(yè)可以劃分為四大板塊：

• 常規(guī)內(nèi)容：head、foot
• 建立認(rèn)知：banner、產(chǎn)品介紹、解決方案、產(chǎn)品優(yōu)勢(shì)
• 增加信任：客戶評(píng)價(jià)、客戶案例、新聞資訊、行業(yè)認(rèn)可
• 轉(zhuǎn)化：免費(fèi)試用、在線咨詢、電話咨詢
  

你看，看似有很多復(fù)雜內(nèi)容的官網(wǎng)， 其實(shí)也就這幾個(gè)模塊，這樣看是不是就清晰多了。

既然咱們通過架構(gòu)梳理來了官網(wǎng)的內(nèi)容，下一步就進(jìn)行內(nèi)容的拆解了，拆解什么內(nèi)容？就是拆解上面總結(jié)出來的規(guī)律呀。


2）內(nèi)容拆解

為啥要拆解內(nèi)容呢？
因?yàn)樵蹅兏?jìng)品分析的目的不就是要做到“人有我優(yōu)”嘛，咱們競(jìng)品分析是為了青出于藍(lán)而勝于藍(lán)呀，所以咱們不能直接抄人家的內(nèi)容，這是無效設(shè)計(jì)，咱們要做的是分析他們的優(yōu)點(diǎn)，然后借鑒，然后超越。

進(jìn)行內(nèi)容拆解的時(shí)候，建議先定幾個(gè)拆解維度，不然會(huì)沒有方向，這里我分了三個(gè)維度來進(jìn)行拆解：

• 用戶訴求：用戶的需求、疑問或者想達(dá)到的目標(biāo)
• 業(yè)務(wù)策略：針對(duì)用戶訴求，網(wǎng)站做出的一系列解決方案
• 表達(dá)形式：完成業(yè)務(wù)策略的交互/視覺展現(xiàn)方式

我就拿【建立認(rèn)知】板塊來舉例。

官網(wǎng)首頁(yè)的建立認(rèn)知是什么？

是讓進(jìn)來的用戶對(duì)整個(gè)網(wǎng)站有一個(gè)基礎(chǔ)的認(rèn)知，顧客來了，對(duì)店鋪總要有一個(gè)第一印象吧。

通過前面的架構(gòu)拆解我們發(fā)現(xiàn)，首頁(yè)一般使用4種方法來對(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)知的過程。
那么咱們?nèi)绾稳シ治瞿兀?br /> 我的做法是一個(gè)個(gè)板塊分析，有些麻煩啊，但是相信我，值得。

下面我就拿建立認(rèn)知里面的“產(chǎn)品介紹”來舉例子，看看如何去分析產(chǎn)品介紹這個(gè)板塊。

使用3個(gè)維度來分析：
維度1：用戶訴求（用戶進(jìn)來之后的訴求）
產(chǎn)品介紹內(nèi)容是否有我需要的產(chǎn)品和功能？是否滿足我的需求？
維度2：業(yè)務(wù)策略（針對(duì)用戶訴求，業(yè)務(wù)是怎么解決的）
講清楚三個(gè)問題，即“我們的產(chǎn)品是什么”、“我們能做什么”、“我們有什么優(yōu)勢(shì)“
維度3：常用表達(dá)形式（用什么樣的表達(dá)方式來實(shí)現(xiàn)策略）

• 分點(diǎn)描述：減少大段落文字，分點(diǎn)描述，增強(qiáng)閱讀性，降低理解成本
• 提煉賣點(diǎn)：將核心功能提煉出來，吸引用戶注意力，精準(zhǔn)打擊，結(jié)合圖標(biāo)提升可讀性
• 試用入口：視覺上強(qiáng)化按鈕，引導(dǎo)轉(zhuǎn)化
• 圖文結(jié)合：圖＞文，可視化表達(dá)降低理解成本，增強(qiáng)臨場(chǎng)感

拆解下來，是不是對(duì)產(chǎn)品介紹板塊很了解了，產(chǎn)品介紹板塊主要的目的就是為了講清楚咱們是誰(shuí)，咱們的優(yōu)勢(shì)啊。王婆賣瓜，瓜雖好，但是咱們得讓來的人知道咱們的瓜好呀，所以表達(dá)方式也是至關(guān)重要的，用什么形式去表達(dá)這個(gè)板塊呢？其實(shí)競(jìng)品已經(jīng)有了很好的解決方案，那就是上面描述的。

你看，這樣一通分析，其實(shí)你的方案就自然而出來了，你知道往哪個(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.teruid.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ì)公司。