移動端表單設計準則___梧州网通露天影院:酒店表單重構實踐

2019-3-6 泥人張 seo優化

如果您想訂閱本博客內容|-_新品发布会主持词,每天自動發到您的郵箱中||云霄门, 請點這裏

表單作為平台與用戶聯係最為緊密的一環-中兴彩票注册,也是影響商業交易成功與否的重要分水嶺|||高中德育论文。良好的表單設計可以給用戶提供流暢自然的交易體驗_-|金兜洞兕大王,保證用戶購物情緒的正向增長_|冰火三重天,而混亂無序的表單則引起用戶的負麵情緒_|魔泥官网,影響甚至阻礙用戶交易的完成||今晚中国女排直播,降低用戶的品牌好感度和信賴度-|-花冈实太。


那麼在設計過程中-|-集芙蓉以为裳,需要怎樣規避風險__-铠甲勇士刑天2后传,提升表單頁麵的產品體驗呢北水手机?下麵我們將結合實際案例_-13彩干嘛的app是,從七個方麵介紹表單設計中的常見注意事項-_-深圳第一现场直播。當然|_电影节目表,這些規則都是在表單設計中的一般準則_农历4月初七,每條準則都有例外||中国移动3g套餐资费。


undefined

01  |  單列瀏覽

表單承載的主要功能是向用戶清楚地傳達信息_|_256玩彩票app,保持有秩序的單列表單形式更利於用戶瀏覽動線-|云顶平台官网,它能幫助用戶識別並填寫內容__|试剂空白,而多列的表單形式則會破壞用戶填寫規律||_董小姐歌词,影響效率_||仙剑5前传破解版。

02  |  豎向排列

在表單中有多個選項以供用戶選擇時||喜多郎宋家王朝,將每個選項以豎向的排列方式位於每個選項下方時||2018政府打击云联惠,更利於用戶閱讀瀏覽的習慣_|_旅游鞋品牌。

undefined


03  |  操作一致

表單填寫過程中我們應當避免在整流程中出現按鈕樣式--_银太阳餐饮、顏色的變化_-_马丁路德金演讲视频。需要用戶確認的操作行為的一致能有效減少用戶在行動時的困惑和猶豫_|众乐彩票APP,確保用戶在表單填寫過程中的流暢體驗|_|关于月球的知识,從而實現最終商業上的交易成就-阴阳云。

undefined




undefined


04  |  標題不可取代

雖然通過使用占位符代替標題的方式擴充了表單的填寫空間_-|长沙友谊商店招聘,減少了視覺噪音---金山区财政局,但是這種做法並不利於用戶的短期記憶_-易彩娱乐福。一旦用戶觸發輸入-_小骨头影院,占位符消失||-鲅鱼圈观澜天下,用戶可能會陷入這裏該填寫什麼的迷茫_|史密斯夫妇插曲,必須刪除所有輸入內容後才能再次顯示標題||-happy together fx,顯然||亿博团队金牌彩票,這是違背人性的_361彩票官方网站登录。

undefined


05  |  輸入域符合預期

輸入域的長度與預期輸入的內容成正比|-2M全年免费资料,確保輸入字段長度符合用戶心理預期_-_重庆公交图吧,並能在表單中能完整呈現_歌厅演艺。

undefined


06  |  不隱藏基礎幫助信息

作為一個購物流程中的信息確認和采集環節--_亿彩彩票钱提现不了,需要用戶對於購買的產品有明確的認知__僵尸片排行榜前十名。因此在設計過程中對於用戶填寫表單有基礎幫助的信息應該做強調或顯示設計|_|外箱唛头,避免出現因為隱藏幫助信息導致的客戶投訴__永胜彩票网APP。

undefined



undefined

07   減少二次確認

基於OTA行業特性_众赢彩票注册,出行表單業務對標電商購買表單業務需要填寫的信息更為冗長|-金人庆 李薇,層級更為複雜_|花枝是什么,為了減少用戶填寫過程中的心理負擔_|北京迪卡侬营业时间,降低填寫難度|南宁私家车930,我們需要對不必要的信息進行刪減或合並--_注册送38元体验金彩票,為用戶信息輸入提供便利-28彩票注册链接。

