《写给大家看的设计书》书摘

2015年拿下的第一本书,花了3天时间,之所以这么快是因为趁着多看阅读的畅读期(即在指定期限内可以阅读任意收费书籍)将放在购物车多时而舍不得买的书大快朵颐了顿。
正如书名所言,这是一本设计入门书籍,语言浅显易懂,但仍没有脱离翻译腔,和纯正的汉语相比稍显啰嗦了点儿。
书的开篇就是阐述4大法则,即亲密性、对齐、重复对比,从俺摘录的段落也可以看出,凡是落实到具体的设计都是围绕这4点展开的。
对于入门者而言,书中讲到的设计原则和技巧都非常有用,虽然在学设计前的普通人也有分辨好设计与坏设计的能力,但说不出个所以然来,了解了设计原则后,我们就能很明了地说出来为什么这是一个好(坏)设计,颇有醍醐灌顶之味。
书中有大量包装、名片、传单、信笺信封、新闻简报、宣传册、明信片、广告、Web和字体的设计示例,有正有反,并不是一本夸夸其谈的书,能让新手很直观地理解到设计的内涵。
当然也有缺点,这本书的示例全都是西文字母,后半部分中的字体设计对中文读者帮助有限,其次就是并没有对电子版进行适配,如文中给出的页码与实际页码并不匹配;练习题的答案在末尾,实体书这样还能理解,电子版无法方便地翻来翻去对照答案。
作为一本讲设计的书籍,排版和装帧非常值得称道,颇为赏心悦目。总之,如果想对设计有个全局的了解,而目前还只是个门外汉的话,那这本书非常适合你。

封面

继续阅读《写给大家看的设计书》书摘

MarkDown资料库

学习MarkDown直接推荐阳志平的博客,其MD专业水平甚高,俺也在他的博客里入门MD。

基础类

为什么作家用MarkDown

为什么文科生也该用MarkDown

MarkDown使用说明

Markdown在线写作速成

进阶类

V2EX MarkDown类主题

Pandoc入门浅谈

Gitbook使用入门

MD写表格

其他

支持MD格式的为知笔记(直接新建笔记 标题.md 即可开写)

提示和范例——重要的电商网站功能(一)

你可以采取多种多样的方式来设计你的网络商店。

但是,你可能会注意到,一些引人注目的电子商务网站必定会有一些独特的地方,这些特征与用户的体验息息相关。

浏览过许多电子商务网站之后,我们发现它们几乎都具备这些共同点。

产品导航

我们甚至可以这样说:一个网络商店最重要的组成部分,就是它的导航。

产品导航,不仅在网络商店上显得如此重要,对其他任何网站而言都是如此。用户需要通过一种直观的导航系统来帮助他们快速浏览不同的类别和产品。信息架构中的投入,是一个成功电子商务网站的前提。

Amazon

亚马逊就拥有1种最佳的(实际上也被应用得非常广泛)导航系统。构建在其网站上的产品分类组织得井然有序,因此,用户可以方便的在不同种类间定位。

正如你在如下例子中所见到的,左侧的导航菜单尤为流行,究其原因,是其可以通过横向菜单来嵌入更多的链接。

Overstock

Overstock以垂直菜单栏的形式展现其产品导航系统。除了主导航菜单外,Overstock的页脚也有1个强健的导航菜单。

Olive & Myrtle

这是一个销售环保产品的电子商务网站。左侧是一个垂直的导航菜单,“Sale”链接采用了粗体+红色凸显的方式使之更加醒目。

Via Snella

如果一个电子商店的产品或产品分类并不多的话,一个横向菜单就足以囊括全部的产品导航。在如下范例中,正如你所见到的,Via Snella,这个始于2006年的男性时装企业,采用了水平排列的过滤器导航,显得清新雅致。

4th Street Cookie Company

