pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

5個值得學習的APP交互方式

   一、下拉輸入

  代表應用: Flickr、Opera Coast、any.do、Timi記賬

  即通過下拉的動作來呼出輸入操作,比如搜索、添加項目等,比如flickr、opera coast就是通過下拉呼出搜索框,另外,還有一種就是下拉添加項目,此類的app有any.do、Timi記賬。下拉是一個很自然很便捷的動作,很適合于”隨時、快速輸入”的情境,比如any.do作為GTD應用,采取下拉添加的設計就非常適合,因為很多時候,我們都會在這樣一種情境中使用這個功能:走在路上,突然有了一個靈感,于是趕緊打開any.do,把想到的記下來。這樣的情境要求能夠以最簡單、最快的方式輸入,而不用去尋找添加按鈕。

Opera Coast的下拉搜索

  圖1 Opera Coast的下拉搜索

Flickr的下拉搜索

  圖2 Flickr的下拉搜索

  二、登錄驗證帳號

  代表應用: 印象筆記

  通常的登錄和注冊是分開設計的,而印象筆記將登錄和注冊整合,每一步驟都只有一個表單,注冊和登錄沒有任何沖突。這樣避免了”用戶已存在”然后又要重新填寫表單的不良體驗,在流程上有很大的優化,如下圖4所示:

印象筆記

  圖3 印象筆記

印象筆記的登錄流程優化

  圖4 印象筆記的登錄流程優化

  三、未激活按鈕的設計

  代表應用: snapchat

  交互設計中有個叫做”預設用途”的原則,大意就是一個界面或者控件,要讓用戶一看見它就知道如何使用。顯然,最基本的要求就是至少要能知道這個控件可否操作,而所謂”未激活的按鈕”就是含有”激活”和”未激活”兩種狀態而目前處于”未激活”狀態的按鈕,這就要求分別對兩種狀態進行設計。通常來說,有兩種方法,隱藏或呈不可操作的視覺效果(比如灰色),比如snapchat的表單填寫界面,當表單尚未填寫完全時,CONTINUE按鈕一直處于灰色狀態,即告訴用戶該按鈕尚未激活。讀到這里你或許會覺得這其實很簡單嘛,但只要你仔細觀察一下,就會發現有很多的應用沒有這樣設計。

snapchat的表單

  圖5 snapchat的表單

  四、輸入框title或提示文本的解決方案

  代表應用: dubble

  通常設計輸入框時,我們會使用Lable標簽給每個輸入框一個title,比如”用戶名”、”密碼”,另外,還會在輸入框中使用灰色的提示文本,如圖6所示。但是,在手持設備的應用中,這樣的設計會產生兩個問題,一是浪費屏幕空間,我們知道,手持設備的屏幕空間是很寶貴的,而以Lable標簽呈現的title會占去很大一塊屏幕空間;二是提示文本在用戶輸入時便消失不見,提示效果無法持續到任務結束。那么,如何解決這兩個問題呢,如下圖7所示,在用戶輸入時將title移至輸入框邊框中,或者像dubble應用的注冊界面,把輸入框的提示文本移動到鍵盤上面,如圖8所示:

圖6 通常情況下的輸入框設計

  圖6 通常情況下的輸入框設計

圖7 將title移至輸入框邊框

  圖7 將title移至輸入框邊框

dubble的輸入框提示文本

  圖8 dubble的輸入框提示文本

  五、懸浮聊天窗,滑動關閉聊天窗口

  代表應用: Facebook

  如圖9所示,Facebook將聊天窗口懸浮在界面邊緣上,可以任意拖動,但會自動貼緊屏幕邊緣,打開聊天時其他背景半透明遮罩,層次感很強,按住聊天窗口任意位置向右上角滑動即可關閉聊天窗,有一個回收的動效。淘寶手機客戶端也借助了這個設計,這樣的設計對于以用戶動態為主,而私信聊天為輔的應用非常適合,比如微博、QQ空間等。稍微嘴賤一句,新浪微博之前一直想加強社交屬性,減弱媒體屬性的標簽,但最終未果,我覺得新浪早點重視移動客戶端并且像facebook一樣用設計來加強社交屬性或許會比較有效果。

