市面上主流的界面设计主要包括移动端、web端、桌面端、硬件、插件等，app和网站设计是大部分设计师最常见的设计需求，这两个也是最核心的设计端平台，所以明白web端和移动端设计的相似和差异并且知道如何应对是至关重要的。
整体来说，移动端的设计是更可控的，web端的设计难度实际更高，上限也更高。但是想要做好web端的设计并不难，只要明白web端设计时需要考虑的因素和解决办法，那么所有问题自然迎刃而解。
总体上，移动端和web端的字体规范是一致的，同一套字体大小都可以在双端有好的识别和视觉效果。唯一细微的区别是浏览器支持的最小字体大小是12，所以在web端要摒弃12以下的字号。实际上这并不会增加你的web端设计难度，因为web端的设计空间是足够的。
设计中往往需要考虑文案长度的问题，移动端受到屏幕空间的限制往往更容易遇到问题，你需要考虑当前文本段是否能在你所预留的空间放得下，对此可以参考以下几种解决办法：
-
高度自适应：也就是换行显示，大部分的文本段不可能无限换行，也应该有字数限制，所以选择这一个解决办法，正常也需要设定一个高度极限值。
-
超出省略：当文本段的完整性不是那么重要，且需要漏出，那么这是一个不错的方法
-
字号自适应缩小：这正常用在金融类产品的数字显示中，比如余额等，当小数点过多或者金额过大导致的数字文本端过长时，数字是无法换行或省略的，所以你可以选择字号自适应缩小。
移动端和web端最直观的差异就是屏幕大小的差异，移动端小，且各设备的差异化细微，web端的空间大，且不同设备的屏幕差异大，所以就有了几点主要差异：
移动端整体上是自上而下的设计布局，宽度受限比较严重，所以除了一些左滑手势带来的横向空间拓展，布局的变化上不大。
web端因为空间大，所以就有了更多的布局可能性，例如左右布局，居中布局，左中右布局，或是全屏自适应布局。这些布局方式也各有各的优缺点。
所以设计一个网站时，往往需要多个布局配合使用，能让你的网站视觉感受更舒适，利用率上更合理。切忌为了美观或者方便等原因死磕一个布局方式。当然，居中布局是最万能的一个布局，如果你暂时没办法掌控多个布局，那么居中布局是你最佳的选择。
前文说了，因为web端的设备差异大，所以你需要在设计时考虑小屏笔记本和大屏显示器的适配问题，甚至是用户手动拉动浏览器宽度时所得到的适配反馈也需要考虑其中。
适配不是必须的，因为适配的成本较高，复杂的页面往往需要设计出多个断点页面去让开发根据页面宽度重新适配内容。所以大部分的居中布局的网站，是不做适配的，因为你只需要控制你的内容宽度能在13寸笔记本完整展示，其他的就是极小部分用户的需求了。
web端到移动端的适配往往需要重构，也就是把当前网站的内容，重新在手机宽度下做设计，结合上文文本部分的内容，请不要想当然的把字号缩小。只需要考虑排版和功能是否需要删减的问题。
移动端受到屏幕限制，弹窗的更多是banner的弹出，提示的作用，或者是个别简单筛选操作，在移动端很难在弹窗上放置很多的输入等复杂操作
在web端的设计中，一定要巧用弹窗，简单的编辑或着创建等操作都可以用弹窗代替，不仅可以使操作更聚焦，也可以减少页面跳转来缩短路径。
由于操作媒介的不同，导致移动端和web的操作手势有很大的区别，移动端是用手指操作，web端是鼠标操作，手指操作决定了手势的多样性，鼠标的操作决定了点击的精确，并且由于鼠标的操作反馈是分阶段的，需要在每个阶段都给予用户相应的反馈来打造更好的用户体验。
移动端中对于操作的反馈主要聚焦于手指点击后的反馈，悬停态往往被长按代替。而web端鼠标操作存在三个状态，一个是正常状态，一个是悬停状态，一个是按下状态，这三个状态需要在设计师考虑并设计来向开发说明。web端中不同元素的常见状态（主要为悬停态）区分方式需要明白：
-
button：用颜色区分，常见的方式是改变颜色的明度，悬停增加明度，按下降低明度
-
icon：icon的状态区分更多是在悬停状态上，常见方式有：改变颜色；改变icon形态（如线性变面性）；为icon添加背景色块（如圆形灰色背景）。
-
文字：文字的状态区分除了颜色之外，可以利用文字自带的属性，如字重，字体大小，甚至可以在个别海外产品中看到通过改变字间距来表示悬停状态。
-
卡片：卡片的悬停设计更加的多样，如改变填充色；改变描边颜色；增加投影，比较有趣的有改变卡片大小；轻微改变卡片透视；改变卡片的位置，如悬停时卡片向上轻微移动。
由于web端独有的悬停手势，你可以在悬停这个手势大作文章，如果你了解linear风格的话，或者经常浏览国外产品的话，许多网站会在鼠标悬停卡片时产生动效，动效不限于卡片元素（插画、图标、可视化表格等）的动画；光影描边的循环。悬停按钮时，箭头的位置变动，或者其他动画效果。更酷炫的还有鼠标与卡片透视的交互，甚至与鼠标与全局页面的交互，如水波纹等。
整体来说，web端基于屏幕大小的优势和状态的多样，在操作按钮漏出数量和方式上会更加的多样。
移动端独有的是长按手势和左滑右滑手势，所以移动端会把一些操作放到左滑手势中，最常见的如消息列表的置顶、删除等。长按手势更多的是弹出更多操作，或是产生可拖动效果。
web端拿列表举例，基于屏幕的大小的优势，可以将更多操作直接在列表右侧直接漏出，用户的操作路径更短，触达率自然就更高。拿卡片举例，button的存在有的时候会影响到卡片的大小和美观，所以有些操作往往可以藏到悬停状态里，悬停操作不需要学习，所以用户不会为此感到疑惑，也可以保证功能的完整性。
关于各个模块如何设计并不在这里展开，我想表达是在设计稿设计时的一些操作思路，或者说是组件的搭建思路。
如果你对前端开发有一定的了解，那么你一定懂得盒子套盒子。设计也是如此，需要给你的每个设计模块建议一块独有的盒子。这是区别于间距或分割线的区分模块的思路的。
举个例子，你有图片，主标题，副标题三个元素形成一个小模块，那么你在确定好排版之后，你需要一个盒子将他们装起来，那么这个模块必须有它自己的宽度，高度。换个角度理解也就是它需要有一定的上下左右间距，在figma中，这个盒子就是你的frame，高级一点就是你的自动布局。这个盒子的大小就决定了这个模块的操作热区，这也方便你在设计做出你的悬停效果。
这个设计思维适用于web端和移动端，且十分重要，所以尽量避免在设计图出现各个元素分别散落的情况，这不仅不利于你的设计稿管理，也不利于开发的查看。
在进行web端设计时，如果你对web端设计一无所知，也无需惊慌。你可以找到合适的参考网站，并且分析它每个模块的高度，间距等，去模仿他，并且从中得出规律。
拿web端的导航栏举例，假设你纠结于web端的导航栏高度设置多少，你可以找到参考的网站，使用检查功能（F12）去查看高度，或粗暴的截图查看高度即可。当然，在此之前，你需要确定这个模块的高度是不会随屏幕大小改变而改变的。
无论是web端设计还是移动端设计，当你在设计模块或搭建组件时，善用自动布局，这不仅有利于你设计图高效率修改，也能应对你的web端可能出现的适配情况。这需要考验你的figma能力，如果大家有兴趣，后续我可以出一些figma基础、组件、自动布局等相关教程同大家探讨。
作者：PONEPENG
来源：站酷
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计
软件qt开发、软件wpf开发、软件vue开发
