从使用场景和设计方法来看，App与Web的设计有什么区别？
UI=UeserInterface，直译“用户界面”。也就是说UI设计就是用户界面设计。所以只要是用户，也就是人机交互得体验中会用到的界面,都叫做“UI”，对于这些“UI”的设计，我们都统称为“UI设计”。
界面有很多种，我们主要介绍Web与App界面，由浅入深，通过使用场景与设计方法、开发环境与适配要点，两两结合来看一下他们的区别。
关于使用场景，2012年移动互联网元年至今，越来越多的小伙伴将网瘾道具，从电脑改为移动设备。以前聊的是，我配了个XXX的显卡跑游戏，现在越来越多的是，某果的发布会看了吗？
越来越多的用户“道具”，促使我们要去画更多的，用户的“道具”皮肤，也就是我们“俗称”的界面。
在设计不同的“皮肤”时，我们可通过考虑以下几点设计方法，来区分他们。
Web网站–鼠标操作VS移动App–手指场景的局限造成了，使用电脑成本会高一些，相对按钮位置的精确度会更高（在触摸大屏还没出现的时代，我们操作鼠标来实现点击）。
而移动设备，随时随地动动手指就可以了。
我们要注意预留点击区域，控制可点击内容的艰巨性。
（1）使用场景不同
两端的阅读范围及内容长度偏重的也因此不同。
（2）文字大小
App设计：正文30-34px,最小可用28px;注释及提示行文字20-24px，最小不小于20px。（具体字数根据24px-36px的字体大小，以及页边距来定～）。
（3）Banner
相对PC端的位置固定，用户会在一个相对平缓的环境浏览页面，状态也会更为专注。误点击的概率小，更多的会讲究反馈速度和信息的精确度，用户比较多的是收藏正页面而不是单独的段落。而移动端用户因为场景多变，很多时候会利用走路，坐车的实际去浏览界面，更容易产生误操作，也更容易对页面内容产生疲惫感。
Web设计：一般对于界面的通知中心,位置相对固定，但较为隐蔽，用户使用的不多,很难主动唤起用户。
这里设计师需要做的，是将自动呼出的弹窗提示和漂浮窗口这类的“强制”、“粗鲁”的提示形式。（经常被运营要求加个活动飘窗，价格在线客服，这类令人反感的交互方式。）
通过一些，相对“隐蔽”、“固定”、“委婉”的方式及摆放位置，在不影响用户阅读的前提下进行提示交互。
App设计：最常见的是系统自带的推送通知，用户可主动关闭通知，当然也有嵌在页面内的，因为屏幕限制，所以相对网页更加突出，设计师需要思考如何让用户更容易“开启通知权限”。
针对不同设备用户的不同习惯，我们在定义两端的交互内容时也要有所侧重，我们会选择性的对一些内容进行隐藏，也会针对设备区分同一功能的交互方式。比如：两端同样的收藏动作，Web用户比较多的是收藏整页，而不是单独的段落；因此用户会较多使用“收藏夹”、下载等方式。
而对App用户因为切换应用容易被打断操作及阅读环境的限制，除了选择一些App自带的“稍候阅读”功能外，“截屏”保存或长按收藏就比较实用了。
因此，很多App就会拆分两端的用户需求，将商家更多的引导去Web去上架货物;消费者则侧重于App，同时界面会根据不同端“藏”去一部分的功能。
因界面分辨率的差异化，我们也会隐藏一些需求度较低的内容元素。比如：我们常说的面包条菜单，其实就是把Web上常规的Menu，适应智能手机的操作和显示特性而做出的变化。
Web网站：以鼠标或触摸板为操作媒介,常用交互方式有左击、右击、hover鼠标滑过几个操作方式，对应这些操作的web端可以将隐藏的元素，（比如解释类文字，及子菜单等）可以在鼠标hover时或是点击后才展示出来。
移动App：因为实际面积更手指触控的关系，App常用的交互方式有，手指点击、滑动、捏合等各种复杂的手势。同时在App设计时，多遵循用选择代替输入，因此设计师需要更多整合信息，并隐藏一些焦点外的内容。
（1）提示
通用-小红点、提示气泡、文字字重及变色、展开收起常用提示性符号。
（2）内容收起Web网站
点击下拉、hover下拉。
移动App：滑动拖出内容
Tips：我们在“藏”的时候要注意，移动App以单手操作为主，界面上重要元素需要在用户单手点击范围内，或者提供快捷的手势操作。
Web使用的是Wifi或是电缆等无限量的高速网络，而App则是移动网络或是Wifi，网络环境相对复杂。应对这些不同网络环境对应的网络速度，我们可以通过分页区别化和加载区别化来提高用户的体验。
Web网站：一般都是点击进入链接后从0开始加载，也因为网络稳定的“先天”优势，读用翻页符号来解决分页问题，也有一些以支撑的网站选择使用“瀑布流”的方式替代分页。
Tips：注意图片大小-加载图片是对数据流量和网速的“巨大”考验，因此，我们在一些运营类的项目或者是商场图片时，尤其是App图一定要记得压缩。我们可以用到tinypng.com等在线压缩图片的工具进行压缩，也要提醒开发小哥哥发版前记得压缩图片。
最后是网络环境，因为两者各自网络环境的优劣势，我们在做页面布局设计的时候也要作出相应的调整。
参考链接：
本文由@Quines原创发布于人人都是产品经理。未经许可，禁止转载