facebook的懸浮聊天窗口

  圖9 facebook的懸浮聊天窗口

  好了,這篇文章就到此為止了,找圖、截圖神馬的真心不容易啊。如果你也發現了其他有趣并且有價值的交互設計,我非常期盼你也與我分享。你我共同進步,Peace and Love!

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 吸音板,隔音板,吸音材料,吸音板价格,声学材料 - 佛山诺声吸音板厂家 | 智能监控-安防监控-监控系统安装-弱电工程公司_成都万全电子 | 广州网站建设_小程序开发_番禺网站建设_佛山网站建设_粤联网络 | 成都治疗尖锐湿疣比较好的医院-成都治疗尖锐湿疣那家医院好-成都西南皮肤病医院 | 全自动定氮仪-半自动凯氏定氮仪厂家-祎鸿仪器 | 北京银联移动POS机办理_收银POS机_智能pos机_刷卡机_收银系统_个人POS机-谷骐科技【官网】 | 快速门厂家-快速卷帘门-工业快速门-硬质快速门-西朗门业 | 米顿罗计量泵(科普)——韬铭机械 | 管家婆-管家婆软件-管家婆辉煌-管家婆进销存-管家婆工贸ERP | 超声波焊接机,振动摩擦焊接机,激光塑料焊接机,超声波焊接模具工装-德召尼克(常州)焊接科技有限公司 | 淋巴细胞分离液_口腔医疗器材-精欣华医疗器械(无锡)有限公司 | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | 盐城网络公司_盐城网站优化_盐城网站建设_盐城市启晨网络科技有限公司 | 济南品牌设计-济南品牌策划-即合品牌策划设计-山东即合官网 | 黑龙江「京科脑康」医院-哈尔滨失眠医院_哈尔滨治疗抑郁症医院_哈尔滨精神心理医院 | 航空障碍灯_高中低光强航空障碍灯_民航许可认证航空警示灯厂家-东莞市天翔航天科技有限公司 | 塑料薄膜_PP薄膜_聚乙烯薄膜-常州市鑫美新材料包装厂 | 压滤机-洗沙泥浆处理-压泥机-山东创新华一环境工程有限公司 | 接地电阻测试仪[厂家直销]_电缆故障测试仪[精准定位]_耐压测试仪-武汉南电至诚电力设备 | 大型果蔬切片机-水果冬瓜削皮机-洗菜机切菜机-肇庆市凤翔餐饮设备有限公司 | 除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司 | 游动电流仪-流通式浊度分析仪-杰普仪器(上海)有限公司 | 武汉印刷厂-不干胶标签印刷厂-武汉不干胶印刷-武汉标签印刷厂-武汉标签制作 - 善进特种标签印刷厂 | 叉车电池-叉车电瓶-叉车蓄电池-铅酸蓄电池-电动叉车蓄电池生产厂家 | 涡街流量计_LUGB智能管道式高温防爆蒸汽温压补偿计量表-江苏凯铭仪表有限公司 | 北京浩云律师事务所-企业法律顾问_破产清算等公司法律服务 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 | GEDORE扭力螺丝刀-GORDON防静电刷-CHEMTRONICS吸锡线-上海卓君电子有限公司 | LED太阳能中国结|发光红灯笼|灯杆造型灯|节日灯|太阳能灯笼|LED路灯杆装饰造型灯-北京中海轩光电 | 东莞市天进机械有限公司-钉箱机-粘箱机-糊箱机-打钉机认准东莞天进机械-厂家直供更放心! | 两头忙,井下装载机,伸缩臂装载机,30装载机/铲车,50装载机/铲车厂家_价格-莱州巨浪机械有限公司 | 防渗土工膜|污水处理防渗膜|垃圾填埋场防渗膜-泰安佳路通工程材料有限公司 | 全自动定氮仪-半自动凯氏定氮仪厂家-祎鸿仪器 | MTK核心板|MTK开发板|MTK模块|4G核心板|4G模块|5G核心板|5G模块|安卓核心板|安卓模块|高通核心板-深圳市新移科技有限公司 | 斗式提升机,斗式提升机厂家-淄博宏建机械有限公司 | 阿米巴企业经营-阿米巴咨询管理-阿米巴企业培训-广东键锋企业管理咨询有限公司 | 手机存放柜,超市储物柜,电子储物柜,自动寄存柜,行李寄存柜,自动存包柜,条码存包柜-上海天琪实业有限公司 | 药品/药物稳定性试验考察箱-埃里森仪器设备(上海)有限公司 | 净水器代理,净水器招商,净水器加盟-FineSky德国法兹全屋净水 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 塑胶跑道_学校塑胶跑道_塑胶球场_运动场材料厂家_中国塑胶跑道十大生产厂家_混合型塑胶跑道_透气型塑胶跑道-广东绿晨体育设施有限公司 |