教程提纲

幻灯片时代的鼎盛和抛弃

官网首页的第一屏,大部分选择幻灯片;幻灯片的优点显而易见,自动播放,大气;猜测可能是Falsh时代遗留的产物,现在也是如日中天,几乎每个网站首页都做幻灯片处理。

幻灯片的用户体验真的好吗?有人在认真的对幻灯片和其他元素做AB测试吗?

幻灯片的缺点也显而易见,手机版的处理(虽然某些插件处理的很得当了);对幻灯片的控制,上下滑动和左右滑动的切换。还有就是编辑的难易程度,数据大小。苹果的官网在2018年抛弃幻灯片。

如果要做幻灯片,那么:

全屏,全宽,自动大小

全屏可以做大大气;全宽x500px上下的高度可以看到第二屏的内容。

背景和前景的设计,图片文字按钮的搭配布局

文字靠左 图片靠右适用于大多数情况,因为文字对齐更容易做。没有什么元素是不能被替换的。

手机版

可以把说明性的小字在手机版隐藏,只保留标题和前景大图,按钮甚至也可以隐藏。如果处理不好,索性在整个手机版都隐藏幻灯片。

结语:在我看来,瀑布流统治下的时代,鼠标的左右滑动正在消失,用户等待下一屏自动出现的耐心也收到考验;不如打破僵局,把原先设计好的幻灯片上下排列。

 

顶部和底部

绝大部分横向处理;

全宽顶格在逐渐流行;

Logo据左侧还是主流

无TOP版的导航VS复杂导航

语言切换

搜索

官网的搜索框,只有用户在看完导航,感觉lost,这种情况居多,被称为备用选择;或者目的明确的要搜索之前见过的某个文章之类的。

所以,外贸官网,搜索永远是第二选择;既然第二选择,可以隐藏搜索框,点击出现。

社交

社交在外贸官网的作用,主要是引流;既然已经通过某种社交网络来到了网站,完成了引流的作用,那社交网站在网站的作用是增加可信度。

网站的四个第一印象:Authority Professional Reliable Friendly

电话邮箱

某些内容,想要用户看到,摆在用户前面,如果无益处,用户视而不见;某些内容,千方百计隐藏,但是有用,用户也能搜到;所以对于电话邮箱,只要放在足够打动用户的地方,即可。比如每一篇软文的背后。

 

导航,侧边导航,面包屑导航和页脚导航

导航的重要性排序

主导航尽量少,用户找东西的眼球运动即用户体验。

消失的面包屑

如果没有侧边栏?

没用的都放在页脚

万恶的弹窗是与非

 

提纲写了10个,还没有动工。今天继续写第11个。事无巨细,关于外贸,设计,SEO等。用十天我每一步精细,然后开工。

分三部分,WordPress入门,设计部分(style&Components),营销部分(seo,adwords等)

形式上:

视频适合讲理论;并且容易鉴定copy;所有的都做视频。

网页的 GIF+文字适合讲购买流程等文档性质的。

纯页面演示具体的元素。demo.imaiko.com

可以度量,推荐的色号,距离的大小,字号,字体,

 

大纲正文

免费的DEMO版本,

  • 从2017开始,安装Impreza,导入一个Demo;大约2分钟;
  • 导入一个工业的XML文件,大约1分钟。

付费版本:

  • 详细介绍WordPress插件
  • 详细介绍Elements & 提供多个XML文件
  • 详细介绍营销部分

WordPress 从入门到出门

WordPress 介绍和安装

域名

如何选择域名 (视频)

如何购买,单独还是一起?

一元域名

服务器

购买服务器 以hostgator为例 (视频)

推荐列表 hostgator,bluehost,vultr,liaosam,godaddy一分钱服务器 (gif)

安装和后台

份额 (视频)

showcase

自带的安装,(视频)

cpanel,

手动等

人工客服

 

 

 

 

WordPress后台

管理评论

wordpress安全

参考wordpress 入门

wordpress主题

按照 Impreza documentation为提纲 + 文字翻译

Betheme文字+视频 (后期做)

wordpress插件

VC插件

yoast SEO

WPsuper cache

wp table press

contact form 7

anti-spam

外贸网站设计从入门到出门

以bootstrap,the docs和visual composer为基础。

页面设计

layout & components

boxed & full width

home page

detailed page

FAQ

404

sidebar

banner

nav bar

footer

 

header, footer, nav bar, sidebar, top, bottom, breadcrumb nav

  1. top header
  2. bottom header
    1. logo
    2. nav bar
    3. search 亚马逊淘宝等网站,搜索是第一选择;常规的外网网站,产品种类不多(相对于亚马逊),所以导航是第一选择,搜索永远作为第二选择。所以,搜索不应该占据太大的空间。简洁的角度说,搜索按钮要优于搜索框。最好放在头部导航栏右侧。
    4. 多语言的dropdown
    5. social
  3. breadcrumb nav
  4. sidebar
  5. top footer
    1. subscribe
    2. form
    3. contact
    4. menu 严肃的商业网站这里最好是纯文字的menu,3-6列,作为滑倒底部,争取流量的一部分。从简洁的角度来讲,这里是头部导航的补充。也就是说,头部导航放的内容是引导性质的,底部是全面的。在手机版,这样全面的内容可以折叠起来。
  6. footer bottom 放版权,隐私信息,sitemap,

