近跟一些在做B端產(chǎn)品的小伙伴閑聊，發(fā)下大家初做B端產(chǎn)品存在的普遍問題是：明明網(wǎng)上有不少可參考的設(shè)計(jì)規(guī)范總結(jié)歸納的已經(jīng)很詳細(xì)了，但是到真正使用的時(shí)候還是會(huì)存在這樣或那樣的問題，到底用哪個(gè)好呢？還有沒有更好的設(shè)計(jì)方案呢，這也是我一直在思考的問題，不斷嘗試推翻，嘗試推翻……

目錄：

1. 輸入框的不同狀態(tài)
2. 輸入框的暗提示用法
3. 輸入框字?jǐn)?shù)限制的不同用法
4. 輸入框?qū)捀叩难诱故褂?/li>
5. 畫重點(diǎn)

好了，廢話不多說了！我們就從表單中最基礎(chǔ)的組件輸入框說起吧！

輸入框的不同狀態(tài)

那么關(guān)于輸入框的不同狀態(tài)分為：未輸入、已輸入、只讀不可修改、系統(tǒng)信息帶入可修改、禁用、鼠標(biāo)懸停、輸入激活、可清空、加載

1. 系統(tǒng)自動(dòng)錄入信息

未輸入和已輸入這里我們暫不多說，大家都比較清楚了。

那么當(dāng)系統(tǒng)自動(dòng)帶出數(shù)據(jù)信息的時(shí)候輸入框通常采用的是只讀狀態(tài)，只讀狀態(tài)分為可修改和不可修改2種形式，不可修改我們通常會(huì)將輸入框的背景色調(diào)節(jié)成灰色，而可修改狀態(tài)的顯示方式跟用戶已輸入后的狀態(tài)顯示是一致的。只讀不可修改的狀態(tài)常用于系統(tǒng)自動(dòng)帶出的文本數(shù)據(jù)及數(shù)字輸入相關(guān)計(jì)算的總和數(shù)據(jù)。

如下圖舉例：

男女?dāng)?shù)量分別需要用戶手動(dòng)輸入，而合計(jì)人數(shù)則是系統(tǒng)自動(dòng)計(jì)算錄入的。

2. 禁用狀態(tài)

禁用狀態(tài)通常是表單中不需要用戶錄入信息的輸入框采用此類狀態(tài)，需要用灰色背景及灰色字來進(jìn)行區(qū)分。

3. 輸入信息的操作態(tài)

操作態(tài)分為：鼠標(biāo)懸停——鼠標(biāo)點(diǎn)擊——信息錄入——信息自動(dòng)檢索——信息清空。

鼠標(biāo)懸停：當(dāng)鼠標(biāo)移動(dòng)到輸入框上會(huì)有一個(gè)激活的狀態(tài)，如上圖的鼠標(biāo)懸停狀態(tài)，輸入框的邊框顏色變藍(lán)。

鼠標(biāo)點(diǎn)擊：當(dāng)鼠標(biāo)點(diǎn)擊之后變藍(lán)的輸入框外側(cè)會(huì)溢出半透明的顏色描邊，光標(biāo)會(huì)變成相對(duì)應(yīng)的藍(lán)色。

這2種狀態(tài)配合使用，會(huì)讓整個(gè)操作反饋更加細(xì)膩，目前市面上常見的用法是2者配合或者只采用一種狀態(tài)不做細(xì)節(jié)區(qū)分。

加載：加載一般多用于輸入框內(nèi)的搜索過程，其他地方的運(yùn)用似乎很少見。其優(yōu)點(diǎn)是提升系統(tǒng)反饋的細(xì)膩度，尤其是當(dāng)網(wǎng)絡(luò)不佳的狀態(tài)下，動(dòng)態(tài)加載給用戶一定的未知預(yù)期。如果沒有則用戶無感知，也不知道系統(tǒng)下一步要做什么。

那么利用加載的自身優(yōu)勢，其實(shí)我們可以賦予輸入框更多的信息功能。例如在輸入框內(nèi)還可以放置特定的功能圖標(biāo)，例如幫助按鈕，點(diǎn)擊幫助按鈕后系統(tǒng)自動(dòng)加載并彈出幫助說明。

這里在IOS的APP STORE也有應(yīng)用，有興趣的同學(xué)可以把玩一下。可清空：可清空的狀態(tài)是用戶想要快捷刪除所輸入的信息，在輸入框右側(cè)放置一個(gè)刪除按鈕能夠快捷的進(jìn)行刪除，并進(jìn)入二次輸入模式

4. 輸入框狀態(tài)的拓展使用

