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

多平臺通用性交互設計思考

  本文作者@一大坨黃 供職@微博UDC設計中心 。近年來,在技術方式,網頁自適應的興起、微軟Win8系統的發布,都在試圖解決一個問題:讓同一產品能在平板、PC等多平臺下同時使用。

  由此可見,替換掉冗余的多版本開發模式,發展通用性,是未來產品發展的一種趨勢。因此,設計師也要在不同的平臺規范和習慣中尋找共同點。

  針對多平臺這一問題,很多網站的解決方法,是為不同的設備提供不同的網頁,比如專門提供一個Mobile版本,或者iPhone 、iPad版本。這樣做固然保證了單一平臺的使用效果,但是他妨礙了用戶對一家產品的連貫性認知。使用起來比較麻煩,同時要維護好幾個版本。而且如果一個網站有多個portal(入口),會大大增加架構設計的復雜度。

  如果你要說“因為屏幕大小不一樣,需要針對性的設計才能最大化的利用屏幕空間。”我認為這是產品經理強加給用戶的需求,因為在用研過程中,很少聽到有用戶的反饋是“我覺得這個地方空掉了,好浪費”。能考慮到最大化利用空間這點固然是好,但是,如果以犧牲用戶對你家產品的操作習慣為代價,那就沒有節操了。

  作為交互設計師一枚,從產品開發者的角度來想,類是要分的,不過差別太大就不好了。因為,版本對于開發者的意義遠遠大于用戶。從用戶的操作行為來看,PC版、iPhone版、iPad版、Android版神馬的… 差別不過是:通過觸摸來完成操作,或是需要通過鼠標來操作。

  要做到一款產品完全適用多個平臺是不可能的,我們能做的是綜合考慮多個平臺,找出共性,讓差異減少到最小。

  在現有的產品設計中,已經看到多平臺通用設計的模型了,例如,雖然Android平臺自帶物理返回鍵,但是在Android許多應用中仍保留了iOS的虛擬返回操作。

