追求卓越一諾千金

藍藍設計|-名都安定器,2011年成立||-始兴家园,主創清華團隊_花好月圆夜mp3,專注軟件和互聯網ui設計開發-2019四不像生肖图108期。擅長企業信息化管理_--易付宝app官方下载、監控---11086时时彩官网下载、大數據軟件UIUE谘詢和設計開發服務|苏州电话订火车票。立足UI-|小米发布会ppt,好好學習___痒原唱,天天進步--|拳皇麻宫雅典娜h!


「表單設計」知識點

2019-8-14 泥人張 交互設計及用戶體驗


如果您想訂閱本博客內容|-中日副外长级磋商,每天自動發到您的郵箱中-安德鲁森月饼价格, 請點這裏

表單是產品設計中的重要組成部分-__银环蛇价格,如果說彈框的主要作用是完成信息反饋256手机彩票网网址,那麼表單的主要作用就是完成信息錄入--|陇县关山牧场。任何一個表單都可以被拆解成三個最基本要素|_宅男躲艳记:標簽(標題)_-|淘宝二手市场、輸入框和按鈕-__台中市邮编。

標簽是用來告訴用戶這個列表項是什麼-淘宝网韩版女装大码;輸入框是供用戶完成信息錄入的-__有约鞋批发网;按鈕是供用戶完成信息錄入後點擊進入下一個流程的-_-田连元评书隋唐演义。

標簽

根據標簽所處的位置_|传说中勇者的传说2,可以將其分為左標簽_|-朱云来老婆、頂部標簽和行內標簽_|_芦荟棉是什么面料。

1. 左標簽

左標簽在目前來說是最常見的一種標簽樣式|-异蛇宝,但是這並不意味著我們可以無所顧慮地使用它___金立gn105软件下载。以手機端為例_-优胜彩票,手機端的屏幕尺寸(寬度)有限|_|金陵十三钗小说结局,左標簽會占據屏幕較大的空間|||夹心取力器,此時右邊的輸入框就可能無法展示完整的信息_||易彩买彩票真的吗。

例如__wj00001,如果用戶輸入的地址過長-|_国家创新基金网,就會造成信息的展示不完全--仔仔网电视剧,這對用戶體驗來說是致命的|_宇通客车45座报价。因為用戶在進行下一步操作之前都會對輸入的內容進行審核確認-__历任上海市委书记,如果連完整的內容都無法獲知或者獲知的難度較大-_1q币购物券,則用戶根本不會進行下一步操作_凯旋王国官网,這就造成了操作流程的中斷___东方热线网络测速。所以|_解放军胸章,我們在使用左標簽的時候_35彩票安卓,一定要考慮對多行文本的展示_|50018。

2. 頂部標簽

頂部標簽是指位於輸入框上方的標簽-_142857能预测彩票,這樣輸入框就可以獨占整個頁麵|-1288彩票合法吗,信息可以得到更完全的展示_||盈众彩票合法吗。

與左標簽相比_-_赢彩彩票网站可靠吗,頂部標簽可以給輸入框的內容騰出足夠的空間|_苦参清痘无痕露。在界麵設計中--_雷神2 百度影音,更多的空間還意味著具有更高的信息層級-_-重庆力帆公子尹喜地。同一個表單中會有很多的輸入項-_键盘清洗机,有些輸入項的優先級很高-2019年四不像欲钱料,我們可以考慮使用頂部標簽的樣式來進行凸顯__|英华学校吧。

但是這種布局方式也有缺點--qq2009下载:會占據更多的縱向空間-_南国彩票论坛七星彩,之前一屏就可以展示的內容_|249彩票,現在用戶需要滑動頁麵才可以看完-|_跆拳道太子妃。

3. 行內標簽

行內標簽又可以被看成是輸入提示||-优信彩票输了,其樣式看起來很適合手機端的表單設計--_149期双色球开奖结果,因為它可以極大地節省頁麵空間-_-云南鼎通贵金属。但是一旦用戶點擊切換到輸入狀態以後_-聚返吧,就看不到這些標簽了--刘振阳王梦瑶。如果操作提示字數很多-|_欧瑞珂诗,例如密碼規範_-_众乐彩票网,那麼用戶記憶會很吃力_||11选五中奖规则及奖金。我們可以在調起的鍵盤頂部加上提示_dsound dll病毒,減少用戶的記憶成本-_|色群qq。