當(dāng)我們輸入較多的文本時(shí)，由于輸入框的寬度及使用場景的局限，無法預(yù)覽到全部輸入內(nèi)容時(shí)，但又想能夠展示出輸入后的文本以遍用戶查看，此時(shí)就需要拓展輸入框的狀態(tài)了。

如下圖所示：

我們可以設(shè)計(jì)出輸入框的展開狀態(tài)，鼠標(biāo)懸停時(shí)觸發(fā)展開效果，且在右下角放置清空按鈕便于用戶隨時(shí)更改輸入信息。

注意：這里輸入框的展開是從下往上展開！

輸入框的暗提示用法

輸入框的暗提示用法通常分為框內(nèi)提示、框外提示、校驗(yàn)提示。

（1）框內(nèi)提示

出現(xiàn)在輸入框內(nèi)部的文本，為淺灰色。需要注意的是暗提示描述用語，如下圖所示：

例如：請輸入字段標(biāo)簽，與字段標(biāo)簽的標(biāo)題重復(fù)，這種重復(fù)性的暗提示是不必要的。此時(shí)如果沒有其他文本能夠做解釋說明，那么暗提示只顯示請輸入即可，如果能夠更詳細(xì)的進(jìn)行解釋說明，我們則可以詳細(xì)的加1以說明，比如：請根據(jù)XX進(jìn)行輸入。當(dāng)然具體還是要根據(jù)實(shí)際運(yùn)用場景來設(shè)定文本內(nèi)容。

（2）框外提示

框外提示包括：框外文本提示、框外圖標(biāo)提示、隱藏提示。

框外文本提示：文本置于輸入框外側(cè)下方位置，也采用灰色系。

如下圖所示：

其優(yōu)點(diǎn)是包容性強(qiáng)，可以運(yùn)用于字?jǐn)?shù)限制、更詳細(xì)的解釋說明、超鏈接等。

注意：文本外側(cè)的暗提示是可以與框內(nèi)暗提示一起使用的。

框外圖標(biāo)提示：分為圖標(biāo)提示、隱藏氣泡提示、下拉框提升、頂部浮層提示。

如下圖所示：

圖標(biāo)提示：一般用于提示文本較多的情況使用，比如當(dāng)框外文本超過一行時(shí)，又不想用多行進(jìn)行展示就可以采用圖標(biāo)提示。

隱藏氣泡提示：當(dāng)鼠標(biāo)懸停到輸入框上時(shí)輸入框上方出現(xiàn)氣泡提示，適用于提示文本較少的情況。另外氣泡提示的位置可根據(jù)使用場景變動(dòng)，具體可參考螞蟻規(guī)范，這里就不多講了。

下拉提示：也是經(jīng)常使用的，例如用戶在輸入手機(jī)號(hào)時(shí)，如果系統(tǒng)之前自動(dòng)記錄過歷史輸入信息，則下拉提示就會(huì)出現(xiàn)，用戶只需點(diǎn)擊一下，無需重新輸入。其拓展用法時(shí)輸入與搜索相關(guān)聯(lián)，用戶只需要輸入關(guān)鍵字，即可下拉展示出多個(gè)關(guān)聯(lián)信息，這里暫不細(xì)講了，在后續(xù)系列文章中會(huì)重點(diǎn)講輸入框與枚舉結(jié)合的多種復(fù)雜用法，敬請期待。

浮層提示：位于輸入框的上方，同樣是用于輸入框內(nèi)輸入內(nèi)容較多的情況時(shí)使用的。功能與前文中介紹的輸入框的展開狀態(tài)有點(diǎn)類似。如果純文本展示更推薦用輸入框的展開狀態(tài)，如果是標(biāo)簽展示則推薦用浮層，如下圖所示：

（3）校驗(yàn)提示

輸入框的校驗(yàn)狀態(tài)分為：輸入正確校驗(yàn)、輸入錯(cuò)誤校驗(yàn)、輸入警告。

輸入正確校驗(yàn)：當(dāng)輸入框的文本輸入正確的時(shí)候，通常的處理方式是不會(huì)有任何提示，反而當(dāng)輸入錯(cuò)誤的時(shí)候會(huì)提示錯(cuò)誤信息。當(dāng)然如果想要加強(qiáng)用戶輸入正確的正向反饋通常在輸入框右側(cè)放置勾號(hào)的圖標(biāo)，如下圖所示：

