首页

WEB前端之HTML 规范

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里


摘要
优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护

HTML 规范
缩进
统一两个空格缩进

命名规范
class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；
DOCTYPE 声明
HTML 文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

<!DOCTYPE html>


meta 标签
统一使用 “UTF-8” 编码
<meta charset="utf-8">


SEO 优化
<!-- 页面关键词 -->
<meta name ="keywords" content =""/>
<!-- 页面描述 -->
<meta name ="description" content ="">
<!-- 网页作者 -->
<meta name ="author" content ="">


优先使用 IE 版本和 Chrome
<meta http-equiv ="X-UA-Compatible" content ="IE = edge，chrome = 1">


为移动设备添加视口
<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放 -->
<!-- user-scalable=0 是指禁止用户进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


禁止自动识别页面中有可能是电话格式的数字
<meta name="format-detection" content="telephone=no">


团队约定：

pc 端：

<meta charset="utf-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路 

移动端：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">


标签
html 标签分为以下几类：

自闭合标签（self-closing），无需闭合。例如：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 等 )
闭合标签（closing tag），需闭合 。例如：textarea、title、h、div、span 等
团队约定：

所有具有开始标签和结束标签的元素都必须要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上
自闭合标签不要加上结束标签
自定义标签的名字必须包含一个破折号（-），<x-tags>、<my-element>和<my-awesome-app>都是正确的名字，而<tabs>和<foo_bar>是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素，哪些是自定义元素
自定义标签必须写上开始标签和闭合标签
尽量减少标签数量
元素属性
元素属性值使用双引号语法
推荐：

<input type="text">


不推荐：

<input type=text>
<input type='text'>


代码嵌套
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
标题和段落中不能包含块，如：h1、h2、h3、h4、h5、h6、p、dt
块与内联不能并列，块级元素与块级元素并列、内嵌元素与内嵌元素并列
有些标签是固定的嵌套规则，比如 ul 包含 li、ol 包含 li、dl 包含 dt 和 dd 等等。
灵活使用伪类
不要让非内容信息污染了你的 HTML，打乱了 HTML 结构。可以使用:before、:after 等伪类元素

推荐：

HTML 代码

<!-- That is clean markup! -->
<span class="text-box">
  See the square next to me?
</span>


CSS 代码：

/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

1

不推荐：

HTML 代码：

<!-- We should not introduce an additional element just to solve a design problem  -->
<span class="text-box">
  <span class="square"></span>
  See the square next to me?
</span>


CSS 代码：

.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路 

特殊符号必须使用转义符
符号 描述 转义符
空格 &nbsp;
< 小于 &lt;
> 大于 &gt;
& 和 &amp;
" 引号 &quot;
纯数字输入框
使用 type=“tel” 而不是 type=“number”

<input type="tel">


类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含。

推荐：

<link rel="stylesheet" href="" >
<script src=""></script>


不推荐：

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>


注释规范
单行注释

一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐：

<!-- Comment Text -->
<div>...</div>


不推荐：

<div>...</div><!-- Comment Text -->

<div><!-- Comment Text -->
    ...
</div>


6
模块注释

注释内容前后各一个空格字符
<!-- S Comment Text -->表示模块开始
<!-- E Comment Text -->表示模块结束，模块与模块之间相隔一行
模块注释内部嵌套模块注释，<!-- /Comment Text -->
推荐：

<!-- S Comment Text A -->
<div class="mod_a">

    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->

    <div class="mod_c">
    ...
    </div>
    <!-- /mod_c -->

</div>
<!-- E Comment Text A -->

<!-- S Comment Text D -->
<div class="mod_d">
    ...
</div>
<!-- E Comment Text D -->
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路 

22
语义化
没有 CSS 的 HTML 是一个语义系统而不是 UI 系统
通常情况下，每个标签都是有语义的
语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图
建议页面中多使用语义化标签，而不是整个页面以 div 构成
常见标签语义：
标签 语义
<p> 段落
<hn> 标题(h1~h6)
<ul> 无序列表
<ol> 有序列表
<nav> 标记导航，仅对文档中重要的链接群使用
<main> 页面主要内容，一个页面只能使用一次。如果是 web 应用，则包围其主要功能
<article> 定义外部的内容，其中的内容独立于文档的其余部分
<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside> 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表
<header> 页眉通常包括网站标志、主导航、全站链接以及搜索框
<footer> 页脚，只有当父级是 body 时，才是整个页面的页脚
<figure> 规定独立的流内容（图像、图表、照片、代码等等）（默认有 40px 左右 margin）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。