但是-|-韩恩典图片,如果表單項目過多|-永胜国际是做什么的,則用戶在填寫的時候很容易串行-_-优点彩票网,可能會出現把家庭住址填到畢業院校一欄中的情況--3cp彩票注册。更嚴重的是||dsound dll病毒,用戶因為無法看到標簽|__160彩票安全吗,這類錯誤是無法被檢查出來的|_-清国遗爱。為了解決這個問題-|-松原地震最新消息2018,我們可以在行內標簽前加一個圖標來標識這個列表項--魔尊火线1 3生化怒袭,圖標所占據的空間不會太大||下雨声,而且會提高頁麵的美觀性|_|诺基亚3110c软件。

當表單項目過多時-57bt龙发布,我們要對其進行整合分組來提升內容的可讀性_|男士眼霜推荐。如下圖所示__-超女娃娃主题曲,這裏將 15 個字段分成 3 組|重生洪荒之逍遥至尊。同樣的內容|-_宅男躲艳记txt下载,但給用戶的印象卻大不相同-至尊争霸有赚到钱的吗。

輸入框

輸入框的作用是供用戶完成信息錄入|--申通快递详单查询,這裏我們的設計思路是如何提升信息的錄入效率_陈薇茵。我見過很多設計師偷懶-_-3600彩票,把所有的輸入框都做成文本框樣式--_钱永真,用戶必須調起鍵盤一個字一個字地輸入_-|金山区财政局,這種體驗是非常不友好的|-|链家地产司歌。如果我們想讓用戶錄入個人信息|--清酒红人面,其中的生日和城市就應該使用日期和城市組件_-阿里旺旺2009,而不是讓用戶手動輸入-|优游彩票用户登录。

即使非要讓用戶手動輸入||_上海情侣网吧门,我們同樣可以根據不同的場景給用戶提供更友好的體驗-_|述职报告结尾。如果要輸入的是數字|goodbyemissripley,那麼應該給用戶調起數字鍵盤-优博彩票网站;如果要輸入文本-_高地杂鱼群,那麼應該給用戶調起全鍵盤-||沈远奎,避免用戶手動切換鍵盤_-_诺卡n9。

即使用戶輸入符號_-|多多杀人游戏,我們也要考慮如何減少用戶的操作步驟-|-邮局上班时间。例如||-在淘宝上怎么开店,我們發現當光標位於周星星三個字右邊的時候_-|淘宝网开店,點擊「“」鍵|-248彩票安卓版免费,會出現左右雙引號||n81软件下载;當光標位於周星星三個字中間的時候-_-焦点打断宏,點擊「“」鍵_-许昌胖子店,隻會出現左雙引號-||许小年微博。這是因為光標在文本右邊|-国家医考网登录入口,用戶隻要輸入「“」_|_2019最新买足彩软件,那麼就必然需要「”」來結尾--昆明桑拿,這裏直接提供左右雙引號更合適_-_乐购卡盟。如果光標是文本中間|_山西柳林联盛集团,無法確定「”」需要在哪裏出現|_|108娱乐app新3d是什么,所以隻展示「“」--绍兴县中心医院。

容錯性設計

在理想狀態下-助赢永久免费计划版app,用戶填寫完表單信息--_陈文恩,然後點擊「提交」按鈕__fx01,係統顯示提交成功--诺基亚6700s刷机。但是|靓眼网,現實情況卻是用戶在填寫過程中經常會發生錯誤--永盛投国际,那麼如何將容錯性原則融入表單設計中呢|_日奈森亚梦h?

首先我們需要給予用戶足夠的操作提示|_丧尸出笼血脉,日期錄入就是最典型的例子_|诺基亚6700s刷机。不同的地區對於日期錄入的格式也不一樣--五成微商已消失,「02/12/2019」到底是2019年2月12日還是2019年12月2日||-媚行深宫 菏泽天下?如果我們不提示用戶-_-深圳飞鹤航空,用戶就不知道應該怎麼輸入_-_小班下学期个人总结。

為了避免用戶犯錯和提升用戶的信息錄入效率|--东北二嫂百度云,我們可以提供自動完成錄入功能___qq2011版本,當用戶在文本框裏輸入時-|3550幸运彩票网址,係統可以猜測可能的答案___中国高铁班列展出,顯示可選列表__不要放弃治疗 出处,避免了用戶手動輸入造成的錯誤-||隋唐英雄王楚楚。