第四街曲奇公司是一个主要以实体商品为主的混合商铺。不过,他们的在线商店只是其线下商店的一个有益补充。像这样的产品导航,相较于Amazon,使用得就不是那么广泛了,这是由于第四街曲奇公司只提供了少量的独特产品。

Mozilla Store

Mozilla store采用的是左侧垂直导航菜单,展示了网店的产品与种类。

etnies

这个网店提供了2种浏览产品的方式:一种垂直导航菜单和一种悬停于“shop”按钮即会出现的下拉菜单。

Trilby Phoenix

在这个电子商店里,你可以通过左侧的垂直菜单导航来浏览产品。菜单细分为3大类,点击一个主要分类就会显示更多链接。

Empire Patio Covers

Empire Patio Covers采用了横向导航菜单。为了克服横向菜单空间不足的缺点,子菜单和下拉菜单被应用其中。

 

OneHorseShy

这个产品导航想当简单,你可以通过主题轻易地或者产品。

 

下节预告:

搜索框

版权归原作者所有,翻译:佑菱。

http://sixrevisions.com/user-interface/e-commerce-website-features-tips-examples/

斯坦福大学公开课摘录

1)视觉设计是让人们感受到某种方式的工具,设计,就产品而言,需要考虑互动设计,视觉实际与工业设计。在设计之初不一定就必须要考虑清楚盈利模式,市场(or网络)瞬息万变

2)保守的面孔(色调)往往会给人安全或者平静的感觉

3)绿色=生命力,蓝色=干净

4)视觉设计需要运用视觉语言

5)数据是我们(Maker)的朋友,我们需要数据来建立模型,了解客户(Customer)的需求。另外,数据的搜集渠道,以及收集方式都必须严谨

6)适当的考虑多样化的方式,在某一些阶段,多样化并不是吸引人气或者扩大规模的办法

7)在设计产品之前,或者之中,需要考虑产品的层次(过程)

8)我们必须知道——这是不是我们的工作,僭越并不会让你所想的发生,反而会影响整个工程(or项目)的进度

我关注的几个电子产品网站

我给出的链接都是UC浏览器RSS阅读链接,如果你现在用UC,可以直接点。如果是其他浏览器,请自行Google,对于新闻阅读,严重推荐RSS Feed!

最著名的:Cnbeta
这个资讯最全面,也比较正规,不过经常出现前一篇文章一个观点,后一篇文章观点完全相反的乌龙。国内的Electronic production网站资讯大多翻译自国外网站,翻译水平参差不齐,如果你英语不错,就去看原文,免得受主观翻译之影响。
UC浏览器点击:http://myz.uc.cn:8030/myz2/ucrss/index.php?m=Doc&do=View&feedId=665&desk=0

最具威望:engadget
不用说了,世界著名,在电子产品资讯领域人气无敌。大陆台湾都有分站:http://myz.uc.cn:8030/myz2/ucrss/index.php?m=Doc&do=View&feedId=275&desk=0
在去年12月保洁与zol客人会见时我就推介送测engadget,原因很简单,专业评测,zol的评测人员接口都不认识,实在无语。

关注上市产品:Bestbuy
美国最大消费电子通路商,属于导购性质的网站,你想了解手机风向的话,不要错过。这个网站资讯很权威,可以说这类网站才是手机资讯的最上家。
http://myz.uc.cn:8030/myz2/ucrss/index.php?m=Doc&do=View&feedId=3049149&desk=0

国际权威杂志:PCworld
喜欢上这个是因为国内一本杂志《微型计算机》,微型计算机经常援引PC World的观点。PW的分析绝对是一流的,我的分析不过是捡点残羹剩饭,只学了个模样,而且经常写到一半就没时间写了。
http://myz.uc.cn:8030/myz2/ucrss/index.php?m=Doc&do=View&feedId=12279&desk=0