评论(0) 浏览(1945)

常见的网页设计、文章设计错误

用心设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里


常见的网页设计、文章设计错误
本文来自阮一峰分享


 1.内容未按逻辑分成块

用户可以根据逻辑块轻易的获取信息。

具体做法为：将padding设置为120px-180px，同时不同的逻辑块使用不同的背景。


2.每个逻辑块的空白大小不一致 

对于每个逻辑块，需要设置同等大小且适宜的空白。否则网页看起来会很混乱，作者不会对每个逻辑块同等对待。



 

3.Padding不能设置过小，否则用户无法将内容分为逻辑块

 为了这点，插入大的空白（至少120px），以使内容按逻辑块分开。





4.背景图片和文字 应该对比鲜明

 


5.在一页中，样式过多

太多不同 的排版和样式将会使得页面不太专业以及难以阅读。

解决的方法是，以字体为例，设置一种字体，字体为正常或粗体（保证在两种不同样式之内）



 

6.背景颜色块过于狭窄




7. 在一个狭窄的列中，放入了过多的文字

这导致用户阅读需跳很多行，整体看起来也不行。推荐的做法为，减少列的数量，精炼文字。



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

评论(0) 浏览(2183)

UI中切图与命名规范，收藏！

用心设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

 

规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作，减少沟通成本。结合经验与收录的资料，分享给大家。

一. 切图命名英文缩写的三个要求


1.较短的单词可通过去掉“元音”形成缩写

2. 较长的单词可取单词的头部几个字母形成缩写

3.还有一些特定的英文单词缩写


二. 命名规则


切图命名以模块为前缀，如：模块_类别_功能_状态.png


模块：

登陆页面（login） 公共（common） 需求a（need） 需求b（demand） 发现（discover） 消息（message）    我（me）


类别：

导航栏（nav） 菜单栏（tab） 按钮（btn）  图标（icon）  背景图片（bg）  默认图片(def)


状态：

selected（选中） disabled（不可点） pressed（按下） normal（一般）


举例说明：

IOS:

以750*1334为基稿设计，按实际项目开发为标准，需切出@2x和@3两套图，把在公共页面中的导航栏里面有一个按钮（40x60px）的选中状态切图，直接输出的切图为@2x图，@2x的1.5倍图为@3x。


输出成果为：

common_nav_btn_back_s@2x.png（40x60）和common_nav_btn_back_s@3x.png（80x120）；

意思为：公共_导航_按钮_返回_选中


Android：

以720*1280为基稿设计，由于尺寸不同且多样，需要切多套图适配不同机器，分别为mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi，直接输出的切图为xhdpi;它们分别对应的倍数关系为1、1.5、2、3、4。


输出成果为：

common_nav_btn_back_s_mdpi.png(20x30)、

common_nav_btn_back_s_hdpi.png(30x45)、

common_nav_btn_back_s_xhdpi.png(40x60)、

common_nav_btn_back_s_xxhdpi.png(60x90)、common_nav_btn_back_s_xxxhdpi.png(80x120)；


命名示列：

启动  (default):    

default.png   启动图片；

default_logo.png   启动logo


登陆（login）：

login_bg.png   登陆背景图片

login_logo.png   登陆logo

login_input_n.png   输入框

login_input_s.png   输入框选中状态

login_btn_n.png    登录按钮

login_btn_s.png    登录按钮选中状态


注册（register）：

login_register_rb_n.png    单选框按钮

login_register_rb_s.png    单选框按钮选中状态


导航栏（nav）：

common_nav_btn_menu_n.png    菜单按钮

common_nav_btn_menu_s.png    菜单按钮选中状态

common_nav_btn_back_n.png    返回按钮

common_nav_btn_back_s.png    返回按钮选中状态

common_nav_btn_close_n.png    关闭按钮

common_nav_btn_close_s.png    关闭按钮选中状态

common_nav_btn_eidt_n.png    编辑按钮

common_nav_btn_eidt_s.png    编辑按钮选中状态

common_nav_btn_delete_n.png    删除按钮

common_nav_btn_delete_s.png    删除按钮选中状态

common_nav_btn_message_n.png    消息按钮

common_nav_btn_message_s.png    消息按钮选中状态

common_nav_btn_search_n.png    搜索按钮

common_nav_btn_search_s.png    搜索按钮选中状态


列表（list）：

hpcollege_list_collect.png    列表页收藏按钮


左侧导航栏（leftbar）：