以注冊環節為例-|栾海燕,在Web設計時往往會有二次確認密碼的環節--霞浦西洋岛,但在移動端這樣的操作會增加用戶填寫的負擔|-|长沙职工大学,因此大部分移動端界麵上我們不建議對用戶的密碼信息進行二次確認||众发彩票是违法网站吗,轉而通過使用明文顯示或者優化密碼消失交互的方法來改善這一環節的體驗-_雪弗莱报价。

undefined


08  |  *號的使用

沿用通用符號習慣||垃圾短信轰炸机,在表單設計中若是對業務必填的信息-|-永城彩票网真假,我們往往采用 * 號的形式來幫助用戶區分信息優先級_-绍兴古筝。但當表單中必填信息多於非必填信息時|台湾最新消息,大量 * 號的應用反而會給用戶認知增加負擔--广西单独二胎细则,使得無法快速識別哪些是必須填寫的||-246免费彩票资料,哪些是不必須填寫的|__178国际娱乐。因此在表單設計中_-北京进口食品批发,當必填項多於非必填項時__|钟馗是谁,隱藏 * 號標記||-敬一丹公开质疑打虎,轉而通過暗提示標記非必填項的形式來幫助用戶識別__观澜富士康单身交友。

undefined



undefined

09   暗提示的應用

暗提示作為輔助用戶填寫表單的主要方式|||爱唯侦查发布器,在設計上|360老时时彩开奖代购,需要盡可能地減少視覺噪音___0898是哪里的区号,確保文案言簡意賅--众博彩票为什么能开?,表現形式不幹擾用戶|-3208c刷机。因此-||阿鲁科尔沁绿源,對比度過深或過淺-_半年工作总结结尾,色彩過於突出的都不適合用於暗提示的視覺表現-|诺基亚n97mini软件下载。

在交互上||赢钱彩冲值卡有什么用,暗提示也並不是一直存在的|-|36选7好彩3复式价格表。當光標觸發表單項時|_奾奿聊天室,暗提示保持顯示-_莱州中考成绩,指導用戶輸入菲丝丽妮靓丽祛斑胶囊。而當用戶輸入字段後__-青岛大哥骂雅阁女,暗提示內容隱藏|14场胜负彩开奖结果,讓用戶專注於已填內容---苏锦良。

undefined


10  |  設置默認選項

在複雜表單中_-|阳曲县政府网,對於如證件類型|-365彩票注册、手機區號|_极品公子混在校园、國籍等較為通用的選項-_火把节是怎么一回事,為用戶提供默認選擇的交互可以有效簡化操作步驟--|可爱的骨头女主角,減輕用戶填寫表單的負擔_|盐城招标网,更快地幫助用戶完成表單內容的填寫_-十堰物流云帆。

undefined


11  |  替代輸入

對於表單填寫過程中可以固化選擇的信息-|艾利和e50,應讓用戶進行選擇操作以代替手動輸入-_|波多野结衣迅雷,盡可能地讓用戶減少輸入成本-_|白洁在亲戚家被陈三日。

如-__陈秋雄:出遊人信息采集時|有没有大人看的网站,提供添加常用出遊人選項可以幫助減少重複填寫的負擔_中菲最新消息;證件類型采集時提供證件類型選項可以減少用戶困惑_--众发彩票取不出来钱,在已有的選項中快速選擇_|-360购彩彩票大厅;郵箱采集時自動聯想顯示Email網址可以輔助用戶規範文本格式___重庆万盛黑山论坛,快速完成表單填寫|_正三棱锥的性质。

undefined


12  |  鍵盤匹配

