設計語言 - 表單(高級搜索、基礎校驗表單、控件校驗表單、彈窗)
文章由羅耀_UI原創(chuàng),教程關于表單的高級搜索、基礎校驗表單、控件校驗表單、彈窗。這次開篇要強調(diào)一下,“尺寸不是絕對的,還是要根據(jù)設計師的經(jīng)驗與審美來決定的”與“固定數(shù)值是引導新人去理解規(guī)則,之后要根據(jù)自身的理解去找到屬于自己的規(guī)則”。這兩點須知還需要大家去理解一下的。
之前有些類似的知識已經(jīng)講過了,這里會出現(xiàn)一個問題這樣的問題:“知道如何繪制這些組件但不清楚它們的樣式與結(jié)構(gòu)”。那針對這個問題我打算在文章下方放出我做的設計語言中表單部分的原圖,這樣大家就可以根據(jù)自身的理解參考著來做啦。
目錄
1. 高級搜索(大體結(jié)構(gòu))
2. 高級搜索(實際案例)- 原結(jié)構(gòu)[解析]
3. 高級搜索(實際案例)- 修改結(jié)構(gòu)[解析]
4. 基礎校驗表單(樣式)
5. 控件表單(樣式)
6. 彈窗(樣式)
1.高級搜索(大體結(jié)構(gòu))
高級搜索要比普通搜索更復雜一些。通常普通搜索就是一個輸入框和一個搜索框組成的,而高級搜索是由很多個輸入部分和其他的控件來組成的。我畫的高級搜索大致長這樣,是一些基礎框架,而實際項目中要結(jié)合“其他控件”來做,下面會舉個例子來解析它。由于高級搜索是由以前講過的搜索部分組成的,在這里就不過多強調(diào)它的繪制方法了,這部分的框架可以在文章下方中的附件中找到,大家去下載就可以了。
2.高級搜索 - 原結(jié)構(gòu) [解析]
這里我就拿“百度搜索引擎-高級搜索”來做案例的解析。解析百度搜索引擎的高級搜索完全是我根據(jù)個人經(jīng)驗來做的,就會比較主觀,也只是提供一種參考吧,還希望大家根據(jù)自己的理解去思考吧,實際效果如下。覺得圖片不清晰的朋友們可以在文章下方下載附件,里面有原圖。
原結(jié)構(gòu)中我認為還是存在一些問題的,一個一個來講。在原結(jié)構(gòu)中層級分為三級,但由于親密性影響關聯(lián)性,把層級1和層級2做到一塊而孤立了層級3。這么做的目的是想要強化層級1的功能與重要性,就要破壞層級2與層級3的關系,但也失去了整體性。文本與文本域就應該是一個整體,這樣強行拆開就不像一個表單了,也要增強文本與文本域之間的整體性。
原結(jié)構(gòu)中存在的第二個問題就是“理解力”,這里的理解力是用戶理解力,雖然是微體驗,但影響也是挺大的。我們來分析一下原結(jié)構(gòu)中用戶的理解路徑。一個正常的用戶首先看到下面這個表單,理解路徑應該是<紅1 - 橙2- 藍3>這樣一個理解過程,但問題是這里忽視了用戶的記憶能力,當填寫相應的搜索內(nèi)容時,用戶是需要確認填寫信息的,如果用戶記不住和需要更多時間來理解這些功能描述,就要從頭再理解再確認一遍,就增加了用戶的學習成本和時間成本,造成不好的用戶體驗。那這里可不可以在文本域中加“提示信息”呢,這里加了提示信息,表單全都是功能描述,加重了功能視噪,也會造成不好的體驗。
原結(jié)構(gòu)中存在的第三個問題就是“功能視噪”,意思是功能描述造成了太多的視覺噪點。應該簡化用戶的理解力,并減少用戶的思考,如果給出太多的功能描述信息就會加重用戶的思考,也會浪費用戶的時間。這個功能描述跟字符長度和理解力有關,例如“姓名”和“限定要搜索指定的網(wǎng)站是”,理解程度均是不相同的。如下圖所示,要理解的功能太多了,而又不做簡化,勢必會增加用戶的理解難度。如果項目需求中就要求有這么多難理解的功能怎么辦,這個問題在下面的修改結(jié)構(gòu)中會講到。
原結(jié)構(gòu)中存在的第四個問題就是“界面美觀度”。我覺得整個百度搜索引擎的界面美觀度也不太理想,高級搜索這塊做的就更粗糙了,沒有美感。當然了他們的設計師可能站在“向下兼容”的角度去考慮問題了,希望兼容所有現(xiàn)象不好的顯示器,也是有可能的。界面美化都是一些基礎操作,這里就不過多贅述了。
3.高級搜索 - 修改結(jié)構(gòu) [解析]
修改結(jié)構(gòu)就要修改原結(jié)構(gòu)中的缺陷,要解決上面所提到的所以問題,那第一個要解決的問題是“層級”。上面提到說把文本和文本域拆開來做會失去關聯(lián)性,也更不像一個表單了。所以我增強了文本域文本域之間的關聯(lián)性,看上去像一個完整的表單了。
增強文本與文本域的關聯(lián)性的方法是把文本由左對齊修改為右對齊,但這樣做有會產(chǎn)生一個新的問題,那就是文本產(chǎn)生的負形太大了與層級1的功能說明之間的關聯(lián)性變?nèi)趿?,如下圖所示。
同時又造成了另一個問題,用戶的視線被拉長了。用戶每次確認信息準確性時視線還得返回到起點,然后再按照理解路徑去填寫相應的信息,這樣造成的體驗也是不好的。
解決這個問題的方法就引入了要解決的第二個問題 -“功能視噪”。上面也講了功能描述太多了會造成視覺噪點,所以這里要減少視覺噪點的同時,還要解決“文本造成的負形”和“用戶視線變長”的問題。我的解決辦法是,去掉這些功能描述,直接按照兩個大類來做功能劃分,就是去掉了一些字,就完美了解決了“功能視噪”、“文字負形”和“用戶視線變長”這三個問題。
細講一下怎么解決“功能視噪”的問題的。功能描述過多就會越難理解,要想降低用戶的理解就要做簡化,不按照功能描述做廣度的平鋪,而是做深度引導,直接用一個大類來代表這些功能就行了,如下圖所示。
接下來講一下如何解決文字負形與用戶視線變長的問題,由于結(jié)構(gòu)的變化當按照大類來做區(qū)分,文本負形的影響就會變得非常小了。而用戶的視線也不用做迂回了,前面已經(jīng)沒有信息可確認了,相應的也減少了用戶的視線使它變短了。
最后再解決一下“用戶理解力”的問題。按照新改的結(jié)構(gòu),也依然會出現(xiàn)上面提到的問題,理解路徑應該是<紅1 - 橙2- 藍3>這樣一個理解過程,用戶在填寫表單的時候還是會去確認信息的準確性,也不容易記住。
解決這個問題的辦法就是加“提示信息”,在文本域中加提示信息。而之前我在功能視噪那塊去掉了很多功能描述,那在這里做提示信息,就應該提示之前刪掉的功能描述。這樣就保證了用戶不用回去確認信息,即使用戶記憶能力弱也能順利填寫相應的信息。這里加的提示信息應該精煉易懂,也要有效的降低用戶的學習成本。
這里就是最后的修改結(jié)構(gòu)部分了。我的整個修改過程大致就是這么想的。當然了我在下面提到的這寫想法也不一定對,還是需要大家根據(jù)自己的理解去思考。原圖在文章下方的附件中也是可以下載的。
4.基礎校驗表單(樣式)
下圖所示是基礎校驗表單的樣式,具體繪制方法也比較常規(guī)就不講了,下方的附件中有原圖,大家可以下載附件來做參考。
5.控件表單(樣式)
跟基礎控件表單一樣,繪制方法也比較常規(guī)就不講了,下面附件中有原圖大家下載就可以了。
6.彈窗(樣式)
還有彈窗啊,我個人感覺彈窗沒什么好講的,也都是一些比較基礎的操作,里面可以做一些復合功能什么的。也是附件里面有原圖,大家自己下載就行了。
謝謝閱讀
感謝支持
這次在結(jié)尾啊我就多說幾句啊。首先還是要感謝大家的支持與肯定,也非常感謝長期以來一直在關注我的朋友們,非常感謝大家。好的那言歸正傳,開篇提到了神學、哲學、科學和自然結(jié)構(gòu),那在這里就簡單的講一下吧。最近在研究自然結(jié)構(gòu)中的“分形理論”、“葉序”;神學(古梵語)中的“Akasha”和“Parna”,與宇宙“能量”和宇宙“波”有關;哲學(宗教-佛學)“凡所有相皆是虛妄”,金剛金里的一句話,也可以用它強行解釋“暗物質(zhì)”,還有就是蘇格拉底的“我知我無知”和“認識你自己”了,我也是每隔一段時間就會思考并重新定位,這也是認清自我的一個過程,無知我無知也是個悖論挺好玩的;科學就是“反物質(zhì)”、“量子理論”、“粒子對撞機”、“希格斯玻色子”等;最近沒寫文章也不是找借口而是在學習哈,那如果有相同興趣的朋友可以加個微信(Vision5514),相互探討并學習啊。
最后我想說說我目前對自己的看法。當我去了解宇宙后發(fā)現(xiàn)人類的認知也是十分有限的,為什么說很多科學家(牛頓、特斯拉、愛因斯坦)在晚年都沉迷于神學,他們也是意識到了人類的無知,研究了大半輩子的科學發(fā)現(xiàn)神學家早在前面等著他們了,但不去證實科學就無法發(fā)現(xiàn)科學與神學之間的相似性,這是多么的有趣啊。我最近也在想“人生的意義到底是什么”。最早以前會認為“人生的意義就是賺錢買房”,就現(xiàn)在來看這個觀點不是很對,當大家理解“儒家思想就是統(tǒng)治者統(tǒng)一民眾思想的工具”這個道理就明白了。說有現(xiàn)實壓力的朋友們,我只能說價值觀不同導致的結(jié)果也不同;第二個階段會認為“人生本沒有意義,而是需要每個人去定義它使它變得有意義”,其實這個理解也是錯的,因為忽略了價值觀和世界觀會導致認知偏差,一個殺人犯覺得犯罪有意義,那它會認為它的人生就是有意義的,這是不對的;第三個階段會認為“人生的意義就是-感受”,這里的感受指的是“七感(視聽觸味嗅+愛恨)”,那也是不對的,加強感受會漸進為享樂主義了嘛,享樂主義又會引出物質(zhì)主義和唯物主義,就是錯上加錯了。而第四個階段(現(xiàn)階段)會認為“人生的意義就是-感知”,這里的感知上升到精神層次,是感知宇宙以及萬物的一種常態(tài)。由內(nèi)化(個人認知)轉(zhuǎn)為外化(感受生活環(huán)境及宇宙),再由外化轉(zhuǎn)為內(nèi)化(個人吸收),這樣一個過程。最后就可以達到老子在《道德經(jīng)》講的“天人合一”了,那我理解的這個“天人合一”就是個人“內(nèi)化的思想”與宇宙的“波”同頻,就能感知宇宙萬物,暢游宇宙之間,跟佛教中提的“大徹大悟”意思也相近,看到的就與常人不同到了。話說回來神學是不是博大而精深,可能現(xiàn)在科學還未證實的,幾千年前就已經(jīng)有這種觀點了,真是細思極恐啊。
本文地址:http://pkvc.cn/tutorial/id4202.html