ui页面设计规范 (web ui设计规范大全)

怎么树立一套 UI 规划标准
前几个月都在陆陆续续做这件事，中心做着做着就焦头烂额了，遇到许多一时想不清楚的问题，直到最近才产出一份初具雏形的文档，不过在标准文档没有产出之前就已经在形象笔记中边规划边整理一切的元素以确保界面的共同性，这二天正好在知乎上看到这个论题，就顺道来吐吐编撰规划标准过程中的一些主意~
首要需求想清楚这份标准文档是给谁运用，偏视觉和偏前端的标准并不相同，原本自己做之前是考虑给规划师查阅，但编写的过程中又觉得应该让前端工程师也能运用，可那样就意味着得包括相关款式的代码，且是网页格局，考虑一再仍是决议先专心于视觉规划师这个人物，让团队中不同的规划师能够产出规划言语共同的界面计划为先。而类似于JJ Ying共享的Lonely Planet或Purple: A UI kit for Heroku's web interfaces这种偏前端的款式库我以为能够让前端工程师去树立。
然后我也以为一套详尽的规划标准关于更新迭代快速的互联网产品来说性价比不高，很可能十分困难完成了但又要面对新版本迭代，我的解决计划是出一份像Material Design 中文版式的Style Guide+UI Kit+标示图调配运用，这也是遭到台湾UI规划师Akane Lee的启示，可参阅她的博文 UI 规划师应该要会写的文件
下面别离说下这三种产出物的效果
Style Guide
pdf格局，主要效果是攻略。用于阐明色相、字体、字号、分隔线、距离等这些影响到风格方式的元素怎么运用，怎么树立层级，为了直观，需求恰当的配上标示图，并阐明界面中各组件的效果和运用场景。组件无需标示，从UI Kit的psd文件中提取即可。
UI Kit
psd格局，主要效果是提取。规划师可直接拖拽至PS中运用。
标示图
png格局，主要效果是参阅。Style Guide中不会包括方方面面场景的状况，假如规划师捉摸不定逻辑上的共同性和适宜的层级设定，能够参阅更多曾经交付给前端工程师的页面标示图，我向规划师传达的一个原则是：除非有更好的计划进行大局代替，不然应尽量运用之前已运用的计划，防止每次迭代都呈现新的计划形成不共同问题的扩大。
以上就是我现在在运用的计划，且仍在完善中，供各位知友酌情参阅，最终附上几张Style Guide文档和Web UI Kit的的截图。
UI规划的标准
交互和UI（界面）是两个系统。界面规划师自身是不需求代码的，可是许多公司为了节约人力本钱要求规划师这么做，规划界面的时分每个icon、列表距离之类的都是规划师标示的，一般都有规划标准，移动端的依据安卓和ios系统来适配，web端依据各公司自己的栅格来。交互规划师的系统很杂乱，他需求很多的时刻来研讨需求、剖析竞品以及勾画结构和原型，在大公司里和团队成员多向交流，小公司一般是由PM（产品司理）兼任的。
假如你想学规划，最好先考虑清楚自己要学交互规划，仍是UI（界面规划），这两个不是单纯的包括与被包括的联系，而是分属两个不同专业，就现在来看，北京一带UI指的是界面规划，上海珠三角一带指的是交互规划，而UE用户体会规划倾向交互多些，地域不同区分也很乱，所以我不太清楚你所说的UI指的是什么，不过规划师需求标示标准，这个是必定的。

viaduct road barn construction