PC端的软件界面设计思考（上）——差异篇

随着移动互联网时代的到来，移动端的产品越来越受到重视。在规划产品时，往往会把移动端和PC端的产品放在同等重要的地位进行思考，同时也给设计师带来了更大地挑战。我在金大师负责的是PC客户端的界面设计工作，经历了几次版本迭代后，对夸平台的设计总结了一些心得，借此机会与大家分享，本期先从设计PC端与移动端产品的差异说起。

跨平台设计，是时下UI设计师的必备技

PC端：一般以鼠标和键盘为媒介，拥有灵活的交互形式。PC端的功能往往比较复杂，用户需要操作鼠标来完成各种操作。

移动端：直接用手指触控屏幕，除了最通用的点击操作之外，还支持滑动、捏合等各种复杂的手势。

以金大师PC端和移动端为例

金大师PC端的操作多以鼠标操作为主，在设计时需要注意及时给予用户反馈，明确按钮、输入框等操作时的多态效果，如默认、悬停、点击和禁止，帮助用户明确目前的操作状态。

操作的多态表现形式是PC端交互中很常见的形式

相比PC端的鼠标操作，移动端的手指触摸范围较大，较难精确控制点击位置。所以移动端的点击区域要设置的更大一些，不同点击元素的间隔也不能太近。

iOS的人机交互规范中，手指操作最合适的触控区域至少需要44 point

对于左滑、捏合等手势操作，初学者的学习、获知成本相对高，针对这类问题，一些App常需要通过新手引导的方式来教用户如何使用。

相对移动端手势操作，PC端鼠标的学习成本比较低。

移动端在加入新的手势操作时，需要加入新手引导

PC端：有较大的屏幕，不同PC的分辨率也不同，软件窗口最大化的尺寸也不同，并且窗口可自由缩放。

移动端：设备尺寸相对较小，不同设备的分辨率差异化较多，特别是安卓系统的设备；并且支持横屏、竖屏调转方向。

以金大师PC端和移动端为例

PC端因分辨率差异较大、且窗口尺寸可变化，设计时需要确定好不同分辨率的内容展示和布局。

金大师PC端分辨率1280x800

移动设备的尺寸较小，一屏展示的内容有限，更需要明确哪些信息更为重要，有效的组织相关联内容，优先级高的内容突出展示。由于设备分辨率、dpi大小不一，移动设备在界面布局、图片、文字的显示上，要兼顾不同设备的效果。

金大师移动端分辨率750x1334与1242x2208

移动设备支持横屏、竖屏展示，在设计时，需要考虑用户是否有“换个方向看看”的需求、哪些情况下切换屏幕方向、如何切换等。

金大师移动端竖屏状态

金大师移动端横屏状态

PC端：通常坐在某个室内，使用时间相对较长，用户更为专注。

移动端：可能是长时间在室内使用、也可能是利用碎片化的时间使用，或站或坐或躺着或行走，姿势不一。用户很容易被周边环境所影响，对界面上展示的内容可能没那么容易留意到；用户在移动过程中更容易误操作，需要考虑如何防止误操作、如何从错误中恢复。

PC端：网络相对稳定，基本无需担心流量问题。

移动端：因用户使用环境复杂，可能在移动过程中从通畅环境到封闭的信号较差的环境，网络可能从有到无、从快到慢；既可使用无需担心流量的WiFi，也可能使用需要控制流量的3G/4G。

移动设备网络异常的情况更普遍，需要更加重视这类场景下的错误提示、以及如何从错误中恢复的方法。

遇到网络异常时，加入情感化的卡通人物能让用户缓解情绪

PC端：通过右下角弹窗方式，或通知中心以小红点加亮。

移动端：通常使用推送通知给用户的方式。

本期针对PC端与移动端的差异，提到了设计中需要注意的要点。下期将从设计的趋势，针对金大师PC客户端的优劣势进行分析。【未完待续】