Web app设计自查表

web app在设计的过程中，有很多和原生应用不一样的地方，这次做了一次webapp。过程中和前端一起踩了不少的坑，所以这次总结出来，以后做web app的时候进行自查，避免出现开发到一半发现这里有问题那里有问题的情况。

学而第一版web app的体验确实差，直接将web改成了web app 跳出率太高，所以这一次做web app的设计会改善用户体验。

一.不同app的区别

图片来源：聊聊Web App、Hybrid App与Native App的设计差异

不同app技术区别

二.思考webapp的用户场景

《About Face4》中有一个交互设计原则在设计web app的过程中十分适用：把用户想象成很聪明但是很忙碌的人。在做web app之前，我们可以先思考，用户在什么样的场景下会打开web app呢？
以下是我考虑到的一些用户场景的例子：

• 急需使用的情况下，希望web app替代原生app，例如购买团购券，通过地图查看当前位置，但手机里却没有下载团购的app或者地图的app。“这家店可以用美团的优惠券呢，你手机上下了美团吗”eg：大众点评，美团

• 各平台对比，在PC不在手边的时候，希望查看一下当前想要购买的东西的价格，或者购买某种物品，或者对某种物品进行各种平台上价格的比较的时候，“我想买一本书，看看哪个平台比较便宜’eg：亚马逊，当当

• 通过QQ，微信等分享的链接点进去进行操作的时候，比如在微信群中分享优惠券信息，点击进去领取优惠券并查看优惠券适用的范围。“京东在发199-100的优惠券呢”eg：京东，饿了么

• 通过社交平台与好友沟通请求代付款的场景，“帮我买一下这个东西吧”“帮我看下这件裙子怎么样”eg;淘宝，京东

所有场景都有一些共同的特点：用户以目标为导向，他们希望快速打开web app并且实现一定的目标，希望自己的操作能够简单及时有效。

check list：

根据这次学而踩到的坑，参考google移动白皮书列出的
check list：

一.结构与框架

1.结构是否足够简洁，是否有非闭环的结构
2.加载顺序是否按照逻辑顺序加载
3.采用的结构是否是用户熟悉的
4.导航是否友好，点击logo是否返回主页
5.是否能够正确的引导用户进行操作
6.是否已将操作步骤、点击次数减至最少？
7.用户是否能明确知道当前所在位置

二.视觉与内容

1.界面元素和控件的文字、位置、布局、分组、大小、颜色、形状等是否合理、容易识别、一致
2.视觉元素是否组件化
3.拓展内容是否阻碍正常访问
4.语言表达是否合适
5.测试不同机型是否出现布局混乱

三.互动行为

1.搜索是否随时易见
2.搜索框是否友好（推荐tags+历史记录）
3.不注册的情况下网站是否能正常使用部分功能
4.如果有推荐栏，是否能记录用户路径分析用户信息
5.信息输入是否友好
6.表单是否高效
7.是否会出现需要缩放屏幕的界面
8.是否允许必要的撤销操作

四.情感化

1.是否有情感化的微交互细节
2.loading界面，跳转界面的卡顿是否处理
3.服务器错误界面，404界面是否处理
4.是否提供反馈栏
5.获取位置信息是否说明理由

reference to：
【1】网易UEDC-Web交互设计优化的简易check list
【2】google-multi screen moblie whitepaper research studies
【3】聊聊Web App、Hybrid App与Native App的设计差异