leftbar_info.png     个人中心


菜单（tab）：

common_tab_need_n.png     需求a按钮

common_tab_need_s.png     需求a按钮选中状态

common_tab_find_n.png     发现按钮

common_tab_find_s.png     发现按钮选中状态

common_tab_demand_n.png    需求b按钮

common_tab_demand_s.png    需求b按钮选中状态

common_tab_me_n.png    我的按钮

common_tab_me_s.png    我的按钮选中状态


首页（home）：

home_bg.png     首页背景

home_banner.png     首页广告图


点9图（.9）：

rounded rectangle.9.png    圆角矩形


常用词语：

selected：选中/s

pressed：按下/pre

disabled：不可点/d

normal：正常/n

common：公共

default：登录页

discover：发现

message：消息

me：我

navigation  bar：导航栏/nav

tab：菜单栏

button：按钮/btn

icon：图标

background-image：背景图片/bg

default-image：默认图片/def

cut-off  rule：分割线/cor

login：登陆

register：注册

list：列表

home：首页

banner：广告

browse：浏览

details：详情

like：喜欢

dislike：不喜欢

search：搜索

content：内容

collect：收藏

eidt：编辑

comment：评论

message：提示信息/msg

ranked：排名

location：定位

tags：标签

left：左

right：右

center：中

popup：弹出/pop

image：图片/img

viedio：视频/vd

audio：音频/ad

title：标题/tit

address：地址/add

number：人数

time：时间

sustem：系统

refresh：刷新

user：用户

more：更多

border：边框

next：下一步

sign：签到

code：密码

clear：清除

scroll：滚动条

hover：鼠标停留

common：公共

hot：热点

zoomin：放大

zoomout：缩小

service：服务

presonal  data：个人资料/Pdata

male：男性

female：女性

report：举报

input：输入/ip

dropdown  menu：下拉菜单/ddm

radio button：单选框/rb

check  box：复选框/cb

progressbar：进度条/pbar

download：下载

arrow：箭头

share：分享

upload：上传

release：发布

tabbar：标签栏

autonym：实名

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

评论(0) 浏览(3295)

如何建立一份移动UI设计规范？

用心设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

 

在多人团队里，通常不同的设计师负责不同的流程，如果没有UI设计规范，不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作，效率比较低。而制作设计规范和UI KIT之后，则可以直接利用KIT里的组件快速搭建好页面，把设计师从基础工作中释放出来，大大提升设计效率。

目录

一、为什么要建立规范

  • 用户体验一致
  • 塑造品牌感
  • 利于多人协作
  • 方便维护和更新，减少冗余内容

二、规范的适用范围

  • 适用于处于成长期和成熟期的产品。
  • 规范不是越全越好。适合就是最好。

三、如何建立规范 

  • 整理产品的组件和复用的内容
  • 基础规范（栅格 间距 基础网格  颜色 字体 ）
  • 组件规范（按钮、导航、弹框、缺省图、标签、列表、卡片等等）

一、为什么要建立设计规范？

1 利于多人协作，提率

2 增强一致性，塑造品牌感

制作和遵循设计规范，能够保证整个产品的交互效果和视觉风格、乃至文案的统一性，提升用户的体验。

3 减少冗余内容，方便维护和更新

同类内容使用一样的组件，能够降低输出的内容量，减少冗余的控件和代码。同时也便于维护，在迭代时进行统一的更新和应用。

4 利于工作交接 

方便设计团队和其他团队交接，如果团队有人员变动，也方便后续入职的同事能够通过规范迅速熟悉产品，快速上手。

二、规范的适用范围

前面的文章我提到过，如果产品处于启动期的话，这个时候最重要的事情是圈到第一波用户，让自己活下去。在这个阶段产品会频繁的改版、验证，迭代非常快，整个团队可能都处于拼命加班的状态。在这种情况下做设计规范文档显然事倍功半，一个是浪费人力资源，另外就算做了，在频繁更新的背景下也很难去执行。

因此设计规范文档更适合于那些跨越0-1阶段的产品，这个时候产品已经用有了一定的用户，团队也会扩张。这个时候我们可以选择制作基础的设计规范，比如栅格、配色、字体、图标规范等等。对于成熟期的产品来说，大版本更新的周期是非常长的，这个阶段通常会制作更为详细的设计指南、设计原则、do & don’t、品牌书、图标手册等等。

三、如何建立设计规范

电商类的产品对于大家来说都是比较熟悉的，就算不从事这个方面，日常使用也会很频繁，所以此次案例我们以下面这个电商APP作为示范。