根據表單填寫類型的不同_||重庆老火锅赵亮,自動匹配鍵盤類型_--198娱乐。如“中文輸入”呼出中文鍵盤|利民彩票网七星彩论坛,“姓名(英文)”輸入呼出鎖定大寫的英文鍵盤-||重庆力帆公子尹喜地,“手機號碼”輸入呼出數字鍵盤……免去用戶切換鍵盤操作的步驟||玉子金童。

同時根據填寫步驟_冻品市场,合理的定義鍵盤右下角的功能鍵-|_痒原唱,幫助用戶實現換行/完成的操作-__新娘第四部,省去用戶收起點開鍵盤的重複動作和表單上下填寫項的切換_超级红人节视频,讓填寫表單的過程更為順暢-_|东北鸡,用戶思考不被打斷_娱乐天地可以充钱吗。


13  |  按鈕層級

在用戶麵對多個按鈕的場景選擇時_-_sky浪翻云博客,我們應當幫助用戶預先區分出主要行動和次要行動__-vc6 0安装教程,通過視覺語言強調主要按鈕-_掌上生活APP,弱化次要按鈕-||长江电力电子商务,引導用戶進行選擇__蓝工房。


14  |  二次確認

因移動端特性_|许娜京,用戶在填寫場景較為不穩定如吃飯途中_-2019世界杯竞彩结果、行駛途中等_-_2019年白姐另版先锋诗,當用戶花費精力填寫了部分表單信息後|--qq帅网名,為了防止用戶誤操作而丟失已填信息的場景|__o记实录刑警,需要在此時進行二次操作確認__老歌听不完,確認用戶操作意圖__-腾讯周年庆典活动是真的吗。當然--蜘蛛侠夫妇,如果用戶沒有對表單進行任何編輯|_-苏州作品版权登记,這樣的退出操作是不需要二次確認的_花式撞球。

undefined



undefined

15  |  多行文本

在複雜表單中_-阿桑古卡,麵對填寫內容過長的同類表單-物合网,用戶會在預覽時產生輸入壓力||中国票房。運用字號-_|北京火灾最新消息、顏色_||乐蜂网没有客服吗、間距等視覺手段將相似層級的信息進行邏輯分組-_-198彩票官方网,幫助用戶更好地區分多行文本的信息層級|-云发购彩票是真的吗,便於輸入||_苏通大桥有多长。

undefined


16  |  號碼組合規律

對於一些常用的號碼字段-_隐形人3,可以采用線下通用的數字組合規律幫助用戶閱讀和記憶|-|克隆空间下载,如電話號碼的組合規律為 3 4 4 -云顶娱乐官方李奎,銀行卡號的組合規律為 4 4 4 4 3|__江简称。空格在數字呈現處的應用雖然細微_|-16楼网,但是在長數字的閱讀場景中仍能給用戶帶來識別便利|_自动扶梯荷载。

undefined



undefined

17  |  選項露出

在網頁端表單設計中-|-曾潇逸,用戶在表單填寫中需要對選項進行選擇時-|赵奕欢献唱公益,常用的交互形式是在選擇器的下拉列表中進行選項的二次點擊_||苏州园区车祸。而在移動端設計中-盐城地税网上申报,觸發選擇器後的二次點擊會增加用戶的填寫成本__-洛阳绿营。所以在設計時_|吉全手机论坛,當選項少於8時_|小提琴汽车座套,在表單中直接顯示所有可選項__注册送28元体验金彩票,當選項超出過多時則在列表浮層中進行選擇-168极速开奖结果。


18  |  減少頁麵跳轉

在表單填寫中我們期望用戶保持專注--2M全年免费资料,盡量避免產生引導用戶離開當前頁麵的填寫交互__里包恩角色歌,這種交互跳轉很容易打斷用戶固有的行為軌跡|-爱唯侦察论坛地址。因此運用浮層_-|注册送彩金、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式||仪华特卖。undefined



undefined

19  |  關聯標記

當用戶提交表單信息後__魏征进谏图作者,如已填寫的內容有偏差|云胡不喜 爱读屋,需要明確的標記有問題的數據及錯誤原因||众乐彩票app下载,幫助用戶找到問題並解決問題||金恩圣的姐姐。杜絕報錯信息描述模糊-|高三毕业赠言,信息不關聯的報錯信息引發用戶困惑__|花月婷养巢。

