锐客网

  1. 首页 > 睿知 > >

UI界面设计规范，如何建立一套完整的UI 设计规范

经验分享睿知

1，如何建立一套完整的UI 设计规范style guide pdf格式，主要作用是指南 。用于说明色相、字体、字号、分隔线、间距等这些影响到风格形式的元素如何使用，如何建立层级 ， 为了直观，需要适当的配上标注图，并说明界面中各组件的作用和使用场景 。组件无需标注，从ui kit的psd文件中提取即可 。ui kit psd格式，主要作用是提取 。设计师可直接拖拽至ps中使用 。标注图 png格式，主要作用是参考 。style guide中不会包含方方面面场景的情况，如果设计师捉摸不定逻辑上的一致性和合适的层级设定 ， 可以参考更多以前交付给前端工程师的页面标注图，我向设计师传达的一个原则是：除非有更好的方案进行全局替代，否则应尽量使用之前已应用的方案，避免每次迭代都出现新的方案造成不一致问题的放大 。【UI界面设计规范，如何建立一套完整的UI 设计规范】
2，什么是ui ios和安卓的规范设计上来说这两个系统有些东西越来越通用了 ， 目前很多Android的应用偏苹果风格，也就是说基本都是采用一套iOS设计模板来适配Android系统 。术语解读和系统平台对比android是Google公司开发的操作系统 。iOS是苹果公司的移动操作系统 。导航方式不一样iOS的Tab放在页面底部，不能通过滑动来切换 ， 只能点击 。也有放在上面的，也不能滑动，但有些Tab本身可以滑动 ， 比如天猫的 。还有新闻类的应用 。Android一般放在页面顶端，可以通过滑动页面来切换Tab，当然Tab可以点击切换，Tab多的话，Tab本身也可以滑动 。比如豌豆荚 ， 百度贴吧，QQ 。总之，Android啥都可以有 。UI设计规范不一样比如现在通常设计的尺寸对比如下：iOS： 750*1334 或者 1242*2208android：720*1280 或者 1080*1920首先你要理解ui这个词的含义 。ui=用户界面 。那什么叫用户界面呢？手机，电脑 ， 智能手表 ， 以及其他一些电子产品都有着自己不同的用户界面 。所以所谓的ui是没有固定的尺寸的 。真正的做一套ui界面，首先你的选定目前主流的屏幕尺寸 。打个比方说苹果5的分辨率是960x1136 。像这个分辨率别的手机根本用不了 。同一款app在不同的屏幕尺寸下可能都有一套自己的ui界面 。至于图标的大小你可以百度一下，有标准尺寸的 。但是现在很多异形的app都没有按照标准的来 。
3，UI设计规范都有哪些轴在UI设计中是最基本、最常见的概念，也是用来组织界面结构的重要核心 。简单说来，轴是在设计的时候组织一系列元素的假象线，在下面的设计图中，轴以虚线的方式被标注出来 。1、对齐轴最常见于对称元素的使用，当元素被布置成轴对称的布局的时候，会给人有序感 。就像生活中绝大多数的事情一样 ， 我们更倾向于享受有序的的东西，它们令人感觉平稳、舒适、平易近人 。最简单的一个例子就是iTunes 程序中的专辑列表的设计，所有的专辑列表在界面的左侧保持对齐 ， 围绕虚线轴轴对称 。2、强化虽然轴是一条假想的线，但是如果周围的元素的边缘控制得足够整齐，这跳线会在视觉中变得更加“明显”的 。最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴，如果一边有建筑一边没有，那么这种轴线的感觉不会那么强烈 。从产品设计的角度上来看，Twitter 的时间线设计就是一个很好的案例，左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉 。3、运动当我们碰到某先线条的时候，视觉会很自然地沿着这些方向运动，就如同我们站在街上 ， 会自觉地沿着街道的两头走动 。两个端点决定了线，界定了开始和结束的地方 ， 线，或者说轴线的存在会引导和提示运动的方向 。SoundCloud中，音轨沿着一条既定的水平轴线运动，随着音乐的播放，音轨自然地自左向右匀速运动 。4、连续性如果终点是不确定的，那么你通常会沿着轴线的方向浏览/运动 ， 直到你找到感兴趣的东西，或者感到厌倦并关闭应用 。在建筑学中，未清楚界定的终点非常少见，因为建筑的修建通常没法永远持续下去 ， 但是UI设计则不一样，无限地滚动下去是无比受欢迎的设计手法 。Pinterest的APP中就是这样做的 ， 持续不断的图片沿着中轴线的方向持续不断地滚动下去，只要你有兴趣一直观看下去 。二、对称当元素被均匀地放置在轴线的两侧之时，他们构成了对称的关系 。当元素被精准地在轴线两侧一一对应之时 ， 它们就形成了完美对称 。

    推荐阅读


    上一篇：苹果14浮动按钮怎么设置功能，苹果手机浮动按键在那设置

    下一篇：iphone14上市2023年，预计8G版iphone4什么时候上市