整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
使用场景和设计方法来看，App与Web的设计有什么区别？
早前，总是遇到问“Web设计”和“UI设计”分别做了多久？之类的询问，文章开始之前，我们先来聊聊什么是UI设计。
UI=Ueser Interface，直译“用户界面”。也就是说UI设计就是用户界面设计。所以只要是用户，也就是人机交互得体验中会用到的界面,都叫做“UI”，对于这些“UI”的设计，我们都统称为“UI设计”。
界面有很多种，我们主要介绍Web与App界面，由浅入深，通过使用场景与设计方法、开发环境与适配要点，两两结合来看一下他们的区别。
关于使用场景，2012年移动互联网元年至今，越来越多的小伙伴将网瘾道具，从电脑改为移动设备。以前聊的是，我配了个XXX的显卡跑游戏，现在越来越多的是，某果的发布会看了吗？
越来越多的用户“道具”，促使我们要去画更多的，用户的“道具”皮肤，也就是我们“俗称”的界面。
在设计不同的“皮肤”时，我们可通过考虑以下几点设计方法，来区分他们。
Web网站 – 鼠标操作 VS 移动App – 手指场景的局限造成了，使用电脑成本会高一些，相对按钮位置的精确度会更高（在触摸大屏还没出现的时代，我们操作鼠标来实现点击）。
而移动设备，随时随地动动手指就可以了。
我们要注意预留点击区域，控制可点击内容的艰巨性。
（1）使用场景不同
两端的阅读范围及内容长度偏重的也因此不同。
（2）文字大小
Web设计 ：比较随意，文章正文字体12px/14px；页面安全区域1080px～1280px为宜（一些展示页面字体会做到16-20px或更大）。
App设计：正文30-34px,最小可用28px;注释及提示行文字20-24px，最小不小于20px。（具体字数根据24px-36px的字体大小，以及页边距来定～）。
（3）Banner
相对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设计时，多遵循用选择代替输入，因此设计师需要更多整合信息，并隐藏一些焦点外的内容。
（1）提示
通用-小红点、提示气泡、文字字重及变色、展开收起常用提示性符号。
（2）内容收起Web网站
点击下拉、hover下拉。
移动App：滑动拖出内容
Tips：我们在“藏”的时候要注意，移动App以单手操作为主，界面上重要元素需要在用户单手点击范围内，或者提供快捷的手势操作。
Web使用的是Wifi或是电缆等无限量的高速网络，而App则是移动网络或是Wifi，网络环境相对复杂。应对这些不同网络环境对应的网络速度，我们可以通过分页区别化和加载区别化来提高用户的体验。
Web网站：一般都是点击进入链接后从0开始加载，也因为网络稳定的“先天”优势，读用翻页符号来解决分页问题，也有一些以支撑的网站选择使用“瀑布流”的方式替代分页。
比如，花瓣、蘑菇街这类“看图”的网站，因为搜索后的数据格式相同，用户对同一内容兴趣关注度大，停留对比时间较长，所以优先使用“瀑布流”。
移动App：因用户使用环境复杂（可能在移动过程中从通畅环境到封闭的信号较差的环境,网络可能从有到无、从快到慢）。所以和网站有区别的是，我们一般通过用户主动下载、更新的方式来加载主要框架；实时的数据信息则是在用户打开App后通过当前网络加载，也因为网络不稳定的劣势，很少有翻页符号来区别每页，反复刷新加载会造成等待时间较长。
Tips：注意图片大小 -加载图片是对数据流量和网速的“巨大”考验，因此，我们在一些运营类的项目或者是商场图片时，尤其是App图一定要记得压缩。我们可以用到tinypng.com等在线压缩图片的工具进行压缩，也要提醒开发小哥哥发版前记得压缩图片。
最后是网络环境，因为两者各自网络环境的优劣势，我们在做页面布局设计的时候也要作出相应的调整。
虽然现在Web端的网站等在慢慢的被弱化，连鹅厂都放弃了Web端的QQ，但是作为UI设计师，对于Web端的基本工还是不能放弃啊～至少App战胜不了后台系统！
参考链接：
本文由 @Quines 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。
链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。
文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。
谷歌的文本链接是蓝色，没有下划线
百度的文本链接也是蓝色，关键词是红色，有下划线
而京东的文本链接有灰色，有白色，有黑色
按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。
按钮样式链接
图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。
如桌面弹出这种游戏小窗口的图片式链接
由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位
链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。
提示用美拍APP打开
按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。
链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。
与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。
HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。
外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。
外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。
如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。
链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：
点击前
悬停时，下面浮现半透明线条
点击时，有波纹晕开的动态效果
点击后，下面线条粗
有时候是3种状态，比如百度网和知乎应用：
默认状态
点击时链接变红
点击后链接变成紫色
IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。
默认状态
点击状态
用力点击会弹出预览小窗口
有些时候只有2种状态，如下图谷歌网：
默认和点击后状态一样
鼠标悬停时出现下划线
默认状态
点击时
而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。
总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。
作者：潘瑶琼（简书作者）
本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。
源：环球时报
国 App 的火爆早已 超过一国范畴，给全球用 户带去便利和欢乐。
本报驻印度、埃及、尼日利亚、德国特派特约记者 胡博峰 曲翔宇 姜 宣 青 木
编者按：印度对TikTok等中国App的禁令以及美国可能的“强有力行动”，在阻碍中国互联网公司走向全球的同时，也让我们看到中国App这些年在世界上的强势崛起。在众多“中国制造”的App中，TikTok、微信、全球速卖通（AliExpress）已经成为全球排行榜上的佼佼者。通过分析观察，我们发现这些能受到各国用户追捧的App都有其共同的成功策略，而失败的经验同样值得珍视。
印度：原本前途无限
日前，印度政府决定封禁TikTok等59款中国应用程序。禁令发布后，印度媒体惊呼原来中国手机App在印度已经不知不觉这么火了。以TikTok为例，其在印度下载量超过4.57亿，几乎占全球下载量的1/3。若非政治因素，中国App本来可以说在印度前途无限。
行业媒体认为，近年来中国手机App在印度的发展犹如雨后春笋。谷歌应用程序商店发布的2017年下载量排名前十的手机App中只有2款来自中国公司，而一年之后就有5款。保尔森研究所的调查显示，中国手机App前后只用5年时间就占领了印度市场的半壁江山，打破了美国脸书、推特等对印度市场的垄断地位。2015年，中国手机App在印度的下载量占比只有23.9%，但2019年就飙升至60.5%。与此同时，美国手机App的印度市场份额则下降到31%。难怪有媒体评论说，印度政府对中国手机App发布禁令，其实是帮了美国公司的忙。
这些中国手机App在印度市场摸爬滚打中虽然是“八仙过海，各显神通”，但每家公司都有决胜的法宝。分析背后共同经验，其实不外乎两点，即巨额的营销投入和本地化的经营方式。2012年，腾讯旗下的WeChat（微信海外版）登陆印度时，曾不惜重金邀请宝莱坞大牌明星作为品牌大使并因此迅速“圈粉”，不过短短3年便折戟沉沙。WeChat前印度市场与战略副总监希曼舒·古普塔认为，“这很大程度上归咎于本地化工作不足”。在此之后，几乎所有来到印度发展的中国手机App公司都吸取了这一经验。例如，字节跳动公司旗下的Helo在印度的团队几乎都是本地人。值得一提的是，Helo公司的内容运营总监西雅曼迦·巴鲁瓦曾在《印度斯坦时报》《今日印度》等多家主流媒体任职，不仅在产品内容方面有独到之处，在营销等方面善于制定本地化策略，而且其在当地媒体也积累了不少人脉，对Helo树立品牌形象也很有帮助。
本地化的另一面体现在中国手机App善于深耕印度二线乃至三线城市市场。印度科技新闻网站FactorDaily的一篇报道说，大多数中国手机App刚到印度时，并没有对印度市场情况进行细分。但它们一般都可以很快发现印度二三线城市的潜在需求，并迅速实现产品升级和转型。众所周知，印度是个宗教和语言都非常多元化的社会，因此市场细分程度很高。某种意义上来说，谁能更多、更好地占领细分市场，就能决胜印度整体市场。而在这方面，中国手机App公司做得非常出色。新加坡国立大学教授克拉布特利认为，印度市场中有约4亿用户沉淀在这些细分市场的城镇中。这些城市有的位于印地语中心地带，有的位于主要说泰米尔语的泰米尔纳德邦，还有的位于安得拉邦，那里的人说泰卢固语。克拉布特利说，“这些居住在二三四线城市的互联网用户收入不高，也不会说英语，但用户群数量非常庞大”。针对印度这些二三线城市，中国企业一方面考虑到英语在这些地方并不流行，因此推出的App中有当地语言选项；另一方面，短视频类应用程序会通过大数据和算法，非常注重精准投放，多以相对轻松的内容为主。
中东：年轻群体带来不竭动力
过去几年，中东已成为中国互联网创业者最重要的市场之一。游戏、直播、短视频、跨境电商……中国创业者已在快速增长的中东移动互联网市场中发现大量掘金机会，涌现出一批佼佼者。不过，专业人士接受《环球时报》记者采访时表示，近年中国App出海中东北非地区总体喜忧参半。
TikTok毫无疑问是中国在中东互联网世界的“头号网红”。“TikTok在中东北非地区输出的不仅是内容，更是生态，一个海外本土用户喜闻乐见的内容传播生态。”海外电商专家邹昶华对《环球时报》记者分析说，网红经济近年在中东北非悄然兴起，TikTok的成功在于前期充分准备，乘势而上，不断吸引各行各业的KOL（关键意见领袖）在自己的App上发布有趣内容，极大迎合本地用户的关注点。另外，在诸如迪拜哈利法塔一年一度的新年焰火等本地关注度高的活动中，TikTok总舍得投入大笔资源，适时出现在高峰时段。这种线上与线下的结合，能够迅速拉抬品牌知名度。
实现本地化的前提，在于对当地基本情况了然于心。中东地区总人口约5亿，互联网人口逼近3亿，渗透率近60%，移动互联网建设大踏步前进。《环球时报》记者去年曾参与中东北非南亚电信领袖峰会，了解到在中国企业的推动下，所有海合会国家已完成第一波5G部署。同时，中东北非多个国家整体人口结构高度年轻化，约60%-80%的人口年龄在30岁以下。庞大年轻群体的需求外加经济多元化转型的需要，是移动互联网发展的不竭动力。
“虽然本地化是重要突破口，但毕竟成本高昂，并非所有出海App都能通过本地化脱颖而出。”邹昶华对《环球时报》记者表示，在TikTok高歌猛进的背后，也有部分中国App铩羽而归。以近年备受关注的中东跨境电商App为例，本地化涉及自建仓储配送，运营成本高且库存风险大，经营得当方能提高用户体验，稍有差错则会满盘皆输。
对于中企而言，文化差异的风险始终存在。尽管一些国家女性单独出门受限让电商平台赚得盆满钵满，但同样的文化逻辑，可能导致互联网直播时，主播露出胳膊就可能被用户投诉。该地区复杂的地缘政治情况，也对经济环境构成一定威胁。比如，对伊朗、卡塔尔等市场的深度参与，很可能引起沙特、阿联酋等国的反感。
欧洲：注重隐私与个性化
《环球时报》记者观察到，在德国等欧洲国家，中国的App最近几年发展迅速。最受欢迎的显然是社交App，尤其是TikTok，持续保持在下载榜前三的位置。
许多欧洲人从中国电商App如AliExpress、Joybuy、GearBest、Banggood等购买中国商品。华为、小米、联想、大疆创新、国航等中国品牌在欧洲推出官方App，也可用来线上购物。不少用户表示，在大疆创新、小米、国航等App上购物很方便。付款方式与其他欧洲品牌App类似，可以用信用卡、PayPal、借记卡，甚至还有货到付款，不定期还有打折活动。柏林夏里特医院的女护士贝阿特告诉《环球时报》记者，她非常喜欢在中国的AliExpress、小米等App上购物，不仅因为价格便宜，而且产品紧跟潮流，有创意。
欧洲近两年也开始流行美妆App，这股潮流还是从中国等亚洲国家流行过来的。这主要是因为三星、华为、小米等亚洲品牌手机在欧洲的畅销，而这些手机中常常有美妆App推荐，尤其是美图秀秀等非常受欢迎。此外，语言培训、图片编辑、视频剪辑等工具类App，来自中国的也非常多。工具类App也是最赚钱的。比如ChineseSkill这款，在苹果和谷歌商店评分高达4.8，要价31.99欧元。
德国慕尼黑大学网络经济学者穆勒对《环球时报》记者表示，相对于美国，中国App进入欧洲的阻碍较少。但目前在美国的压力下，欧洲对中国TikTok等App的调查也多起来了。他认为，为了应对政治阻碍，设立独立的海外版是一种对策。中国App尤其要保护青少年以及用户的隐私。同时，中国公司也要勇于维权，表明自己的态度，这也有利于提高透明度，减少误解。
其次，文化方面的因素也不容忽视。比如，许多中国App只有中文版和英文版，没有德语等语言，这就阻碍其深入到更多用户中。再如，许多年轻用户向《环球时报》记者反映，美图秀秀等美妆App主要定位美白、浪漫或可爱，这与他们这边喜欢的奇趣、创意等趋势有些区别。他们认为，这些App太亚洲化，希望有更适合欧洲人兴趣的。
再次，要多营销。穆勒认为，一种是通过苹果和谷歌商店进行推销，还有就是通过专业人士推荐。支付宝的营销比较有针对性，在欧洲主要针对中国游客。中国App不妨先从到中国出差旅游的欧洲人入手，把一些相关App打包在一起进行推荐，然后不断向全欧洲扩展。他认为，未来App竞争主要在中美之间展开。
*请认真填写需求信息，我们会在24小时内与您取得联系。