多平臺通用性交互設計思考 三聯

  上文分析過,各平臺的操作對用戶來說,差別是通過觸摸或是通過鼠標來操作。接下來,從用戶角度出發,針對這兩種操作行為總結幾點設計中要注意的問題,保證多平臺的通用性:

  交互層面:

  一個完整的交互事件包括:交互行為+交互對象+交互展現。宏觀上多平臺的交互通用性要從這三個方面考慮。至少確保一個產品的主要功能的交互差異不要太大。不過,具體問題還要具體分析,各個平臺的獨特優越性,還是要充分利用。

  由于鼠標懸浮只適用于鼠標操作,而語音、亮度、位移只適用于觸摸操,因此,一個要兼容多平臺的產品,在主要功能上,要避開這些交互行為。而是采用兩者的交集:鼠標點擊、鼠標拖拽、獲得焦點、鍵盤彈起和滾動滾輪。

  主要功能的交互對象一致

  所謂交互對象,就是交互動作的直接接收者,一般體現為一個按鈕或者熱區,要考慮多平臺的通用性,就要從其位置和大小兩個屬性入手

  觸摸操作(iPhone、iPad、Android等)

  位置:用戶使用手機,多是單手握住手機底部,豎屏操作;而使用iPad多是雙手握住機器中部,橫屏操作。這兩種場景下的易觸位置如圖

  大小:根據iOS規范,理論上可觸擊元素的最小

  鼠標操作(PC)

  根據費茨定律,PC端的交互對象描述如下:目標越大,所用時間越短。距離越長,所用時間越長。

  由于PC鼠標箭頭能夠點擊的區域可以很小且相對精確,PC端的約束較輕,所以這里只單向考慮了觸摸操作平臺,將主要功能置于屏幕下方,尺寸大于44像素(約1/4英寸或7毫米)見方的點擊區即可。

  主要功能的交互展現一致

  所謂的交互展示就是交互行為作用在交互對象上產生的結果、反饋。兩大操作形式上不做區分,只要技術支持,形式不限,重要的是平臺實現效果的性價比。

  常用6種效果:轉場、邀請、過渡、反饋、縮放、吸附

  實現多平臺的通用性設計不僅需要交互層面的考慮,還需要視覺和技術層面綜合考慮,由于本人從事交互,其他兩項無法深入分析,找出共性。還請人心人士補充。

  編后語:作者這段話很傲嬌,特意為作者留下

  作為一名普通用戶,吐個槽~

  雖然不是5歲的美國小蘿莉,不過我還是受夠了各種操作平臺的分類,以及瀏覽一個網站或者使用一款產品要學多個版本的行為!!各種PC版、iPhone版、iPad版(所謂的HD)、Android版… 我想說,版你妹呀…

  微博設計團隊博客

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

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 广州监控安装公司_远程监控_安防弱电工程_无线wifi覆盖_泉威安防科技 | 胀套-锁紧盘-风电锁紧盘-蛇形联轴器「厂家」-瑞安市宝德隆机械配件有限公司 | 玉米深加工设备-玉米深加工机械-新型玉米工机械生产厂家-河南粮院机械制造有限公司 | 水厂自动化-水厂控制系统-泵站自动化|控制系统-闸门自动化控制-济南华通中控科技有限公司 | 半自动预灌装机,卡式瓶灌装机,注射器灌装机,给药器灌装机,大输液灌装机,西林瓶灌装机-长沙一星制药机械有限公司 | 成都LED显示屏丨室内户外全彩led屏厂家方案报价_四川诺显科技 | 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 恒温油槽-恒温水槽-低温恒温槽厂家-宁波科麦仪器有限公司 | 招商帮-一站式网络营销服务|互联网整合营销|网络推广代运营|信息流推广|招商帮企业招商好帮手|搜索营销推广|短视视频营销推广 | 聚合氯化铝-碱式氯化铝-聚合硫酸铁-聚氯化铝铁生产厂家多少钱一吨-聚丙烯酰胺价格_河南浩博净水材料有限公司 | 重庆监控_电子围栏设备安装公司_门禁停车场管理系统-劲浪科技公司 | 多功能干燥机,过滤洗涤干燥三合一设备-无锡市张华医药设备有限公司 | 手板-手板模型-手板厂-手板加工-生产厂家,[东莞创域模型] | 自清洗过滤器-全自动自清洗过反冲洗过滤器 - 中乂(北京)科技有限公司 | 西点培训学校_法式西点培训班_西点师培训_西点蛋糕培训-广州烘趣西点烘焙培训学院 | uv机-uv灯-uvled光固化机-生产厂家-蓝盾机电| 电缆接头_防水接头_电缆防水接头_防水电缆接头_上海闵彬 | 四川成人高考_四川成考报名网 | 517瓜水果特产网|一个专注特产好物的网站 | 体视显微镜_荧光生物显微镜_显微镜报价-微仪光电生命科学显微镜有限公司 | 上海律师事务所_上海刑事律师免费咨询平台-煊宏律师事务所 | 安驭邦官网-双向万能直角铣头,加工中心侧铣头,角度头[厂家直销] 闸阀_截止阀_止回阀「生产厂家」-上海卡比阀门有限公司 | 天津仓库出租网-天津电商仓库-天津云仓一件代发-【博程云仓】 | 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 电解抛光加工_不锈钢电解抛光_常州安谱金属制品有限公司 | sfp光模块,高速万兆光模块工厂-性价比更高的光纤模块制造商-武汉恒泰通 | 希望影视-高清影视vip热播电影电视剧免费在线抢先看 | 卫浴散热器,卫浴暖气片,卫生间背篓暖气片,华圣格浴室暖气片 | 无菌水质袋-NASCO食品无菌袋-Whirl-Pak无菌采样袋-深圳市慧普德贸易有限公司 | 工业制氮机_psa制氮机厂家-宏骁智能装备科技江苏有限公司 | 天空彩票天下彩,天空彩天空彩票免费资料,天空彩票与你同行开奖,天下彩正版资料大全 | 网站优化公司_北京网站优化_抖音短视频代运营_抖音关键词seo优化排名-通则达网络 | 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 大数据营销公司_舆情监测软件_上海SEO公司-文军营销官网 | 挤出机_橡胶挤出机_塑料挤出机_胶片冷却机-河北伟源橡塑设备有限公司 | 电动高压冲洗车_价格-江苏速利达机车有限公司 | 自动部分收集器,进口无油隔膜真空泵,SPME固相微萃取头-上海楚定分析仪器有限公司 | 汽车整车综合环境舱_军标砂尘_盐雾试验室试验箱-无锡苏南试验设备有限公司 | 团建-拓展-拓展培训-拓展训练-户外拓展训练基地[无锡劲途] | 家用净水器代理批发加盟_净水机招商代理_全屋净水器定制品牌_【劳伦斯官网】 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 |