移动端显示有限，尽量突出界面功能网站中的导航可以做成百宝箱，显眼容易找到网站文字可以多些，多元化介绍：移动端少一些，简介明了  

移动端显示有限，尽量突出界面功能网站中的导航可以做成百宝箱，显眼容易找到网站文字可以多些，多元化介绍：移动端少一些，简介明了  

  网站一个页面由很多个版块：移动端需要很多分层才可以表现移动端文字可以左对齐或者居中对齐，不要右对齐  

  APP设计规范  

  小程序与APP区别：导航（图标）有区别  

  设计风格：写实，简约，扁平  

  IOS常用尺寸：750*1334  

  中文：苹方  

  英文：FSB  

  android常用尺寸：720*1280  

  边距和间距  

  在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们进行了解。  

  全局边距  

  全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统1全局边距的设置可以更好的引导用户竖向向下阅读。  

  在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语言，常用的全局边距有32px、30px、24px、20px等等，当然除了这些还有更大或者更小的边距，但上面说到的这些是最常用的，而且有一个特点就是数值全是偶数。  

  以iOS原生态页面为例，“设置”页面和“通用”页面都是使用的30px的边距。  

  再以微信和支付宝为例，他们的边距分别是20px和24px。  

  通常左右边距最小为20px，这样的距离可以展示更多的内容，不建议比20还小，否则就会使界面内容过于拥挤，给用户的浏览带来视觉负担。30px是非常舒服的距离，是绝大多数应用的首选边距。  

  还有一种是不留边距，通常被应用在卡片式布局中通栏显示，比如站酷APP（当然站酷APP也进行了改版，首页已经采用了不通栏的卡片式设计）。这种通栏显示的设置方式，更容易让用户将注意力集中到每个图文的内容本身，其视觉流在向下浏览时因为没有留白的引导被直接割裂，造成在上停留更长时间。  

  卡片间距  

  在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，过小的间距会造成用户的紧张情绪，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。  

  以iOS（750*1334px）为例，设置页面不需要承载太多的信息，因此采用了较大的70px作为卡片间距，有利于减轻用户的阅读负担，而通知中心承载了大量的信息，过大的间距会让浏览变得不连贯和界面视觉松散，因此采用了较小的16px作为卡片的间距。

Powered by Froala Editor