做规范时通常会有这两种情况：

1、不打算进行大版本更新的产品

对于小版本迭代的产品来说，建立规范只需要在sketch里把所有设计稿进行归拢和分类。直接根据现有的稿子梳理出规范，再对不符合规范的文件进行调整即可。

2、新版本 新规范

而对于需要做新版本并且建立新版本规范的产品来说，在做设计稿之前，我们就需要先统一一些基础的内容，比如颜色、字体、栅格等等，然后在设计过程中去制作KIT、对基础的规范进行补充。

四、基础规范

1 制定统一的栅格系统

因为现在都是一稿适配多端，所以首先需要确定设计的基准尺寸，是基于iphone8？还是iphone 8P？或者1080*1920等等……每个公司设计稿的基准都不一样，我们是以一倍图为基准进行设计的，所以我这里的基准尺寸就是375*667，单位为pt。

栅格一种情况是制定网格系统，网格系统的话首先要制定最小的设计单位，比如淘宝的最小单位是3，掌阅的最小单位是4，airbnb的最小单位是6……定好最小设计单位之后，界面中所有间距采用最小单位的倍数。

假定我们最小单位4的网格，排版时横向和纵向的间距都是4的倍数，比如8、12、24。

第二种情况是可以直接建立横向栅格系统，常用的是12栅格，12栅格比较好的地方是能够同时被2、3、4整除，因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化，是不需要这么复杂的栅格的，可以根据需求设置6、4甚至2栅格等等。

2 色彩规范

色彩规范主要表明色彩的色值和使用范围，一般会从品牌色、辅助色、基础色、状态用色等等。如下图所示。

如果产品常用到渐变的话，需要注明渐变的角度以及渐变色的色值。包括产品如果有夜间模式的话，要额外注明日间和夜间模式下各个颜色的对应色值。当然这里的夜间模式说的是真·夜间，而不是微博那种直接加一个黑色透明度蒙层的伪·夜间。

额外提一句，重要内容和正文内容要保证文本的可识别度，WCAG指南中指出，文本和背景色的对比度需要达到3：1。大家可以通过

https://webaim.org/resources/contrastchecker/ 的颜色对比检查器来核对颜色。我这里的品牌色和强调色对比度为3：1和6.3：1，而辅助颜色（比如标签）的对比度则在2-3之间。

3 字体

字体规范最需要注意的是提取出各个场景下需要用的字体和字号。

需要注意的是，要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。

4 图标

通常来说图标分为两种，功能性图标和展示性图标。

功能性图标是为了引导用户理解和操作，需要表现和简介，方便用户识别其含义。功能性图标常规状态下为无彩色。

展示性图标通常为页面入口，会有更多形状、颜色、质感的表达，吸引用户的注意力和点击欲望，强调差异性，比如各种品类区的图标、徽章、等级图标等等。

图标规范通常来说会先定一些基础尺寸，梳理好各个页面的图标尺寸，进行整合，最后确定好几个基础尺寸，比如我这里的基础尺寸是4个。功能层级一致的图标尺寸要一致。

为了保证不同形状的图标在视觉上保持大小一致，会制作一个图标的基础制作说明。制作说明里会统一图标的圆角、描边的粗细；如果是涉及到展示性图标的话，还会有图标的视角选择、配色的选择、以及如何表现质感等等等等

5 默认图

电商APP的话有大量的产品图片，所以我们也把默认的占位图样式进行了统一。因为我们这里样式都是一致的，所以采用了统一的规范，如果有多种默认样式，或者有其他类型的占位图，需要分别进行说明。

五、页面组件

页面组件通常包括导航栏、工具栏、弹框、列表、卡片、空状态等等，按照原子设计理念来说，还可以把组件拆分为原子、分子等更小的基础设计组件，比如角标、标签、按钮、图像、优惠券、选择器、进度指示器等等

页面组件除了梳理出规范之外，通常会整理成一整套UI KIT，保存为sketch文件日常拖拽使用，或者导入为Libraries直接调用。当然，也可以直接在KIT上备注出规范和注意事项，具体输出什么格式这个看团队的需求即可。

因为组件部分是一个比较庞大的内容，需要根据具体产品

1按钮

按钮一般有悬浮按钮、填充按钮、线框按钮和文本按钮等类型。其中悬浮按钮具有最高的优先级，属于强引导型按钮。