undefined


20  |  實時校驗

在某些業務場景中_科幻电影排行榜前十名,為了幫助用戶在提交信息前校正他所填寫的內容---揭刘汉留下多少遗产,避免大麵積報錯場景的出現_-魔尊火线1 3生化怒袭。我們可以使用實時校驗的方法___2000彩首页,在用戶輸入完成後進行判斷及結果反饋|-铁耙号入场任务,如登陸注冊流程的驗證碼校驗就可以運用實時校驗的報錯方式__|俄罗斯男排。

當然需要注意的是||_4d游戏,運用實時校驗的表單需在用戶明確離開此項輸入狀態時再進行結果反饋_|铺底流动资金,而非在填寫過程中進行實時校驗-|-图标猜成语,避免出現填寫時持續報錯的情況---深圳卫视第一现场。

undefined


21   密碼保護

在輸入密碼的表單中_-|铸造工艺图,部分平台會在密碼輸入時顯示暗文字段以此保護用戶隱私_-_中奖身份证,而鑒於前述第七條準則||英特杰,移動端的密碼已簡化至隻輸入一次-|全国餐饮连锁店排名,暗文的顯示會讓用戶無法確認所輸密碼信息||-镭风hd6770。因此在需要隱私保護的場景下_--45工字钢,我們需要完善密碼交互的呈現形式-_言承旭ella,當輸入時_-易盈彩票靠谱吗?,輸入位短暫顯示為明文|||13彩怎么玩不亏,保持1秒或者保持到下一位密碼輸入後再變成暗文|__11选5彩票网上购买,這樣的交互改善可以確保用戶在輸入中明確內容--众赢财富通怎么样,也滿足了其隱私需求|-爱唯侦察论坛。

undefined


22  |  提交反饋

在用戶完成整個任務環節時|_2m彩票永久免费0秒,提供成功或失敗的反饋能讓用戶在枯燥的表單填寫後有更強烈的情感反饋-|_11086分分彩。所以在設計時_爱尚满屋网,我們需要提供正向的激勵誇讚用戶表單填寫成功_|-超导空调,在表單沒有完成時鼓勵用戶修改內容-|易彩堂的钱能提现吗,重新提交-|众博国际投注怎么样,不可以負麵情緒責怪用戶_当前热门话题。

undefined




今年上半年|-村村通卫星,本著提升途牛產品調性_2m全年开奖记录彩图,為內容傳達提效的初衷|--云鼎彩票靠谱吗,由途牛UED組織並發起了一次針對現有關鍵頁麵升級的項目_|尊彩app是干什么的,在架構升級全量推進初期__254彩票,我們優先選取了酒店表單業務作為此次設計重構的首選試驗點-|15选5复式中奖怎么算。

表單作為一個偏理性的產品-_地窖囚奴,直接影響著用戶決策到產品轉化的數據__-青阳房屋出租,在此環節_|-易网彩票,更需要降低用戶成本_医学基础知识,維持產品決策熱情以實現商業價值上的成功__|北京市统计局信息直报网。在酒店表單業務改版過程中|-栾城黑社会,除了應用上述七方麵的設計準則幫助提升用戶體驗-|_广州圣亚男性科,我們也結合了酒店現有問題和產品特性進行了更為精細化的設計重構__芙蓉树下的博客。




整合信息框架

體製讓步

對用戶來說-百强中学,途牛是一個整體的產品_-_金华职业教务网,所有表單的基礎體驗應該是一致的|||不灭之王波罗丁称号怎么做。以往|-_百度云福利群链接2018,基於企業平台的發展-_-赢咖娱乐注册,酒店細分的國內酒店和國際酒店兩個業務相對獨立_|-女王的厕奴,雖然同樣隸屬於下單環節|--联众好友在线下载,但是業務迭代進程及側重方向的不同導致表單前台呈現差異較大|亿彩官网下载安装。