如果你確定對用戶足夠了解|如东实验小学万红,在用戶進行信息錄入時-007a私募内线,可以提供合理的默認值-_|盈彩彩票是正规的吗。因為對用戶來說_-_0165下去,填寫信息永遠都不是一件有趣的事情135彩票平台官网,設置合理的默認值可以節省用戶的操作時間-|-152彩票网站邀请码。

能讓係統完成的任務|_广名网,就盡量不要讓用戶來操作|_李晨阳年龄。用戶會犯錯___2002年春晚节目单,而係統不會-|中兴彩票苹果版。表單容錯性設計的另一個方向就是梳理表單中的雞肋項目__|2628彩票账号注册。

現在很多的購票類 APP 都提供送票上門的功能_|台湾雅虎奇摩首页,這就需要用戶填寫收貨地址_-_重庆325。以交通出行類 APP 飛豬_电影天堂快车下载、途牛和去哪兒為例-成都男子街头杀妻,其中--_二手房营业税税率,上圖中左側的兩張圖--_阿拉上海人,飛豬和途牛都需要用戶填寫郵政編碼-_-雅虎宝贝鱼在线翻译,而在去哪兒中則是選填的_-|038彩票讨论群。其實根據用戶填寫的地址|_新乡窝窝团购网,我們已經可以獲取到郵政編碼|_-长堤风貌街,郵政編碼完全可以自動回顯___众彩彩票手机app下载,不需要用戶手動輸入_-038彩票10000好提现吗?。

而在小米有品 APP 中就可以根據用戶填寫的地址回顯郵政編碼-_褫,這看起來很方便_-travalue。這隻是看起來很方便|杨幂被灌醉性侵,我們可以繼續思考一下_-36选7中奖规则:如果係統完全可以根據用戶填寫的地址獲取到郵政編碼|步步高学习机h2下载,那麼郵政編碼這一項完全可以不在界麵中露出_-至尊争霸彩票能赚钱吗。其實很多產品在用戶填寫收貨地址的時候已經不需要用戶填寫郵政編碼了___头彩饰品。

對於容錯性原則_-|云购彩票违法吗,我們還要考慮如何給用戶展示合理的報錯提示-_-106官方彩票注册。目前來說|--cctv6高清直播,我們經常看到的一個報錯提示樣式是對話框-_刘久龙。在我看來|_|369彩票官网,對話框並不是一個好的選擇||-铲运机型号。因為用戶如果要進行修改||智彩11选5走势图,就必須要關閉對話框||新七天电器直销网,那麼用戶就看不到錯誤信息了__-亿客隆彩票。如果錯誤原因和解決方案的字數較多_重庆报关员培训,那麼用戶就需要花一定的時間記住這些信息-|闪吧音效库,然後再來修改_||阿龙山吧,這會增加用戶的記憶負擔_-中国媳妇第一部。如何才能設計好表單的報錯提示呢||11086苹果移动彩票?表單中的報錯提示可以分為兩種--_开淘宝网店:單行表單報錯提示和多行表單報錯提示|_qq2011绿色版。

單行表單中意味著在當前界麵中表單隻有一行輸入框星际争霸2人族大讲堂,其一般用於手機號_|尚志都市、銀行卡號|--赢钱彩APP靠谱吗、身份證號和金額的錄入___青岛台东八路洗头房。對於此類場景-_智胜彩票平台,建議使用輸入框底部的文字報錯提示樣式||新超越极限2 25,並且要對錄入的信息進行實時校驗||陈金元,不要等到用戶進入下一個界麵才告知用戶在上一個界麵中手機號輸錯了_|_fj12530。

給多行表單進行報錯提示時___云顶娱乐软件是真的吗,除告知傳統的錯誤原因和解決方案外|铁山港365,還應該告知用戶錯誤的位置_|_亚当夏娃怡情谷。因為在一個界麵中|-|苯乙烯密度,有很多的輸入項-|天国凤凰第二部,用戶在短時間內無法把報錯提示和錯誤項聯係起來|__优彩彩票骗局揭秘,因此|__网游幻梦,為了提升用戶對於錯誤場景的感知效率_-习水教育科技网,對錯誤項進行標記是非常有必要的_256c彩票官网。具體的實現方式有改變文字顏色__168彩票APP官方网站苹果手机、輸入框背景色和設置提示文案抖動---喂养恐龙赚钱。

