您好、欢迎来到现金彩票网!
当前位置:2019欢乐棋牌 > 左击 >

App与Web的设计区别(上):使用场景与设计方法

发布时间:2019-06-24 20:33 来源:未知 编辑:admin

  早前,总是遇到问“Web设计”和“UI设计”分别做了多久?之类的询问,文章开始之前,我们先来聊聊什么是UI设计。

  UI=Ueser Interface,直译“用户界面”。也就是说UI设计就是用户界面设计。所以只要是用户,也就是人机交互得体验中会用到的界面,都叫做“UI”,对于这些“UI”的设计,我们都统称为“UI设计”。

  界面有很多种,我们主要介绍Web与App界面,由浅入深,通过使用场景与设计方法、开发环境与适配要点,两两结合来看一下他们的区别。

  关于使用场景,2012年移动互联网元年至今,越来越多的小伙伴将网瘾道具,从电脑改为移动设备。以前聊的是,我配了个XXX的显卡跑游戏,现在越来越多的是,某果的发布会看了吗?

  越来越多的用户“道具”,促使我们要去画更多的,用户的“道具”皮肤,也就是我们“俗称”的界面。

  Web网站 鼠标操作 VS 移动App 手指场景的局限造成了,使用电脑成本会高一些,相对按钮位置的精确度会更高(在触摸大屏还没出现的时代,我们操作鼠标来实现点击)。

  相对PC端的位置固定,因为显示器种类繁多,窗口也可以随意缩放,设计时需要优先确定页面的安全区域,但同样因为屏幕大所有现实的内容相对更丰富。

  而移动端的页面相对就小很多,虽然小但显得很灵活,很多App卖点就是利用碎片花时间学习、购物、娱乐,对应这点的不同,移动端的内容会更加精简。

  Web设计 :比较随意,文章正文字体12px/14px;页面安全区域1080px~1280px为宜(一些展示页面字体会做到16-20px或更大)。

  App设计:正文30-34px,最小可用28px;注释及提示行文字20-24px,最小不小于20px。(具体字数根据24px-36px的字体大小,以及页边距来定~)。

  相对PC端的位置固定,用户会在一个相对平缓的环境浏览页面,状态也会更为专注。误点击的概率小,更多的会讲究反馈速度和信息的精确度,用户比较多的是收藏正页面而不是单独的段落。而移动端用户因为场景多变,很多时候会利用走路,坐车的实际去浏览界面,更容易产生误操作,也更容易对页面内容产生疲惫感。

  Web设计:一般对于界面的通知中心,位置相对固定,但较为隐蔽,用户使用的不多,很难主动唤起用户。

  这里设计师需要做的,是将自动呼出的弹窗提示和漂浮窗口这类的“强制”、“粗鲁”的提示形式。(经常被运营要求加个活动飘窗,价格在线客服,这类令人反感的交互方式。)

  通过一些,相对“隐蔽”、“固定”、“委婉”的方式及摆放位置,在不影响用户阅读的前提下进行提示交互。

  App设计:最常见的是系统自带的推送通知,用户可主动关闭通知,当然也有嵌在页面内的,因为屏幕限制,所以相对网页更加突出,设计师需要思考如何让用户更容易“开启通知权限”。

  针对不同设备用户的不同习惯,我们在定义两端的交互内容时也要有所侧重,我们会选择性的对一些内容进行隐藏,也会针对设备区分同一功能的交互方式。比如:两端同样的收藏动作,Web用户比较多的是收藏整页,而不是单独的段落;因此用户会较多使用“收藏夹”、下载等方式。

  而对App用户因为切换应用容易被打断操作及阅读环境的限制,除了选择一些App自带的“稍候阅读”功能外,“截屏”保存或长按收藏就比较实用了。

  平台,会在两端分别给用户不同的功能侧重。就好像工作时间会更优先pc端去处理事情,这是因为,PC端能够更好的拆解我们的需求,因为需求不同界面的侧重功能也会不同。

  比如:我们会有在平台编辑文章并配图、排版发布平台的需求,但是在两端同时体验操作后发现,App任务发布的复杂程度让用户难以理解。往往一个Web页面就能完成的事情App端需要2-3个页面才能完成,加上大段的文字内容需要编辑,以及网络状态原因,让发布任务变得很艰难。

  因此,很多App就会拆分两端的用户需求,将商家更多的引导去Web去上架货物;消费者则侧重于App,同时界面会根据不同端“藏”去一部分的功能。

  因界面分辨率的差异化,我们也会隐藏一些需求度较低的内容元素。比如:我们常说的面包条菜单,其实就是把Web上常规的Menu,适应智能手机的操作和显示特性而做出的变化。

  Web网站:以鼠标或触摸板为操作媒介, 常用交互方式有左击、右击、hover鼠标滑过几个操作方式,对应这些操作的web端可以将隐藏的元素,(比如解释类文字,及子菜单等)可以在鼠标hover时或是点击后才展示出来。

  移动App:因为实际面积更手指触控的关系,App常用的交互方式有,手指点击、滑动、捏合等各种复杂的手势。同时在App设计时,多遵循用选择代替输入,因此设计师需要更多整合信息,并隐藏一些焦点外的内容。

  Tips:我们在“藏”的时候要注意,移动App以单手操作为主,界面上重要元素需要在用户单手点击范围内,或者提供快捷的手势操作。

  Web使用的是Wifi或是电缆等无限量的高速网络,而App则是移动网络或是Wifi,网络环境相对复杂。应对这些不同网络环境对应的网络速度,我们可以通过分页区别化和加载区别化来提高用户的体验。

  Web网站:一般都是点击进入链接后从0开始加载,也因为网络稳定的“先天”优势,读用翻页符号来解决分页问题,也有一些以支撑的网站选择使用“瀑布流”的方式替代分页。

  比如,花瓣、蘑菇街这类“看图”的网站,因为搜索后的数据格式相同,用户对同一内容兴趣关注度大,停留对比时间较长,所以优先使用“瀑布流”。

  移动App:因用户使用环境复杂(可能在移动过程中从通畅环境到封闭的信号较差的环境,网络可能从有到无、从快到慢)。所以和网站有区别的是,我们一般通过用户主动下载、更新的方式来加载主要框架;实时的数据信息则是在用户打开App后通过当前网络加载,也因为网络不稳定的劣势,很少有翻页符号来区别每页,反复刷新加载会造成等待时间较长。

  Tips:注意图片大小 -加载图片是对数据流量和网速的“巨大”考验,因此,我们在一些运营类的项目或者是商场图片时,尤其是App图一定要记得压缩。我们可以用到在线压缩图片的工具进行压缩,也要提醒开发小哥哥发版前记得压缩图片。

  最后是网络环境,因为两者各自网络环境的优劣势,我们在做页面布局设计的时候也要作出相应的调整。

  虽然现在Web端的网站等在慢慢的被弱化,连鹅厂都放弃了Web端的QQ,但是作为UI设计师,对于Web端的基本工还是不能放弃啊~至少App战胜不了后台系统!

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

http://beritaumat.com/zuoji/31.html
锟斤拷锟斤拷锟斤拷QQ微锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟斤拷
关于我们|联系我们|版权声明|网站地图|
Copyright © 2002-2019 现金彩票 版权所有