輸入錯(cuò)誤校驗(yàn)：當(dāng)用戶輸入錯(cuò)誤的時(shí)候最常見的設(shè)計(jì)方式是輸入框的顏色變紅，輸入框下方出現(xiàn)文字提示。這里不建議配合使用下拉浮層，因?yàn)楫?dāng)表單結(jié)果較為復(fù)雜且密集的時(shí)候，下拉浮層會(huì)遮擋掉下一行的輸入框信息。我們只需要采用紅色的錯(cuò)誤提示文字即可，無需配置圖標(biāo)。

輸入警告：關(guān)于輸入警告，這里我并沒有加校驗(yàn)二字，是因?yàn)榫嫘ｒ?yàn)使用頻率遠(yuǎn)不如錯(cuò)誤校驗(yàn)，基本上錯(cuò)誤校驗(yàn)已然能夠很好的解決問題了，警告校驗(yàn)似乎顯得比較多余。

例如上圖第一行右側(cè)的輸入框，其常見于市面上能夠見到的規(guī)范設(shè)定中，但其使用率確及低。其原因就是它的強(qiáng)調(diào)程度過高，基本與錯(cuò)誤校驗(yàn)提示并不太大區(qū)別。

那么警告提示要如何使用呢？

這里我們可以借鑒移動(dòng)端產(chǎn)品的使用方式。通常我們在輸入對(duì)應(yīng)的字段的時(shí)候，可根據(jù)輸入的不同內(nèi)容進(jìn)行校驗(yàn)，比如金額超過了XX元，可能導(dǎo)致無法XX。又不需要采用錯(cuò)誤校驗(yàn)這么強(qiáng)的提示，這個(gè)時(shí)候警告提示與框外提示文本就能夠更好的結(jié)合使用。只需要采用黃色文字來突出警告提示語即可。

輸入框字?jǐn)?shù)限制的不同用法

關(guān)于輸入框的數(shù)字限制，我們最常見的就是文本域多行輸入框，其在右下角會(huì)顯示字?jǐn)?shù)限制。

如下圖所示：

那么如果是單行文本框的字?jǐn)?shù)限制要如何設(shè)計(jì)呢？

有三種方式：

1. 輸入框內(nèi)末尾提示：當(dāng)輸入字?jǐn)?shù)錯(cuò)誤的時(shí)候提示數(shù)字變紅；
2. 框外文本提示：設(shè)置對(duì)應(yīng)的字?jǐn)?shù)限制信息，輸入錯(cuò)誤時(shí)直接變換為錯(cuò)誤校驗(yàn)樣式；
3. 框內(nèi)文本提示：框內(nèi)的暗提示直接顯示限制字?jǐn)?shù)信息，其缺陷是不適合再添加其他暗提示信息了。

輸入框?qū)捀叩难诱故褂?/h1>

由于B端產(chǎn)品的特性，其業(yè)務(wù)屬性相當(dāng)復(fù)雜。僅有的基礎(chǔ)輸入框的寬高已經(jīng)無法滿足日益復(fù)雜的業(yè)務(wù)需求。為了讓輸入框的可用性更佳，我們可以對(duì)輸入框的高度和寬度進(jìn)行不同尺寸的設(shè)定。

1. 對(duì)輸入框的高度設(shè)定

在市面上常見的設(shè)計(jì)規(guī)范中，對(duì)輸入框的高度設(shè)定通常分為3個(gè)不同的尺寸，如下圖所示：

大號(hào)尺寸通常為40px、常規(guī)尺寸為32px、小型尺寸通常為28px或24px等。對(duì)應(yīng)不同尺寸如何的運(yùn)用常見在規(guī)范上確并沒有詳細(xì)說明，實(shí)際運(yùn)用的案例中也較為少見。那么為了對(duì)比其差異我提取了最大號(hào)的輸入框高度40px和最小號(hào)的輸入框24px，在同一復(fù)雜使用場景下所呈現(xiàn)的效果進(jìn)行比對(duì)，如下圖所示：

我們可以看到40px高度的輸入框所呈現(xiàn)的效果明顯比24px的輸入框所呈現(xiàn)的效果擁擠，小號(hào)的留白空間更大，整個(gè)區(qū)域的透氣性更佳。那么對(duì)應(yīng)不同高度的輸入框如何運(yùn)用詳細(xì)大家也都有了判斷。

2. 對(duì)輸入框的寬度設(shè)定

對(duì)于輸入框的寬度設(shè)定，大家一定都有過困惑，當(dāng)頁面需要采用多列的形式進(jìn)行展示，采用相同寬度的輸入框并不能達(dá)到節(jié)省空間的目的，而且在遇到復(fù)雜的業(yè)務(wù)組件的時(shí)候固定寬度的輸入框更是無法滿足業(yè)務(wù)功能的特殊需求。

那么我們要如何設(shè)定輸入框的寬度呢？