美国有限电视新闻网&美国广播公司科技频道
更新得很猛烈啊,喜欢的是CNN和ABC的资讯都是以媒体的角度写的,看参数看腻了就看这个吧。
CNN:http://myz.uc.cn:8030/myz2/ucrss/index.php?m=Doc&do=View&feedId=1164&desk=0
ABC:http://myz.uc.cn:8030/myz2/ucrss/index.php?m=Doc&do=View&feedId=39736&desk=0

台湾移动资讯:Mobile01
台湾的部落格与咨询网内容写得都很贴近生活,读起来很亲切。作为一个自称ITer的人,不关注世界各地的时讯岂不是折了自己的名堂?

谷歌控必备:谷奥
自从从了安致以后,自己也变成了谷歌控,这个和电子产品没多大关系,但刚才安致手机论坛是没有错的。

出处,youling的博客:http://youling.wordpress.com.cn/my-favorite-ep-websites.html

HTML代码详解

格式标记

[DIV] ● 区隔标记 设定字、画、表格等的摆放位置
[STRONG] ● 加重语气 产生字体加粗 Bold 的效果
[B] ● 粗体标记 产生字体加粗的效果
[EM] ● 强调标记 字体出现斜体效果
[I] ● 斜体标记 字体出现斜体效果
[TT] ● 打字字体 Courier字体,字母宽度相同
[U] ● 加上底线 加上底线 反对
[H1] ● 一级标题标记 变粗变大加宽,程度与级数反比
[H2] ● 二级标题标记 将字体变粗变大加宽
[H3] ● 三级标题标记 将字体变粗变大加宽
[H4] ● 四级标题标记 将字体变粗变大加宽
[H5] ● 五级标题标记 将字体变粗变大加宽
[H6] ● 六级标题标记 将字体变粗变大加宽
[FONT] ● 字形标记 设定字形、大小、颜色 反对
[BASEFONT] ○ 基准字形标记 设定所有字形、大小、颜色 反对
[BIG] ● 字体加大 令字体稍为加大
[SMALL] ● 字体缩细 令字体稍为缩细
[STRIKE] ● 画线删除 为字体加一删除线 反对
[CODE] ● 程式码 字体稍为加宽如[TT]
[KBD] ● 键盘字 字体稍为加宽,单一空白
[SAMP] ● 范例 字体稍为加宽如[TT]
[VAR] ● 变数 斜体效果
[CITE] ● 传记引述 斜体效果
[BLOCKQUOTE] ● 引述文字区块 缩排字体
[DFN] ● 述语定义 斜体效果
[ADDRESS] ● 地址标记 斜体效果

清单标记

[OL] ● 顺序清单 清单项目将以数字、字母顺序排列
[UL] ● 无序清单 清单项目将以圆点排列
[LI] ○ 清单项目 每一标记标示一项清单项目
[MENU] ● 选单清单 清单项目将以圆点排列,如[UL] 反对
[DIR] ● 目录清单 清单项目将以圆点排列,如[UL] 反对
[DL] ● 定义清单 清单分两层出现
[DT] ○ 定义条目 标示该项定义的标题
[DD] ○ 定义内容 标示定义内容

表格标记

[TABLE] ● 表格标记 设定该表格的各项参数
[CAPTION] ● 表格标题 做成一打通列以填入表格标题
[TR] ● 表格列 设定该表格的列
[TD] ● 表格栏 设定该表格的栏
[TH] ● 表格标头 相等于[TD],但其内之字体会变粗

图形标记

[IMG] ○ 图形标记 用以插入图形及设定图形属性

连结标记

[A] ● 连结标记 加入连结

框架标记

[FRAMESET] ● 框架设定 设定框架
[FRAME] ○ 框窗设定 设定框窗
[IFRAME] ○ 页内框架 于网页中间插入框架 IE

多媒体标记

[BGSOUND] ○ 背景声音 于背景播放声音或音乐 IE
[EMBED] ○ 多媒体 加入声音、音乐或影像

其他标记

[MARQUEE] ● 走动文字 令文字左右走动 IE