借助途牛整體關鍵頁麵升級的項目--_张柏芝约谈谢霆锋,在此次酒店業務重構初期___118图库,協同兩個業務的產品|-民族区域自治的核心是、設計-_-实名注册和防沉迷系统、研發我們共同整合資源||_易发彩票资金安全吗,解決曆史遺留體驗問題_--诺基亚ace,為國內|_教师行为规范、國際酒店表單業務進行整體體驗的統一和提升助力-||中博彩票投诉。另一方麵_-高清翡翠台,UED也通過酒店業務的試點思路__|金凤呈祥 官网,將基礎表單框架進行模塊細分-_|单号吧,逐步影響並推廣至全站表單業務升級-_诺基亚3110c游戏下载。

undefined


框架構建

回顧現有酒店表單業務的問題-步步高i606手机主题,主要體現在內容層級模糊-|永盛app彩票网址,類型樣式混亂上_-2019年香港三肖大神。這些隨著每一次迭代需求增加而新增的表單項_-22彩票平台跑了,隻是基於業務類型進行了單模塊的設計_重庆万盛黑山论坛,而對於用戶來說-_-百度云刷机,差異化的表單項樣式無形中增加了填寫時信息獲取的成本|_河南电视台法制频道直播。

基於人體本身的生理構造|-亿发彩票靠谱不,我們在獲取文本信息時-|_璎珞潮牌服装批发网,並不會逐字閱讀|__拳王97电影,往往采用“掃視”的方式識別段落輪廓從而獲取信息|-自动烹饪锅 林志鹏,規律性的排列方式也會幫助持續這種“掃視”的節奏-|湖南中青旅行社,提升信息轉化效率__-国世平本人博客。

因此在設計上我們遵循相似信息一致性的原則__-仙剑5破解吧,簡化重複冗餘的視覺噪音_-360专家杀号双色球澳客,將每個單元表單項模型遵循“上類型+下內容”的形式幫助用戶快速對所需填寫的表單類型建立心理預期-|爵迹风津道单行本。在大量相同的填寫區域|||沈阳特色饭店,統一左側內容標題對齊方式_|丁丁网 南京,並通過字色|_|描写大自然的句子、字重等形式確保未觸發時內容標題為主||-诺基亚w599,暗提示為輔||咖啡恋人馆,填寫後填寫內容為主|_盐城一中贴吧,內容標題為輔的視覺表達||安利净水器价格,從而在表單的不同階段仍舊保證了用戶對於主次信息的識別體驗|_教师个人进修计划。

undefined


品牌信息傳達

為了減弱表單填寫頁冰冷感|鸭梨什么意思,在框架信息整合的基礎上_-123高手彩票预测,我們此次改版也將品牌解構||_银镜马赛克,用色彩的形式融入表單頁麵設計_|-中国国家领导人名单,將品牌功能化-|联想20003,輔助產品以深化品牌用戶心中形成立體感知-_小林子外挂网。

當然品牌功能化的融入也需要有所限製_|_淮钢吧,此次我們主要從氛圍|-_助赢软件官网下载、控件|--168彩票app下载苹果手机版、操作_-|逃亡鳄鱼岛国语版、提示這四個方麵展開---注册送168彩金,在不影響表單主要信息呈現的基礎上|_小男孩大男孩,遵循適度|邯郸晚报电子版、適量兩個原則__哈尔滨群力新区楼盘。

undefined




內容層級排序


用戶吸引

回顧整個購買流程-_coco洗发水真假,填寫訂單業務承擔著維係用戶在產品詳情所產生的內容吸引到內容轉化的責任_|-360彩票注册送50元,而如何在枯燥的酒店表單中維穩甚至加固用戶的內容吸引_||终难忘 秋夜雨寒?為此--|11月4日风雨大作,我們參照了《Actionable Gamification》關於人性八大核心驅動力中的“擁有感&占有欲”和“失去&避免”這兩條來幫助我們--|云购彩票网站是骗局吗。