這里我們就需要運(yùn)用到刪格化系統(tǒng)對(duì)輸入框的寬度進(jìn)行定義了，如下圖所示：

我們先來了解下基礎(chǔ)的刪格知識(shí)，首先1pt=1px,由于屏幕分辨率是X和Y坐標(biāo)相乘的結(jié)果，所以在2倍分辨率下1pt=4px，以此類推在3倍分辨率下1pt=9px網(wǎng)頁的基礎(chǔ)刪格單位是8pt

如上述推理可得：

• 在@1x 分辨率下8pt=8px
• 在@2x分辨率下8pt=32px
• 在@3x分辨率下8pt=72px

而我們看到的網(wǎng)頁通常采用的是@2x分辨率，所以我們在設(shè)定輸入框的寬度則需要設(shè)置成：8pt=32px=4px*8px。

也就是4和8的倍數(shù)，如下圖所示：

畫重點(diǎn)

關(guān)于輸入框的基礎(chǔ)設(shè)計(jì)細(xì)節(jié)主要講了：

1. 關(guān)于輸入框的不同狀態(tài)分為：未輸入、已輸入、只讀不可修改、系統(tǒng)信息帶入可修改、禁用、鼠標(biāo)懸停、輸入激活、可清空、加載、輸入信息的操作態(tài)，以及輸入框狀態(tài)的拓展使用。
2. 輸入框的暗提示用法通常分為框內(nèi)提示、框外提示、校驗(yàn)提示
3. 輸入框的數(shù)字限制分為：輸入框內(nèi)末尾提示、框外文本提示、框內(nèi)文本提示
4. 輸入框不同高度的呈現(xiàn)對(duì)比，以及如何運(yùn)用刪格系統(tǒng)為輸入框定義寬度

參考文獻(xiàn)：http://www.woshipm.com/ucd/577874.html

作者：角馬X

本文由 @角馬X 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

迎觀看indesign頁面排版教程，小編帶大家學(xué)習(xí) InDesign 的基本工具和使用技巧，了解如何從頁面中提取關(guān)鍵詞或引文。然后將其作為設(shè)計(jì)元素重新加入版面，吸引讀者。

打開文件，一開始 InDesign 會(huì)在「文檔」窗口中顯示文檔的第 1 頁，可以使用頁面左側(cè)的黑色文本，創(chuàng)建標(biāo)注。首先在左側(cè)的「工具」面板中選擇「文字工具」，然后選擇左側(cè)文本。

文本格式可以在文檔右側(cè)的「屬性」面板中找到。如果文檔中沒有顯示「屬性」面板，依次選擇「窗口」-「屬性」。

在「屬」面板的「字符」部分更改字體、樣式、大小及其他屬性。

在左側(cè)的「工具」面板中選擇「選擇工具」，點(diǎn)擊選中標(biāo)注文本框。

選擇「窗口」-「文本繞排」。

在「文本繞排」對(duì)話框中選擇「沿對(duì)象繞排」選項(xiàng)。

現(xiàn)在，將標(biāo)注拖放到文本上，放置到正確位置。嘗試用顏色和漸變填充標(biāo)注框，現(xiàn)在使用「顏色」填充，依次選擇「窗口」-「描邊」。

打開「描邊」窗口，「粗細(xì)」設(shè)置為「2」點(diǎn)。

「類型」有多種選項(xiàng)，可以選擇「圓點(diǎn)」。

到工具欄的底部，雙擊打開「拾色器」，更改描邊的填充顏色。

可以在第 2 頁查看我們嘗試過的其他方法，選擇「窗口」-「頁面」。

在「頁面」面板中，通過雙擊第 2 頁縮略圖，轉(zhuǎn)到文檔的第 2 頁，將看到描邊的不同樣式，顏色和漸變填充標(biāo)注框。

返回第一頁，根據(jù)選擇的文本繞排選項(xiàng)，可能需要增加標(biāo)注文本框周圍的間距。可使用「文本繞排」面板中的「偏移」選項(xiàng)，在標(biāo)注的一側(cè)或多側(cè)周圍添加邊距。點(diǎn)擊中間的鏈接圖標(biāo)，單獨(dú)調(diào)整偏移量設(shè)置。

以上就是在inDesign軟件中創(chuàng)建雜志風(fēng)標(biāo)注的方法，現(xiàn)在就來嘗試一下，引用故事或文章中的某個(gè)片段，改善頁面效果，來吸引讀者。

indesign軟件下載地址：Indesign 2021 for mac(Id 2021)

https://www.macz.com/mac/7645.html?id=NzY4OTYwJl8mMjcuMTg2LjEwLjg2