設(shè)計語言 - 表單（高級搜索、基礎(chǔ)校驗(yàn)表單、控件校驗(yàn)表單、彈窗）

文章由羅耀_UI原創(chuàng)，教程關(guān)于表單的高級搜索、基礎(chǔ)校驗(yàn)表單、控件校驗(yàn)表單、彈窗。這次開篇要強(qiáng)調(diào)一下，“尺寸不是絕對的，還是要根據(jù)設(shè)計師的經(jīng)驗(yàn)與審美來決定的”與“固定數(shù)值是引導(dǎo)新人去理解規(guī)則，之后要根據(jù)自身的理解去找到屬于自己的規(guī)則”。這兩點(diǎn)須知還需要大家去理解一下的。

之前有些類似的知識已經(jīng)講過了，這里會出現(xiàn)一個問題這樣的問題：“知道如何繪制這些組件但不清楚它們的樣式與結(jié)構(gòu)”。那針對這個問題我打算在文章下方放出我做的設(shè)計語言中表單部分的原圖，這樣大家就可以根據(jù)自身的理解參考著來做啦。

目錄

1. 高級搜索（大體結(jié)構(gòu)）

2. 高級搜索（實(shí)際案例）- 原結(jié)構(gòu)[解析]

3. 高級搜索（實(shí)際案例）- 修改結(jié)構(gòu)[解析]

4. 基礎(chǔ)校驗(yàn)表單（樣式）

5. 控件表單（樣式）

6. 彈窗（樣式）

1.高級搜索（大體結(jié)構(gòu)）

高級搜索要比普通搜索更復(fù)雜一些。通常普通搜索就是一個輸入框和一個搜索框組成的，而高級搜索是由很多個輸入部分和其他的控件來組成的。我畫的高級搜索大致長這樣，是一些基礎(chǔ)框架，而實(shí)際項(xiàng)目中要結(jié)合“其他控件”來做，下面會舉個例子來解析它。由于高級搜索是由以前講過的搜索部分組成的，在這里就不過多強(qiáng)調(diào)它的繪制方法了，這部分的框架可以在文章下方中的附件中找到，大家去下載就可以了。

2.高級搜索 - 原結(jié)構(gòu) [解析]

這里我就拿“百度搜索引擎-高級搜索”來做案例的解析。解析百度搜索引擎的高級搜索完全是我根據(jù)個人經(jīng)驗(yàn)來做的，就會比較主觀，也只是提供一種參考吧，還希望大家根據(jù)自己的理解去思考吧，實(shí)際效果如下。覺得圖片不清晰的朋友們可以在文章下方下載附件，里面有原圖。

原結(jié)構(gòu)中我認(rèn)為還是存在一些問題的，一個一個來講。在原結(jié)構(gòu)中層級分為三級，但由于親密性影響關(guān)聯(lián)性，把層級1和層級2做到一塊而孤立了層級3。這么做的目的是想要強(qiáng)化層級1的功能與重要性，就要破壞層級2與層級3的關(guān)系，但也失去了整體性。文本與文本域就應(yīng)該是一個整體，這樣強(qiáng)行拆開就不像一個表單了，也要增強(qiáng)文本與文本域之間的整體性。

原結(jié)構(gòu)中存在的第二個問題就是“理解力”，這里的理解力是用戶理解力，雖然是微體驗(yàn)，但影響也是挺大的。我們來分析一下原結(jié)構(gòu)中用戶的理解路徑。一個正常的用戶首先看到下面這個表單，理解路徑應(yīng)該是<紅1 - 橙2- 藍(lán)3>這樣一個理解過程，但問題是這里忽視了用戶的記憶能力，當(dāng)填寫相應(yīng)的搜索內(nèi)容時，用戶是需要確認(rèn)填寫信息的，如果用戶記不住和需要更多時間來理解這些功能描述，就要從頭再理解再確認(rèn)一遍，就增加了用戶的學(xué)習(xí)成本和時間成本，造成不好的用戶體驗(yàn)。那這里可不可以在文本域中加“提示信息”呢，這里加了提示信息，表單全都是功能描述，加重了功能視噪，也會造成不好的體驗(yàn)。

原結(jié)構(gòu)中存在的第三個問題就是“功能視噪”，意思是功能描述造成了太多的視覺噪點(diǎn)。應(yīng)該簡化用戶的理解力，并減少用戶的思考，如果給出太多的功能描述信息就會加重用戶的思考，也會浪費(fèi)用戶的時間。這個功能描述跟字符長度和理解力有關(guān)，例如“姓名”和“限定要搜索指定的網(wǎng)站是”，理解程度均是不相同的。如下圖所示，要理解的功能太多了，而又不做簡化，勢必會增加用戶的理解難度。如果項(xiàng)目需求中就要求有這么多難理解的功能怎么辦，這個問題在下面的修改結(jié)構(gòu)中會講到。

原結(jié)構(gòu)中存在的第四個問題就是“界面美觀度”。我覺得整個百度搜索引擎的界面美觀度也不太理想，高級搜索這塊做的就更粗糙了，沒有美感。當(dāng)然了他們的設(shè)計師可能站在“向下兼容”的角度去考慮問題了，希望兼容所有現(xiàn)象不好的顯示器，也是有可能的。界面美化都是一些基礎(chǔ)操作，這里就不過多贅述了。

3.高級搜索 - 修改結(jié)構(gòu) [解析]

修改結(jié)構(gòu)就要修改原結(jié)構(gòu)中的缺陷，要解決上面所提到的所以問題，那第一個要解決的問題是“層級”。上面提到說把文本和文本域拆開來做會失去關(guān)聯(lián)性，也更不像一個表單了。所以我增強(qiáng)了文本域文本域之間的關(guān)聯(lián)性，看上去像一個完整的表單了。

增強(qiáng)文本與文本域的關(guān)聯(lián)性的方法是把文本由左對齊修改為右對齊，但這樣做有會產(chǎn)生一個新的問題，那就是文本產(chǎn)生的負(fù)形太大了與層級1的功能說明之間的關(guān)聯(lián)性變?nèi)趿耍缦聢D所示。

同時又造成了另一個問題，用戶的視線被拉長了。用戶每次確認(rèn)信息準(zhǔn)確性時視線還得返回到起點(diǎn)，然后再按照理解路徑去填寫相應(yīng)的信息，這樣造成的體驗(yàn)也是不好的。

解決這個問題的方法就引入了要解決的第二個問題 -“功能視噪”。上面也講了功能描述太多了會造成視覺噪點(diǎn)，所以這里要減少視覺噪點(diǎn)的同時，還要解決“文本造成的負(fù)形”和“用戶視線變長”的問題。我的解決辦法是，去掉這些功能描述，直接按照兩個大類來做功能劃分，就是去掉了一些字，就完美了解決了“功能視噪”、“文字負(fù)形”和“用戶視線變長”這三個問題。

細(xì)講一下怎么解決“功能視噪”的問題的。功能描述過多就會越難理解，要想降低用戶的理解就要做簡化，不按照功能描述做廣度的平鋪，而是做深度引導(dǎo)，直接用一個大類來代表這些功能就行了，如下圖所示。

接下來講一下如何解決文字負(fù)形與用戶視線變長的問題，由于結(jié)構(gòu)的變化當(dāng)按照大類來做區(qū)分，文本負(fù)形的影響就會變得非常小了。而用戶的視線也不用做迂回了，前面已經(jīng)沒有信息可確認(rèn)了，相應(yīng)的也減少了用戶的視線使它變短了。

最后再解決一下“用戶理解力”的問題。按照新改的結(jié)構(gòu)，也依然會出現(xiàn)上面提到的問題，理解路徑應(yīng)該是<紅1 - 橙2- 藍(lán)3>這樣一個理解過程，用戶在填寫表單的時候還是會去確認(rèn)信息的準(zhǔn)確性，也不容易記住。

解決這個問題的辦法就是加“提示信息”，在文本域中加提示信息。而之前我在功能視噪那塊去掉了很多功能描述，那在這里做提示信息，就應(yīng)該提示之前刪掉的功能描述。這樣就保證了用戶不用回去確認(rèn)信息，即使用戶記憶能力弱也能順利填寫相應(yīng)的信息。這里加的提示信息應(yīng)該精煉易懂，也要有效的降低用戶的學(xué)習(xí)成本。

這里就是最后的修改結(jié)構(gòu)部分了。我的整個修改過程大致就是這么想的。當(dāng)然了我在下面提到的這寫想法也不一定對，還是需要大家根據(jù)自己的理解去思考。原圖在文章下方的附件中也是可以下載的。

4.基礎(chǔ)校驗(yàn)表單（樣式）

下圖所示是基礎(chǔ)校驗(yàn)表單的樣式，具體繪制方法也比較常規(guī)就不講了，下方的附件中有原圖，大家可以下載附件來做參考。

5.控件表單（樣式）

跟基礎(chǔ)控件表單一樣，繪制方法也比較常規(guī)就不講了，下面附件中有原圖大家下載就可以了。

6.彈窗（樣式）

還有彈窗啊，我個人感覺彈窗沒什么好講的，也都是一些比較基礎(chǔ)的操作，里面可以做一些復(fù)合功能什么的。也是附件里面有原圖，大家自己下載就行了。

謝謝閱讀

感謝支持

這次在結(jié)尾啊我就多說幾句啊。首先還是要感謝大家的支持與肯定，也非常感謝長期以來一直在關(guān)注我的朋友們，非常感謝大家。好的那言歸正傳，開篇提到了神學(xué)、哲學(xué)、科學(xué)和自然結(jié)構(gòu)，那在這里就簡單的講一下吧。最近在研究自然結(jié)構(gòu)中的“分形理論”、“葉序”；神學(xué)（古梵語）中的“Akasha”和“Parna”，與宇宙“能量”和宇宙“波”有關(guān)；哲學(xué)（宗教-佛學(xué)）“凡所有相皆是虛妄”，金剛金里的一句話，也可以用它強(qiáng)行解釋“暗物質(zhì)”，還有就是蘇格拉底的“我知我無知”和“認(rèn)識你自己”了，我也是每隔一段時間就會思考并重新定位，這也是認(rèn)清自我的一個過程，無知我無知也是個悖論挺好玩的；科學(xué)就是“反物質(zhì)”、“量子理論”、“粒子對撞機(jī)”、“希格斯玻色子”等；最近沒寫文章也不是找借口而是在學(xué)習(xí)哈，那如果有相同興趣的朋友可以加個微信（Vision5514），相互探討并學(xué)習(xí)啊。

最后我想說說我目前對自己的看法。當(dāng)我去了解宇宙后發(fā)現(xiàn)人類的認(rèn)知也是十分有限的，為什么說很多科學(xué)家（牛頓、特斯拉、愛因斯坦）在晚年都沉迷于神學(xué)，他們也是意識到了人類的無知，研究了大半輩子的科學(xué)發(fā)現(xiàn)神學(xué)家早在前面等著他們了，但不去證實(shí)科學(xué)就無法發(fā)現(xiàn)科學(xué)與神學(xué)之間的相似性，這是多么的有趣啊。我最近也在想“人生的意義到底是什么”。最早以前會認(rèn)為“人生的意義就是賺錢買房”，就現(xiàn)在來看這個觀點(diǎn)不是很對，當(dāng)大家理解“儒家思想就是統(tǒng)治者統(tǒng)一民眾思想的工具”這個道理就明白了。說有現(xiàn)實(shí)壓力的朋友們，我只能說價值觀不同導(dǎo)致的結(jié)果也不同；第二個階段會認(rèn)為“人生本沒有意義，而是需要每個人去定義它使它變得有意義”，其實(shí)這個理解也是錯的，因?yàn)楹雎粤藘r值觀和世界觀會導(dǎo)致認(rèn)知偏差，一個殺人犯覺得犯罪有意義，那它會認(rèn)為它的人生就是有意義的，這是不對的；第三個階段會認(rèn)為“人生的意義就是-感受”，這里的感受指的是“七感（視聽觸味嗅+愛恨）”，那也是不對的，加強(qiáng)感受會漸進(jìn)為享樂主義了嘛，享樂主義又會引出物質(zhì)主義和唯物主義，就是錯上加錯了。而第四個階段（現(xiàn)階段）會認(rèn)為“人生的意義就是-感知”，這里的感知上升到精神層次，是感知宇宙以及萬物的一種常態(tài)。由內(nèi)化（個人認(rèn)知）轉(zhuǎn)為外化（感受生活環(huán)境及宇宙），再由外化轉(zhuǎn)為內(nèi)化（個人吸收），這樣一個過程。最后就可以達(dá)到老子在《道德經(jīng)》講的“天人合一”了，那我理解的這個“天人合一”就是個人“內(nèi)化的思想”與宇宙的“波”同頻，就能感知宇宙萬物，暢游宇宙之間，跟佛教中提的“大徹大悟”意思也相近，看到的就與常人不同到了。話說回來神學(xué)是不是博大而精深，可能現(xiàn)在科學(xué)還未證實(shí)的，幾千年前就已經(jīng)有這種觀點(diǎn)了，真是細(xì)思極恐啊。