UI

分类下相关文章

如何设计原型图

原型图本质上是将想法具体化的一个过程. 心里障碍在哪里 担心设计的太丑,太粗糙 不尝试怎么知道;用工具做出来的不会差太多。 无从下手 just do it 方式1:把最核心的部分表现出来,其他部分一点点补上。 方式2:从用户注册、登录开始表现,太形式了,容易失去激情. 设计这两个字太虎人 这个名字不好 原型图本质上是将想法具体化的一个过程 这个过程也是不断验证自己想法、发现新需求的过程 工具选型 跨平台 -- 方便多人协作修改 小而轻 可持续维护 开源免费 目前来看只有 http://www.processon.com 满足这些要求。 ...

阅读全文...

wordpress 企业站主题开发总结

一定要用 bootstrap。节省大量时间。 nav 高度需要拉高,active 效果要明亮轻快些 body 下不要加统一的 wrapper, 因为有的是全屏的,有的是 1200px 固定宽度的 每个功能页面加点图片,会好看很多。例如,顶部图片 企业的重要信息最好显示在首页 着手编码之前,先在纸上将 HTML 结构构思好 轮播图能否配合 jumbotron 巨幕来展示 常用的基础功能 公司地址的地图展示 留言系统 ...

阅读全文...

下拉滚动时的炫酷效果 (animate.css + waypoints.js)

具体的动画效果可以通过 Animate.css 实现。 下拉到某处以触发 animate.css 效果,可以通过 waypoints 实现。 demo: var waypoint = new Waypoint({ element: document.getElementById('element-waypoint'), handler: function(direction) { this.element.className += " fadeInLeft"; }, offset: '75%' }); 参考 Creating Scroll An ...

阅读全文...

邮件排版

工具 查看邮件打开率,点击率,排版技巧等 怎样评价一封邮件的排版 内容优先 需要适配 PC,mobile,pad 的屏幕 手机、Web 端在邮件收件箱视图里能看到概要信息, 把重要数据显示在概要里,类似验证码短信会把验证码排前显示一样。 邮件排版相对 web 排版的特殊之处 只能使用 table 来排版 layout (tr>td 里再嵌套 table) css 推荐写成 inline 样式. head 里的 style 有可能被 email client 过滤掉。 宽度不要超过 600px,目前我使用的是 580px 图片域与邮件域最好相同 template 推荐使用 ...

阅读全文...

User Experience Design

将想法具化的一个过程。 为何要关注用户体验 一个产品成败的关键,在于用户如何评价: "这个产品能否给我带来价值?" "真的易用么?" "用起来愉悦么?" 这3个问题,会在潜意识里影响其是否成为你的忠实用户,而不是扫一眼就跑。 UX desgin 的目标就是,让用户对这三个问题都回答 “Yes”. UX 的第一原则 "一切皆是交流" “You cannot not communicate. Every behaviour is a kind of communication. Because behaviour ...

阅读全文...

关于轮播图的设计

carousel 旋转木马 - 即网站轮播图 又名 slider(滑块),slideshow,gallery (美术馆、画廊) 现在几乎每个站都在使用轮播图/carousel,但是我自己做了几个站,并没有一个轮播图效果能让自己满意。 不满意的地方: 仅仅是好看的图片轮播而已,没有有效地传递信息 PC 端与手机端没有完美的自适应方案 如何充分利用轮播图传递有效信息? 第一个轮播图上的文字,必须能够简明概要的描述这个网页的主题。 例如,客户给了我们两句标语 工作理念:用手,用脑,用心,做最美的牙! 经营宗旨:品质惠苍生,诚信赢天下。 从概括主题的角度来看,第一句话适合作为第一个轮播图, ...

阅读全文...

占位图服务 placehold.it 的替代品 lorempixel

今天发现 placehold.it 的图片都加载不了,于是找了一个替代品 lorempixel lorempixel 比 placehold.it 更爽的地方是,可以指定图片类型,例如: sports, business 这样,调试 demo 的时候就直观了,示例 体育 http://lorempixel.com/400/200/sports 食品 http://lorempixel.com/400/200/food 商业 http://lorempixel.com/400/200/business 国内的占位图服务 lorempixel 虽好,但是国内访问有时很卡,如果对图片没有 ...

阅读全文...

时下主流 PC 站的页面宽度

最近关注前端更多一些,发现目前主流的网站屏幕宽度有很大的变化。似乎变得越来越宽,比之前大气很多。 于是好奇地把经常上的几个网站的宽度查了一下 什么值得买 1200px 京东 1190px 淘宝 1190px 亚马逊 全屏自适应 qq.com 1000px 新浪 1000px facebook.com 1012px twitter.com 1190px 看来,使用 1190px 的更多一些 ...

阅读全文...

设计

判断一个网站是否有价值的唯一标准 是否对自己有有用 网站模板 http://91mb.com.cn 工具 http://www.tubangzhu.com/ 投放广告的技巧 不要出现两个连续的广告 不同人群/不同类型网站的广告选型不同。例如,低端人群选择百度广告;高端人员投放 Google 广告。 Web UI 库 semantic-ui 设计上比 bootstrap 清晰许多 bootstrap pure.css 很多页面 demo, 例如图片站等 WeUI 微信官方的 UI 库,微信嵌入 web 页的首选 Bttn.css - Demo 按钮样式 管理后台模板 ...

阅读全文...

字体

中文的楷体(KaiTi)还真是好看, 参考 片刻网 但是,更适合标题等醒目文字,正文部分还是使用各系统的常用字体。以增加差异化。 elementui 的字体 http://element-cn.eleme.io/#/zh-CN/component/typography font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; ...

阅读全文...

停止页面设计,开始流程设计

最让人苦恼的事情莫过于用户来了,啥也没点就离开了网站/应用。用户访问页数绝大多数为1。 页面反复改版,也没有效果。 几乎所有人都能看出问题出在哪里,“页面设计有问题!” 但是,如何解决呢?当前页面的设计好在哪里?问题又出在哪里? 怎样才算是一个令用户、令自己都满意的页面设计?如果一步步构建起来呢? 关键词 流程设计 你的目标 (objectives) 用户目标 转化漏斗 (Conversion Funnels) 流程设计必须回答的两个问题 你的目标是啥。即,你希望用户在你的应用上执行哪些操作。 用户的目标, 需求以及渴望是啥。如何满足用户。 网站的目标通常很容易细化: 注册账号 点击 ...

阅读全文...

色弱党的颜色主题

昨天写一个 web 页的时候,突然感觉配色有点奇怪。 但是又不知道如何调整,我想这是每一个色弱党的痛点。 看了一圈颜色,发现只能认出蓝色、黄色、白色、黑色、部分红色。其他颜色一律不敏感。 是时候建立一套适合自己的配色方案了。 “对我来说,蓝色是最丰富的颜色。我能看到所有蓝色的东西。” - 扎克伯格(色盲,无法识辨红色和绿色) 整理了一下我喜欢的几个颜色 .color_block { width: 200px; height: 50px; } 蓝色 0000FF 0074D9 黄色 FFFF00 FFDC00 红色 FF0000 FF4136 白色 F0F ...

阅读全文...

近期节日

2018年10月22日 世界传统医药日
2018年10月23日 霜降
2018年10月24日 联合国日
2018年10月31日 世界勤俭日
2018年11月01日 万圣节
2018年11月07日 立冬
2018年11月08日 中国记者日
2018年11月10日 世界青年节
2018年11月11日 光棍节
2018年11月14日 世界糖尿病日
2018年11月17日 国际大学生节
2018年11月20日 国际儿童日
查看更多节日