最近发现除了网上po出来的交互设计面试最爱问的7个问题外，“PC端和移动端设计差别”这个问题也是深受面试官青睐。因为很多公司并没有细分设计师是属于移动组还是PC组的，接的项目都是两个端都要做。今年我参加的面试和去年参加的面试还有更早的貌似这个问题都被我遇到了…但每次回答得都不是很完整（所以封面表情如此丧）

最近跟表单杠上了，所以今天就总结下PC端和移动端产品的表单设计差别

先从两端设备的差异说起

1.PC端屏幕大，有鼠标键盘灵活且精准的交互形式，适合复杂的功能；移动端屏幕空间有限，手指操作准确性不及鼠标，移动端更适合更为简单的功能。文本输入不方便，反馈不明显。但移动端丰富的手势操作可增加体验的便捷和趣味。

2.PC端的私密性较差，用户操作的环境可能是公共环境，但操作稳定性较高，可能会长时间操作；移动设备更多是私人物品，操作环境更安全，但操作不受时间空间限制，操作场景碎片化。而且还有手机续航问题…

3.移动端有各种传感器，比如定位、陀螺仪、NFC、指纹识别等

4.PC端横向信息量大，纵向层级更深，有空间放置细致完整的导航。用户不管操作层级再深的任务都能一键返回，也就不容易迷失方位。且还能新开页面展示。；移动端纵向空间充足，但每页承载信息量有限，若层级太深，总导航可能照顾不到末级页面。所以移动端的设计更加扁平和直接。

对表单设计有什么影响呢？
PC端
1.页面横向空间充足，可实现多种表单布局（但要保证清晰的浏览线）。 多数问题可放在一页展示，但须做好信息划分
2.可以运用更多需要精准操作的控件，例如下拉菜单；
3.鼠标操作有更细腻的交互效果，例如悬停、按下、松开…
4.需要考虑键盘操作的便利性，特别是长表单
5.考虑信息安全问题，例如密码输入，更多使用暗文；
6.利用面包屑导航等，让用户时刻清楚自己的位置；

移动端
1.表单垂直排列，次要信息尽量隐藏；
2.减少输入，多用选择；根据输入内容调用不同键盘；
3.触点区域不可太小；触点位置一般偏下，例缩略图的“删除”按键考虑不要放在下方，避免误操作 
4.无hover效果，可点控件视觉样式要明显；
5.考虑输入框尺寸是否容得下内容；
6.键盘弹出时，表单是否显示正常，有无遮挡
7.环境相对安全，可简化某些表单填写，例如密码确认
8.考虑横竖屏切换、网络不佳、设备没电等极端情况；
9.单个任务提供最精简有用信息，让用户可快速阅读和操作。 弱化次要信息，隐藏无用信息；
10.利用移动端特性，多设置智能默认项，多使用智能输入，减少表单输入，可由系统得出的就不要让用户操作
11.表单结构尽量扁平；

印象笔记在几个月前终于改版了，这次的移动端版本终于好用多了，也更像移动端产品了。好在哪里？
旧版（左） 新版（右）

PC版

使用印象笔记最主要的的两大任务：写笔记和查看笔记
1.找到笔记和新建笔记是首要任务。想想我们用PC端的经验，打开PC端的印象笔记，首先右侧一大片笔记列表吸引了注意力，如果要修改就选择一片进行修改，如果要另写一片，就去找“新建笔记”按键。左侧的导航栏在需要切换笔记本和笔记的时才会用到。
来看看新版的移动端，虽然布局不一样了，但同样首页最大面积给了笔记列表，如果要新建笔记，底部标签栏正中就是新建。

也就是说pc端和移动端的印象笔记在打开应用到找到笔记这个过程中的操作逻辑是一样的。这也就大大降低了用户在移动端和PC端之间切换时的不适感。

但是看看旧版，更像是把PC端的左侧导航栏移了过来。我要去哪里找笔记呢？是去笔记里还是笔记本里？还是顶部一排圆形的按键？太困惑了……

2.新版移动端首页最清晰的就是你的笔记列表和新建笔记的按键，其他功能弱化或者隐藏起来了； 底部标签栏放的都是跟两大任务息息相关的功能

3.为了让用户更加快速找到自己常用的笔记，移动端还增加了“快捷操作” （不过这里要吐槽一下这个名字…图标长得像收藏，把文章加入到快捷菜单里的操作过程也像收藏，最后名字却叫快捷操作…里面也并没有什么操作，只有个列表…）

4.输入是没法避免了，但是调整了键盘的设计，文字段落的样式选择都放在键盘上，避免给输入区域太多的信息干扰，操作范围也更集中；可以录制音频、拍照、涂鸦手写

写得有点乱，大家有发现错误和遗漏的地方欢迎指正和补充。希望下次面试遇到这道题能回答得更加完善咯~