样式设计

Basic styling & elements

 

元素设计

Jonasschmedtman

介绍 1h  designer,developer,新手 guidelines

Typography

易读readable 美观beautiful

  • 字号15-25px;
  • Head 大很多 1.6 -2.0
  • line-height 120-150%  overlap spacedout
  • 45-90 英文单词每行
  • use good fonts family
  • sans serif :中性,干净,简单,现代;
  • serif:传统,纸质,长时间阅读
  • open sans, lato, raleway, monsterrat, PT sans, roboto, roboto condensed
  • cardo, merriweather, PT serif,
  • 只用一种字体 typeface

Color use color like a pro

  1. 一种主色 one base color HEX
  2. 推荐多色彩组合工具: AOB, Color SC, Peloton
  3. 用颜色来吸引注意力
  4. 不要用纯黑色
  5. 颜色与感情
  6. 红色,激情,活力,力量
  7. 橙色,喜悦,创造力,友好,自信,勇气
  8. 黄色,激情,喜悦,热爱,智慧
  9. 绿色,生命,健康,自然,美金,和谐,平衡
  10. 蓝色,平和,可信,稳定,专业,荣耀,(社交网络都喜欢的颜色)
  11. 紫色,知识,健康,智慧,尊贵,奢侈,神秘
  12. 粉色,浪漫,喜爱,关心,平和
  13. 棕色,放松,自信,大地,永久,可依赖
  • Red is a great color to use when power, passion, strength and excitement want to be transmitted. Brighter tones are more energetic and darker shades are more powerful and elegant.
  • Orange draws attention without being as overpowering as red. It means cheerfulness and creativity. Orange can be associated with friendliness, confidence, and courage.
  • Yellow is energetic and gives the feeling of happiness and liveliness. Also, it associates with curiosity, intelligence, brightness, etc.
  • Green is the color of harmony, nature, life and health. Also, it is often associated with money. In design, green can have a balancing and harmonizing effect.
  • Blue means patience, peace, trustworthiness, and stability. It is one of the most beloved colors, especially by men. It is associated with professionalism, trust and honor. That’s actually why the biggest social networks use blue.
  • Purple is traditionally associated with power, nobility and wealth. In your design, purple can give a sense of wisdom, royalty, nobility, luxury, and mystery.
  • Pink expresses romance, passivity, care, peace, affection, etc.
  • Brown is the color of relaxation and confidence. Brown means earthiness, nature, durability, comfort, and reliability.

图片

  • 把文字放在图片上:只有图片深色,文字白色着一种情况。
  • 给图片增加一个滤镜 overlay
  • 把文字放在框内,易读性。
  • 模糊背景图,focus前景图
  • floor fade

Overlay the image

.darken {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(YOUR IMAGE HERE);

}

Example: http://jsfiddle.net/drpak8vy/1/

Put text in a box

.text-box {

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

display: inline;

padding: 10px;

}

Example: http://jsfiddle.net/qg83m36p/

Floor fade

.floor-fade {

background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);

}

ICONS

用图标来列举特点或者步骤

用图标做动作和链接(图标大家立即认识到是什么意思,比如用房子做home页面,图标后有文字label)

图标不应该在中心舞台 center stage

use fonts, static image or vector icon font, any resolution

Space & layout,

留白

  1. 元素之间
  2. 组之间
  3. section之间
  4. 不要夸张

定义 上下级关系 hierarchy

用户体验 UX (user interface)

 

抄袭 Inspiration

收集喜欢的,理解,为什么好看,

STEAL like an artist

好的网站列表

网站转化率

  • 强调重复多次主要转化按钮,一屏一个主要的。
  • 抓住用户的注意力,比如popup,确实有用
  • 告知用户benefit
  • 不要要太多的信息
  • 用社交来证明,social proof,testimonals,logos,
  • 限时,限量,
  • 用稀缺性

Let’s quickly summarize the main content of the course:

  • Most of your content will be text, so beautiful typography is a key element to a good looking website.
  • Images are getting more and more important in webdesign, so choosing great images and putting text on them is an essential part of your work.
  • Icons are also a good way of setting a friendly tone for your website, but use them carefully.
  • The adequate use of whitespace makes a website look professionally designed, so use it a lot, but in the correct way.
  • Build a layout by defining the visual hierarchy of your content. Whitespace is also important for this.
  • Your website should be designed in a way that ensures that both the user and the owner of the website achieve their goals. This is the user experience.
  • It is very important that you get inspired by studying well-designed websites from other designers.

 

 

The Ultimate Cheatsheet: All Guidelines In One Place
节 4,讲座 17

This cheat sheet is intended to serve as a quick reference for you.

It contains all the guidelines I showed you in this course.

It is very important that you have all of the guidelines in mind at the same time when you’re making your designs.

Beautiful Typography

1. Use a font-size between 15 and 25 pixels for body text

2. Use (really) big font sizes for headlines

3. Use a line spacing between 120 and 150% of the font size

4. 45 to 90 characters per line

5. Use good fonts

6. Chose a font which reflects the look and feel you want for your website

7. Use only one font

Using Colors Like a Pro

1. Use only one base color

2. Use a tool if you want to use more colors

3. Use color to draw attention

4. Never use black in your design

5. Choose colors wisely

Working with Images

1. Put text directly on the image

2. Overlay the image

3. Put your text in a box

4. Blur the image

5. The floor fade

Working with icons

1. Use icons to list features/steps

2. Use icons for actions and links

3. Icons should be recognizable

4. Label your icons

5. Icons should not take a center stage

6. Use icon fonts whenever possible

Spacing and layout

1. Put whitespace between your elements

2. Put whitespace between your groups of elements

3. Put whitespace between you website’s sections

4. Define where you want your audience to look first

5. Establish a flow that corresponds to your content’s message

6. Use whitespace to build that flow

Improve your website’s conversion

1. Build trust with your future customer

2. Repeat your primary action

3. Grab your user’s attention

4. Tell your user the benefit

5. Don’t ask for too much information

6. Use social proof

7. Use urgency

8. Use scarcity

  1. Alignment
  2. balance
  3. contrast
  4. proximity 亲近
  5. consistency repetition
  • line 线
  • from 形状
  • color
  • 文字
  • mass 大块
  • space 留白 helps focus 极简主义

 

 

  • wordperss checklist
  • hosting  50刀
  • domain 10刀
  • install wordpress
  • change theme
  • add logo
  • creat pages
  • creat menu
  • setup home page

 

下一步,按照 wordpress 2015视频讲解

下一步,讲解不同的theme

下一步,讲解visual composer

讲解yoast SEO 等插件

 

1元的域名

1分的服务器

 

 

 

 

 

 

外贸网站推广从入门到出门

SEO

L P

Analytics

Webmaster

SNS

 

准备 {PPT}

1.1 视频:从安装好的wordpress安装主题,导入一个Demo;大约3分钟;

视频地址

1.2 GIF动画;讲解Visual Composer,顺便讲解设计1对齐原则;

WYSIWYG 编辑器(参考WordPress入门)

VC编辑器。视频+GIF文档。(列,图片,等等)

1.3 服务器,域名,和解析,文字

1.4 安装wordpress,

1.5 WordPress 页面,文章,评论等等(参考WordPress入门)

 

设计和素材

2.1 外贸里面的字体和配色,4种字体,old style,serif,sans serif,bold,字号,大小搭配;引入一个全息设计原则,圆角,大小,配色对比,1.1-2.0之间的对比。设计是为了有效。

行距,段间距,和section距离比例。

最合适的宽度。box or full width

2.2 导航,搜索,logo,侧边栏,页脚。

搜索永远作为第二选择()

假如去掉侧边栏?(左右区别,CMS和博客的区别)

Mega Menu怎么样?

Compact footer?

面包屑导航和侧边栏,类似产品(相关文章)【有且只有一个最佳进入途径;多个进入途径】(简洁方式的有效性)

回到顶部(是去控制)

在线沟通

弹出框

货号的问题,产品数量海量的操作方法。

询价表单,一个介于B2B和B2C之间的怪胎。「用popup  一个分类操作,加上 pema link thumbnail 和title,外加cf7」

 

2.3 图片,场景图,背景图,主图背景,拍摄,格式,命名,大小,logo图,logo制作,分辨率,来源,网站ICON,Preloader。

场景图可以下载;

Slider 背景图

背景图最好是深色,或者冷色调,(冷色后退,暖色靠前。黑色靠后,白色靠前。做个对比,白色偏大,黑色收缩,提出边框理论,点线面中的收缩和张力)

灯箱+手机也能拍产品?其实不必事事亲为。介绍外包的原则。(有门槛,需要器材)

Logo制作?

格式:jpeg,png,gif,svg,像素,位图,16色-32色,web安全色,

图标,fontawesome

命名:

视网膜屏幕命名先2x;

怎样搜图?

ICON和PreLoader

2.4 文案,About FAQ,文章的写法 「Breakthrough Advertising」

2.5 Themeforest awwwards

 

视频

3.1 写文章,SEO现状;。(用户为中心的原则)经典的比喻(女人)

3.2 关键词规划师-黑客(用户为中心的原则)

3.3 发布。(用户为中心的原则)

 

推广

4.1 robots文件(Yoast SEO),.htaccess 文件(略),谷歌分析,谷歌站长

4.2 ppc,(已知视频)

4.3 landing page,外贸行业(意识流——Communication Pattern这本书)

 

其他

商城网站 SSL WOO

品牌网站

 

 

 

更新于 2018年12月4日

帮到你了吗?

相关文章