幻灯片

改为图片

Apple原来有幻灯片

改为(展开的)图片更简单了™

长点心>  外贸人>

设计

不是为了好看,是为了好用

设计

不是为了好看,是为了好用

设计

不是为了好看,是为了好用

设计

不是为了好看,是为了好用

设计

不是为了好看,是为了好用

设计

不是为了好看,是为了好用

设计

不是为了好看,是为了好用

测试

tst test test test

这是一个固定(Sticky)列。外贸网站中,固定列的作用一般是将产品参数,用途等。一般在固定列上面都有CAT(call to action按钮)。

Giles Colborne在简约至上里面提到了四个原则,删除-组织-隐藏-转移

比如删除了 back to top这样的按钮

比如页脚里面很多内容的组织,

把语言按钮转移到了页脚

产品具体的新技术和次要参赛隐藏

 

Robin Williams在设计书里面提到了四个原则

亲密性

对齐

重复

对比

正文:

Apple一般正文用19点字号(磅是印刷的,电子屏幕一般用点or PX or像素来代替),一般介绍的时候只有一段,外加一个标题,一个图片。在有多段的时候一般用17点字号。段首不锁进(锁进是老式打印机的产物),在段间距和行距一样的时候才锁进。字体颜色是HEX #333

标题:

英国的Gavin Ambrose和Paul Harris认为字体和标题的比例是黄金比例,即0.6倍,或者说1.6倍。来看下苹果的。大图的标题h2,44px;内容h3,32px;比例1.83。小图标题h4 40px,内容h5 21px,比例1.9。大家可以用作突出的参考。在新闻界面,副标题24px和正文17px比例是1.41。字重区别都比较大。颜色HEX #111

颜色:

主要的颜色是黑白灰。有时候会配合着产品出淡金色,红色,深空灰等。链接颜色蓝色。颜色H #111 P #333 Link: #0070c9。页脚颜色 标题: #333,text #555,note 浅灰色#888,border-bottom-color: rgb(214, 214, 214);背景颜色 导航 background: rgba(0,0,0,0.8); 主页浅灰1 #fafafa, #f5f5f5,#eee。页脚背景 #f2f2f2。

字体字重:

字体是”SF Pro Display”,”SF Pro Icons”,”Helvetica Neue”,”Helvetica”,”Arial”,sans-serif。前两个是不常见的字体,整体偏细。新闻正文一般在标准400;副标题标题在500;首页配合大图介绍产品一般用600.

图片:

图片很奇怪,首页都用了jpeg格式;看到的图片又是有背景的。PNG按理说可以做成透明底,并且相对要小,但苹果没用png。以背景形式做的,下载有一定门槛。我猜测是为了防止盗图。

对齐:

只有在介绍产品的主图时候剧中。其他情况一律居左对齐。做剧中对齐,字号一定对比要强烈,Apple在1.8-1.9倍左右。常规的左对齐在1.4倍。

链接和按钮:

只有在购买的时候有button,其他时候的链接,就仅仅是加了一个>的符号。颜色蓝色。某些地方的链接比如页脚,hover动作没有颜色变化,只是增加下划线。一致性强。没有hover变化底色的强烈交互。简单作风。

布局位置:

导航栏只有Logo,产品和搜索。左侧的位置重要,阅读习惯是从左向右,所以左上角最重要的位置,放logo突出品牌。导航很简单,只有产品。搜索永远是导航找不到才用的备选,只有图标。点击后全宽搜索。其他的栏目放在了页脚。没有订阅,没有社交,没有返回顶部,没有侧边栏。国内大部分的网站(有时候我也不得不)是导航有分类目录,侧边栏是分类目录,页脚还是分类目录。其实这是两个设计思路;要么从每个地方都能进入;要么某个栏目只能在某个最合适的地方,像python语言。

导航栏:

导航栏上的图标和导航,都是用的svg适量格式,作为背景。布局是flex从头到尾。手机或者宽度小于768,汉堡包导航不是三道杠,是两道杠。看起来简单点?导航是在左边,不是常规的右边。看了下周围人一般是右手。但是MAC上的很多操作都在左边。看一下iphone上多数的点击事件,是集中在左边的。比如返回,取消。再看一下iphone的滑动事件,大多都是从左边到右边的。最后再看下硬件设计,音量的设计也放在了左边。电源键也正好在我的食指位。苹果的诸多设计,都是为了方便左手单手持设备可以完成操作的。我的结论:故意的。

 

背景图

是个好东西

Menu