undefined

結合對用戶使用場景的需求分析_--scc江智背景,我們將信息在用戶心中的關注度進行了重新排序_|dygod电影天堂,首屏弱化了用戶已經在詳情頁明確的酒店名稱-||我们约会吧李飒,轉而對用戶需在此環節明確的房型-|安阳窝窝团购网、入住時間--盈彩国际吧、離店時間等內容進行了強化和整合---3M彩票,明確產品歸屬_-云霄门。同時為了加固用戶的內容吸引_||诗词生成器,我們前置了酒店“超值價”---2004cad下载、“可免費取消”等信息來解除用戶對於產品價格和沉沒成本的疑慮-__掌上彩票是正规的吗,從而正向地激勵用戶完成後續的表單填寫-_阜南教育网。

undefined


細分模塊

除了對首屏信息的排序重置外--|众益彩票app,對於需要用戶填寫的每個單元模塊我們也做出了一些調整_-盈彩彩票怎么样。

如取消險模塊|||快男微电影,此前為避免客訴-|助赢手机版,將所有需要用戶確認和查看的信息都進行了高亮提示和行動引導--铁通宽带影院。這些信息雖然是我們需要用戶知道的---铁路调度系统,但並不一定是用戶在填寫時想要詳細了解的|_|易付宝下载安装,過多的信息幹擾反而影響了有用信息識別_上海静安区火灾,也降低了用戶填寫表單的效率|__雷霆咆哮打野出装。因此新版表單重構時我們將協議信息整合至末尾統一確認_皮肤病图片大全,同時對文字-_|wj00001、icon進行視覺減負||-兰西小屋论坛,統一弱化輔助信息呈現|_花冈实太,轉而強調用戶需要確認的取消險金額和投保人模塊__autocad2004免费下载。

undefined

從上圖國際酒店改版前後的方案進行對比可見_||人受杂交,每個細分模塊都有著或多或少細節的調整-新娘无悔的爱第二部,當然還有沒有展現的輔助信息交互浮層框架的統一--_105彩票官方版。這些信息呈現的形態與交互的邏輯也都遵循著前文“保持秩序|__新浪团购、描述清晰-手贱症候群、化繁為簡|-_陆中菊、幫助用戶||衬衫包装辅料、信息分組_雷霆咆哮打野出装、減少跳轉__|闽江学院教务系统、及時反饋”這七大原則_-造梦西游3极品号源怎么用,每一個細節都可以展開來細細剖析-_休闲网络游戏排行榜,這裏就不多加贅述了-__出售桂花树。




結語

蚍蜉亦可撼樹-||东北鸡,在產品升級的過程中_||长发速递,用戶體驗的提升往往需要依靠像表單這樣一個個微小的業務作為突破點__莱州教育科研网,從而裂變反哺至全局__考好老师让你做一次H。此次酒店表單重構項目從產品角度來看_||霍去病的小软糖,功能上並沒有改變-|众赢彩票是福利彩票吗,而通過代入用戶場景-__西凉剧情诗句,用戶感知--|杂音未来的歌,用戶行為習慣等方麵進行細節的體驗升級_--青岛开发区十中。後續我們還將進行更加深入地探索與迭代|||中国主席名单,將體驗升級持續擴散至其他業務_--试卖网,為每一位途牛用戶帶來更便捷-__快穿之系统养成(h)冉冉、更自然的出行體驗--歌手2017第五期。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|-_7788电视剧百度影音,為期望卓越的國內外企業提供卓越的UI界麵設計-|防火塑料布、BS界麵設計 -2018大乐透开奖结果、 cs界麵設計 ||-cad2014序列号和密钥、 ipad界麵設計 ||动作猜谜游戏、 包裝設計 _-劳动法合同法全文、 圖標定製 --35彩票网址、 用戶體驗 ||11086时时彩靠谱吗、交互設計---德国thomas锅具、 網站建設 _|-cctv6 节目表、平麵設計服務||_sss355。

分享到___金山游侠6: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap