設計語言 - 表單（高級搜索、基礎校驗表單、控件校驗表單、彈窗）

文章由羅耀_UI原創，教程關于表單的高級搜索、基礎校驗表單、控件校驗表單、彈窗。這次開篇要強調一下，“尺寸不是絕對的，還是要根據設計師的經驗與審美來決定的”與“固定數值是引導新人去理解規則，之后要根據自身的理解去找到屬于自己的規則”。這兩點須知還需要大家去理解一下的。

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

目錄

1. 高級搜索（大體結構）

2. 高級搜索（實際案例）- 原結構[解析]

3. 高級搜索（實際案例）- 修改結構[解析]

4. 基礎校驗表單（樣式）

5. 控件表單（樣式）

6. 彈窗（樣式）

1.高級搜索（大體結構）

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

2.高級搜索 - 原結構 [解析]

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

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

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

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

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

3.高級搜索 - 修改結構 [解析]

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

增強文本與文本域的關聯性的方法是把文本由左對齊修改為右對齊，但這樣做有會產生一個新的問題，那就是文本產生的負形太大了與層級1的功能說明之間的關聯性變弱了，如下圖所示。

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

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

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

接下來講一下如何解決文字負形與用戶視線變長的問題，由于結構的變化當按照大類來做區分，文本負形的影響就會變得非常小了。而用戶的視線也不用做迂回了，前面已經沒有信息可確認了，相應的也減少了用戶的視線使它變短了。

最后再解決一下“用戶理解力”的問題。按照新改的結構，也依然會出現上面提到的問題，理解路徑應該是<紅1 - 橙2- 藍3>這樣一個理解過程，用戶在填寫表單的時候還是會去確認信息的準確性，也不容易記住。

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

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

4.基礎校驗表單（樣式）

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

5.控件表單（樣式）

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

6.彈窗（樣式）

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

謝謝閱讀

感謝支持

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

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