以上圖為例||-诸葛智彩软件是干嘛的,這裏通過改變文字顏色或輸入框背景色來標記錯誤位置-__亿客隆彩票官网,用 Toast 告知用戶錯誤原因和解決方法|_海华癫痫。我們也可以不改變配色|||群力新区,讓該輸入框左右抖動也能起到快速標識的作用-|英冠附加赛。

按鈕

表單中的提交類按鈕按照位置可以分為以下三種-_-306老版彩票。

其中位置 A 是最常見的布局樣式---168高频彩开奖记录,這樣的布局符合用戶的視覺習慣和操作流程|-360购彩大厅首页开奖:用戶由上而下完成表單信息的填寫-帅同社区 文学转载,最後點擊「提交」按鈕進入下一個頁麵-_智彩快三怎么下。但是這種布局有一個問題-至尊心水app安全吗:如果表單項目過多|-|01彩票计划软件,則用戶必須滑動頁麵才能完成提交操作--山东栾海燕。

位置 B 跟位置 A 很相似|_迟重瑞简历,唯一的區別在於位置 B 是固定在頁麵底部的-阳台门 陈怡。那麼位置 B 跟位置 A 的適用場景有什麼不同呢|__阿列克莎?位置 B 意味著用戶在不用滑到頁麵底部的情況下就可以點擊「提交」按鈕-__银河海润,那麼在什麼樣的場景下用戶不用滑到頁麵底部就可以提交呢_祛疤整形医院?

其實在很多表單中-|武汉欢乐谷年票,不是所有的信息都需要用戶手動錄入的_-众发娱乐提现是真的吗。以前麵提到的郵政編碼為例-_-鹰彩首页,隻要用戶輸入了地址-清东陵地宫,係統就能獲取郵政編碼--亿彩邀请码是多少,相關信息是可以直接回顯的_强心脏20121127,用戶沒有看到此類信息的必要性|-|青年中国说余佳文。所以_-武汉欢乐谷年票,對於一些重要性不是很高-|310v大赢家足球比分、不強製用戶看完的表單項目_|-苏州故事广播,很適合使用這類底部懸浮按鈕--_221稳台子。最常見的就是各種協議頁-|_中博彩票平台可靠吗?。

位置 C 出現的原因在於-|众盈时时彩是违法的吗,對於前兩種方案___苏菲的日记,當調起鍵盤時就會遮住「提交」按鈕_阿里巴巴小额批发,用戶必須先關閉鍵盤才可以點擊「提交」按鈕_公务员阳光工资标准,多了一步操作--|重庆南滨路渝信川菜。而位置 C 可以完美解決鍵盤遮擋的問題--|玉子金童,但是其不符合用戶的視覺習慣和操作流程__约彩彩票官网。而且手機大屏化是一個不可逆的趨勢__-汉正街品牌服饰批发广场,用戶在單手握持手機的情況下很難直接點擊到界麵右上角的「提交」按鈕--_168彩票App,增加了操作難度-_22选五开奖结果河南的。

其實位置 C 完全可以被忽視-|头层牛皮是什么意思,因為現在很多產品已經支持在調起鍵盤時滑動頁麵---htcg24,所以位置 C 最大的優勢已經不複存在|-阜新红茶馆。這裏還介紹位置 C 的原因是希望讀者知道交互規則是會隨著技術的發展而不斷改變的|_|皇室的赏赐,可能在這本書裏提到的一些技法過一段時間就會落伍了--_易中彩票平台可靠吗。要成為一名優秀的設計師306体彩app怎么没了,必須具備持續學習的能力_-_皮肤病图片大全。

文章來源--_众盈彩票怎么样:優設

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司--若邪第一视角,為期望卓越的國內外企業提供卓越的UI界麵設計_||2010江苏数学高考试卷、BS界麵設計 |--365彩票网3d走势图、 cs界麵設計 -_高清翡翠台、 ipad界麵設計 |_银尖宝戟、 包裝設計 -|掌上购彩app是不是骗局、 圖標定製 _-深圳观澜田背花园、 用戶體驗 |_-3u8705、交互設計|_中国最大的七星彩加急版交换论坛、 網站建設 _暧昧的颜色、平麵設計服務|_|政府最新打击云联惠。

標簽: 表單設計 « 快速了解“私域流量” | 跟全球 Top 4 的時尚雜誌_-金星果,一起學平麵設計基礎知識|锚杆垫板!»


訂閱Rss