按钮通常会有三种状态，常规状态、点击状态和不可用状态。因此在规范中需要标明按钮在这三种状态下的样式，比如颜色、投影、圆角、文字大小等等

除此以外，也可能会有加载状态，也就是在点击按钮后，如果有1S以上的数据延迟，通常会考虑触发按钮的加载状态。加载状态的按钮样式为按钮上显示进度指示器。

2 导航

对现有页面的导航进行收拢和分类，比如我这里分类为常规标题样式、标签样式、搜索框样式、无标题样式、字母导航……

标题需要注意文字的极限值，ICON尺寸和位置的话要考虑最小可点击区域，我这里icon的尺寸设置为24pt，但是热区是44pt，所以要注意间距的设置，热区不能重叠。

3 标签

标签通常有多个使用场景，我们可以对标签进行分组，比如运营类标签、内容属性标签、筛选标签等等

然后对每类的标签统一样式、文字内边距以及说明适用场景。

4 弹窗

弹窗是为了提示和通知用户而位于页面内容之上的一种控件。它是引导用户专注于某一项任务，用户可以通过操作来关闭弹框。弹框包含模态（对话框、操作菜单）和非模态（toast、 snake bar等）两种形式。

模态弹窗需要定义蒙层的样式（颜色、透明度），以及弹框内的文字说明和按钮。

我这里拿一个对话框的规范进行举例，这是一个无ICON的双按钮对话框，因此在这里我们需要说明标题、正文文本、按钮以及背景遮罩的信息，还有字号、行距、文字极限值、文字色、按钮的状态等等……

除此之外，组件类的规范可以配上常用案例、don’t&do，会更方便团队人员理解，防止错误状况。

5 列表

列表是由多个等宽的行组成的、按照一定规律排列的连续条目。列表在一些资讯类产品里会有更多的组合形式。我这款产品里用到的列表主要是单行和双行列表，那么我们就整理出对应的列表类型和需要说明的事项。

六、结语

写这篇文的初衷，是因为从去年底我建立公众号，并且在站酷发表了一些文章，得到了很多人的认可。很多粉丝私信我各种问题，陆续有人问我设计规范怎么做、交互规范什么样之类的问题。但是公司内部的文件确实没有办法公开分享，所以我就想说，那不如专门写一篇文章详细教大家制作移动UI设计规范吧。

这篇的基础部分我做的比较详细，组件部分写的有些概括，主要是因为组件部分不是通用的，要根据自己的稿子进行整理和归纳，归纳好之后做好标注和规范说明即可，这部分是一个罗列的内容，所以就不必展开了……

当然还有很多内容没有展开说，比如在Sketch里把KIT制作成Libraries统一使用，但是我想作为一篇设计规范入门教程目前应该足够了，更多的内容我在后续开新文去补充吧。

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

评论(0) 浏览(2688)

规范、方法、一致性，真有那么重要？

用心设计

当我们刚从事UI设计时，自身对于用户体验设计的积淀还不够厚实的时候，遵循设计规范是最保守但也是最合理的做法，因为这种解决方案更加成熟和通用，也有了一定的用户认知。同时像公司内部的设计规范，有利于版本迭代的开发及设计效率，包括新人入职后更快上手工作，避免出错。

所以了解ios设计规范，安卓设计规范，或者是公司内部的设计规范等等，成为设计师必备的技能...


规范、方法、一致性，真有那么重要？

评论(0) 浏览(2754)

Web交互设计优化方案＋check list

用心设计

“优化已有产品的体验”这是用户体验相关岗位职责中常见的描述。我们的产品常常是在快速的迭代过程中不断完善的，就像孩子生下来需要养育才能长大一样，优化已有功能/产品，和设计新功能/产品同样重要，不可偏废。

Web交互设计优化方案＋check list

评论(0) 浏览(3493)

基于屏幕的图片尺寸的逻辑关系及移动界面的尺寸知识点

用心设计

我知道这个标题念起来会让你觉得非常拗口，如果你是中文系毕业的，或许还能从中挑出语病来，但我想你明白我要表达什么意思，对不对O(∩_∩)O哈哈~

要讲的东西其实都是很简单的逻辑关系，但可能很多人都跟我一样稀里糊涂的做了多年设计却一直没搞明白其中的关系。当然你不明白其中的关系并不影响你 做出好的作品，但作为有理想有担当有着历史责任感…（此处省略一万字的排比）…的设计师，明白这些基本的知识点，能让你更好的…（想了下并没有什么实际好 处(┬＿┬)…）

评论(0) 浏览(4748)

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档