大家好，奥克兰软件开发公司local fern的前端开发工程师John～，在这篇文章中，我们将会使用preact-i18n来国际化您的react项目。多语言的网站可以让新西兰西人和华人都能找得到

步骤 1：设置Preact CLI, 并创建一个新的项目

注: 如果您已经熟悉Preact了，您可以跳到下一步。

如果您还没有将Preact CLI安装到您的电脑，请使用以下的命令来安装Preact CLI。这CLI需要Node.js 版本 6.x 或以上。$ npm install -g preact-cli

当您已经成功将Preact CLI安装到您的电脑中，我们将会使用以下的命令来创建一个名为my-project的项目。在这个项目中，我们将会使用default模板。$ preact create default my-project

之后呢，您可以使用以下的命令来启动本地测试服务器。$ cd my-project && npm run start

这个时候，我们需要打开我们的游览器，并前往http://localhost:8080, 你将会看到像这样类似的画面：




步骤 2：安装preact-18n

我们将会使用以下的命令来安装preact-i18n到您的项目中。$ npm install --save preact-i18n

preact-i18n是非常容易使用的。更重要的是， 这preact-i18n在gzip之后才占据不到1.3kb的大小。

步骤 3：创建definition文件

当你已将preact-i18n安装到您的项目之后，我们将会创建一个definition文件。我们将会把我们要翻译的文字和句子，储存在这个JSON文件中。

我们将会把这个definition文件储存在src/i18n/zh-tw.json。{
\"home\": {
\"title\": \"主页\",
\"text\": \"这是个Home组件。\"
}
}


步骤 4：导入IntlProvider及definition文件

接下来，我们将会从src/components中打开app.js。我们将会在这个文件中导入IntlProvider及definition文件。import { IntlProvider } from \'preact-i18n\';
import definition from \'../i18n/zh-tw.json\';


步骤 5：把IntlProvider放在项目中最高层级的组件

然后呢，我们将会在把<IntlProvider>放在项目中最高层级的组件，也就是我们的app.js。这样子，我们就能在这Preact项目中的任何一个组件中读取到definition文件。render() {
return(
<IntlProvider definition={definition}>
<div id=\"app\" />
</IntlProvider>
);
}


在这个时候，您的app.js文件的内容应该是要跟以下的例子类似:import { h, Component } from \'preact\';
import { Router } from \'preact-router\';
import Header from \'./header\';
import Home from \'../routes/home\';
import Profile from \'../routes/profile\';
// 导入 IntlProvider 及 definition 文件。
import { IntlProvider } from \'preact-i18n\';
import definition from \'../i18n/zh-tw.json\';
export default class App extends Component {

handleRoute = e => {
this.currentUrl = e.url;
};
render() {
return (
// 把 <IntlProvider> 放在项目中最高层级的组件
<IntlProvider definition={definition}>
<div id=\"app\">
<Header />
<Router onChange={this.handleRoute}>
<Home path=\"/\" />
<Profile path=\"/profile/\" user=\"me\" />
<Profile path=\"/profile/:user\" />
</Router>
</div>
</IntlProvider>
);
}
}



步骤 6：使用Text来显示翻译字符串文字
 

我们只差一步就成功了。在以下的例子中，我们将会翻译主页(src/routes/home/index.js)中所有的文字。现在，我们只需要把网页中的字改成<Text>。因此，我们将会把<Text>添加进<h1>和<p>里。import { Text } from \'preact-i18n\';
const Home = () => (
<div>
<h1>
<Text id=\"home.title\">Home</Text>
</h1>
<p>
<Text id=\"home.text\">This is the Home component.</Text>
</p>
</div>
);
export default Home;





 
 

后备文字
 

为了避免网页中出现空白，我们应该在<Text>中输入后备文字。 如果preact-i18n无法在您的definition中找到相关的文字或句子，那preact-i18n将会使用你刚才在 <Text>…</Text>输入的后备文字。<Text id=\"unknown.definition\">This is a fallback text.</Text>

// 这将会渲染: \"This is a fallback text.\"
Localizer 和 MarkupText
如果您是想要翻译HTML属性中的文字 (比如说 placeholder=\"\"或是title=\"\"等等)，您应该使用<Localizer>，而并不是使用<Text>。

相反的，如果您是想要在您的翻译的文字或句子中使用HTML Markup, 您必须使用<MarkupText>。<MarkupText>将会把已翻译好的文字或句子渲染在一个<span>tag中。

在以下的例子中，我们将会在我们的definition文件中添加多几行的代码。first_name及last_name，将会使用在<Localizer>中的例子。 而我们会在<MarkupText>中的例子使用link。{
\"first_name\": \"名\",
\"last_name\": \"姓\",
\"link\": \"这是个<a href=\'https://www.google.com\'>连结</a>\"
}
在你更新主页(src/routes/home/index.js)中的内容之前，记得将Localizer和MarkupText导入到该页中：import { Text, Localizer, MarkupText } from \'preact-i18n\';
const Home = () => (
<div>
<Localizer>
<input placeholder={<Text id=\"first_name\" />} />
</Localizer>
<Localizer>
<input placeholder={<Text id=\"last_name\" />} />
</Localizer>
<MarkupText id=\"link\">
This is a <a href=\"https://www.google.com\">link</a>
</MarkupText>
</div>
);
export default Home;




模板 (Templating)
 

如果您想要在您的definition中注入一些自定义的字符串，您可以使用fields属性来实现。

首先呢，我们需要先更新我们的definition文件。在我们的definition文件中，我们需要将我们要被自定义的字符串替代的文字，更改成像{{count}}或者是{{total}}这样子的占位符。
{
  \"page\": \"{{count}} / {{total}} 页\"
}
之后呢，我们需要在我们的<Text />中加入fields属性。因此，您的代码应如下所示：import { Text } from \'preact-i18n\';
const Home = () => (
<div>
<h2>
<Text id=\"page\" fields={{ count: 5, total: 10 }}>
5 / 10 Pages
</Text>
</h2>
</div>
);
export default Home;






 
 

 
复数 (Pluralization)

如果您要翻译的语言有复数的话(比如说像英文：apple / apples)，您可以使用以下其中一个方法，来把已翻译好的文字和句子放进您的definition文件里。

\"key\": { \"singular\":\"apple\", \"plural\":\"apples\" }
\"key\": { \"none\":\"no apples\", \"one\":\"apple\", \"many\":\"apples\" }
\"key\": [\"apples\", \"apple\"]
在以下的例子中，我们将会把模板和复数的例子结合在一起。但在那之前，我们需要更新我们的definition文件：{
\"apple\": {
\"singular\": \"Henry has {{count}} apple.\",
\"plural\":\"Henry has {{count}} apples.\"
}
}

接着，我们将会把以下的代码粘贴到src/routes/home/index.js中：import { Text } from \'preact-i18n\';
const Home = () => (
<div>
<p>
<Text id=\"apple\" plural={1} fields={{ count: 1 }} />
</p>
<p>
<Text id=\"apple\" plural={100} fields={{ count: 100 }} />
</p>
</div>
);
export default Home;





 

 
 根据以上的步骤，你就能在您的Preact项目中使用模板和复数。

动态导入definition文件
在现实情况中，您将会根据用户的选择来设定网页的语言。

您可以使用游览器的语言(通过navigator.language)， 或者是让用户自己手动更换语言。

然而，为了避免我们将不必要的definition文件导入进去，我们可以使用import()来实现动态导入definition文件。这样一来，我们只会导入用户所选择的语言所需要的definition文件。import { Component } from \'preact\';
import { IntlProvider } from \'preact-i18n\';
import defaultDefinition from \'../i18n/zh-tw.json\';
export default class App extends Component {
state = {
definition: defaultDefinition
}
changeLanguage = (lang) => {
// 我们可以使用这个函数来更换语言
import(`../i18n/${lang}.json`)
.then(definition => this.setState({ definition }));
};
render({ }, { definition }) {
return (
<IntlProvider definition={definition}>
<div id=\"app\" />
</IntlProvider>
);
}
}


根据以上的例子，我们可以使用这函数:this.changeLanguage(\"zh-TW\") 来导入definition文件并更改网页的语言。

谁在使用preact-i18n？
我自己的业余项目: Remote for Slides，正在使用着preact-i18n。

Remote for Slides是一个渐进式网络应用程序(PWA) + Chrome 扩充器。这能让用户在任何设备上，远程遥控Google简报。是时候跟昂贵的翻页笔说再见了。

Remote for Slides 渐进式网络应用程序支持多达8个语言，包括了英文、繁体中文、简体中文、加泰罗尼亚文、西班牙文、 法文、波兰文、以及Euskera。

在这个项目中，我也使用了我在刚才提到的 \"动态导入definition文件\" 的方法。这可以避免应用程序导入一些没使用到的definition文件。这将会提升应用程序性能。

除此之外，Remote for Slides 渐进式网络应用程序也将会自动地设置语言。这应用程序将会根据游览器的语言(navigator.language)、或者是根据URL中的parameter (ie: s.limhenry.xyz/?hl=zh-tw)来更改语言。 当然，用户也可以从设置中更改语言。
 

  view all

$ npm install -g preact-cli

$ preact create default my-project

$ cd my-project && npm run start

$ npm install --save preact-i18n

{ 

  \"home\": {

    \"title\": \"主页\", 

    \"text\": \"这是个Home组件。\"

  }

}

import { IntlProvider } from \'preact-i18n\';

import definition from \'../i18n/zh-tw.json\';

render() {

  return(

    <IntlProvider definition={definition}>

      <div id=\"app\" />

    </IntlProvider>

  );

}

import { h, Component } from \'preact\';

import { Router } from \'preact-router\';

import Header from \'./header\';

import Home from \'../routes/home\';

import Profile from \'../routes/profile\';

// 导入 IntlProvider 及 definition 文件。

import { IntlProvider } from \'preact-i18n\';

import definition from \'../i18n/zh-tw.json\';

export default class App extends Component {



 handleRoute = e => {

  this.currentUrl = e.url;

 };

render() {

  return (

   // 把 <IntlProvider> 放在项目中最高层级的组件

   <IntlProvider definition={definition}>

    <div id=\"app\">

     <Header />

     <Router onChange={this.handleRoute}>

      <Home path=\"/\" />

      <Profile path=\"/profile/\" user=\"me\" />

      <Profile path=\"/profile/:user\" />

     </Router>

    </div>

   </IntlProvider>

  );

 }

}

import { Text } from \'preact-i18n\';

const Home = () => ( 

  <div> 

    <h1> 

      <Text id=\"home.title\">Home</Text> 

    </h1> 

    <p> 

      <Text id=\"home.text\">This is the Home component.</Text> 

    </p> 

  </div> 

); 

export default Home;

<Text id=\"unknown.definition\">This is a fallback text.</Text>

{ 

  \"first_name\": \"名\",

  \"last_name\": \"姓\",

  \"link\": \"这是个<a href=\'https://www.google.com\'>连结</a>\"

}

import { Text, Localizer, MarkupText } from \'preact-i18n\';

const Home = () => ( 

  <div> 

    <Localizer> 

      <input placeholder={<Text id=\"first_name\" />} /> 

    </Localizer> 

    <Localizer> 

      <input placeholder={<Text id=\"last_name\" />} /> 

    </Localizer> 

    <MarkupText id=\"link\"> 

      This is a <a href=\"https://www.google.com\">link</a>

    </MarkupText>

  </div>

);

export default Home;

import { Text } from \'preact-i18n\'; 

const Home = () => ( 

  <div>

    <h2> 

      <Text id=\"page\" fields={{ count: 5, total: 10 }}>

         5 / 10 Pages

      </Text> 

    </h2> 

  </div> 

); 

export default Home;

{

  \"apple\": { 

    \"singular\": \"Henry has {{count}} apple.\", 

    \"plural\":\"Henry has {{count}} apples.\" 

  }

}

import { Text } from \'preact-i18n\'; 

const Home = () => ( 

  <div> 

    <p> 

      <Text id=\"apple\" plural={1} fields={{ count: 1 }} /> 

    </p> 

    <p> 

      <Text id=\"apple\" plural={100} fields={{ count: 100 }} /> 

    </p> 

  </div> 

); 

export default Home;

import { Component } from \'preact\'; 

import { IntlProvider } from \'preact-i18n\'; 

import defaultDefinition from \'../i18n/zh-tw.json\'; 

export default class App extends Component { 

  state = { 

    definition: defaultDefinition 

  } 

  changeLanguage = (lang) => { 

    // 我们可以使用这个函数来更换语言

    import(`../i18n/${lang}.json`) 

      .then(definition => this.setState({ definition })); 

  }; 

  render({ }, { definition }) { 

    return ( 

      <IntlProvider definition={definition}> 

        <div id=\"app\" /> 

      </IntlProvider> 

    ); 

  } 

}

大家好，奥克兰网站建设公司local fern的developer Kevin～，做设计一定会用到字体，我们在用ps、sketch做网站、手机端、iPad端设计的时候，经常会选择不同的字体来看设计稿的呈现效果。

今天推荐的这个网站，可以一键查看不同的字体组合在不同的网站主题模板上的外观，让我们更直观的看到网站、手机端、iPad端显示的字体效果。

FontPairings.ByPeople
网站地址：https://fontpairings.bypeople.com



打开网站加载完字体资源以后，我们点击一下进入网站，可以看到左侧就是操作区，最直观的是可以直接选择提供的字体，然后右侧会显示出不同的字体效果。



左侧最顶部有一个选择网站主题模板的入口，我们可以不同的网站模板风格来搭配不同的字体，效果还不错噢。



网站模板的下面可以选择不同的设备，这里提供了手机、iPad、电脑端，可以选择不同的设备查看对应的效果，同时也提供了设置大标题的字体大小以及正文中的文字大小。



设备的下面我们可以选择大标题的字体样式和正文中的字体样式，提供的字体样式都是英文字体，种类也非常多。



如果你觉得哪个字体很不错，可以直接点击左侧底部的Download Fonts即可免费下载对应的字体资源，非常方便。



如果选好了网站模板、字体样式想全屏预览一下网站的效果，点击一下顶部的叉号图标即可全屏查看设置的效果。



最后

今天的内容就是这些，下期再见 view all

大家好，我是新西兰网站开发公司Local Fern的I设计师Novah～今天是我来给大家分享内容，今天给大家推荐一个聚集了很多小工具的网站Beautiful Dingbats，网站上有背景图案生成器、花式字体生成器、日历生成器、小故障文本生成器、表情符号等等。

今天重点介绍一下背景图案生成器，以前文章推荐过好的背景可以让你的设计更出彩，这里推荐了几个背景素材，感兴趣的也可以去码力全开资源站查看背景素材分类，这里收录了16个背景素材网站。

Beautiful Dingbats

网址：https://beautifuldingbats.com

打开网站，可以看到一个背景图案生成器，用它可以创建独特、漂亮的免版权背景图案，可以导出SVG、JPEG、PNG格式。

接着下面是Unicode工具，这里面包含了花式字体生成器、日历生成器、小故障文本生成器、删除线生成器等等。

这里还提供了Emojis表情相关的符号，有很多不同的类型符号，比如雪花、星星等等，可以直接复制这些符号。

接下来重点看一下背景图案生成器，点进去背景图案生成器，可以看到提供了一些随机的图案例子，点击右侧会生成不同的图案。

选择好一个图案，点击开始使用按钮即可进入编辑图案的界面，这里提供了图案相关的一些条纹可以选择。

这里提供了很多参数可以调整图案，比如改变图案上的形状大小，从0到20自定义调整。

图案上的拼贴比例从5到100也可以调整，以及图案的旋转方向从0到360，还有图案的颜色可以自定义色值。

另外，还可以自定义图案的辅助颜色以及图案的背景颜色，同时颜色还可以左右切换不同的类型，比如Material Design类型的色值。

最后调整好一个满意的背景图案，可以复制链接进行分享，也可以将图案导出SVG、JPEG或PNG格式，同时导出的图案还可以自定义尺寸。

最后

今天的内容就是这些 view all

大家好，我是新西兰网站开发公司local Fern的插画师Isabella～今天给大家推荐一个免费开源的表情符号大全OpenMoji，OpenMoji是面向设计师、开发人员和其他所有人的开源表情符号，到目前为止，已经设计了超过3000种不同类别的表情符号，提供了彩色和单色的SVG、PNG格式。


OpenMoji
网址：https://openmoji.org

打开网站，可以看到众多面向设计师、开发人员、其他所有人的开源表情符号，这里还提供了搜索框方便你直接搜索想要的表情。





OpenMoji是一个开源项目，由57名学生和3名教授以及10位外部贡献者组成，目前为止已经设计了超过3000种不同类别的表情符号，可免费使用。



点击导航栏的Library即可进入到所有表情符号的分类，这里提供了10个分类，而且表情符号的质量很高。



另外，可以点击分类右侧的开关按钮即可去掉彩色变身为黑色表情符号，同时也可以按字母和日期进行筛选排序。



每个分类除了提供很多类型的表情符号外，这里还提供了两个扩展的OpenMoji，任意点击一个就可以看到不同类型的彩色图标，很精致。



选择一个满意的表情符号，直接点击就会弹框显示现在的入口，这里提供了SVG、PNG格式，同时还可以切换彩色和黑色表情符号。



这里还可以加入他们一起设计新的表情符号，提供了轮廓、颜色、版式、表情符号设计的一些指南等等。



最后可以点击导航栏的样品入口，这里提供了一些已经完成的作品。



最后
今天的内容就是这些，如果你喜欢我们的作品，又准备找奥克兰当地的网站开发公司，请给我们在线的开发者Kevin留言，他会给大家解决问题的。 view all

 
 
大家好，我是新西兰网站开发公司的插画师Isabella～今天由我给大家分享一个插画素材，这个插画素材风格多样、质量超高，网站上提供了80个免费的插画，可以免费用于个人和商业项目中。



Streamline Free Illustrations
网址：https://lab.streamlineicons.com/



打开网站，大标题就是免费下载80个插画，你可以将它们用于任何商业或个人项目，而且他们还在开发新的插画样式。



接下来就是手绘风格的插画，这里提供了10个彩色的插画素材，每个插画都有各自的使用场景，比如：评分、登录、在线学习、搜索等等。



下面这个同样是手绘风格的插画，它是黑白风格的插画素材，这里的插画有社交媒体、出行、虚拟现实、阅读、开会等等。



接着是平面风格的插画，这个风格的插画配色比较丰富，多数呈线性，有网上购物、订单交付、团队合作、下载等插画素材。



下面这个同样是平面风格的插画，它的插画风格多数呈面性，有唱歌、画画、评分、玩游戏等插画素材。



然后是几何风格的插画，我最喜欢这个系列的插画，它有搜索、欢迎、设计、发送消息等插画素材。



最后这三组都是平面风格的插画，每组的风格都不太一样，但是质量都很高。





PS：如果您想找我们的程序员开发网站，请直接给我们的在线coder Kevein留言。

最后
今天的内容就是这些。
  view all

大家好，我是新西兰网站设计公司Local Fern的设计师Kevin～2020年4月份分享了不少有用的神器，今天汇总整理一下4月份比较热门的效率利器，希望这些工具能够提升你的工作效率。


RemoveBg
网址：https://www.remove.bg/zh



消除图片中的背景网站removebg，它是我见过最强大的线上去背景网站，快速AI自动抠图，以训练好的模型快速分辨照片前景和背景，将主体分离后成为透明背景，对于我这种经常要做设计的业余设计师太有用了。

Neumorphism.io
网址：https://neumorphism.io



新拟物化风格的Neumorphism.io效果非常不错，Neumorphism可以简单轻松地实现新拟态效果，可以任意更改颜色，形状可以在圆形、圆角矩形和方形之间切换，形状与背景的距离、阴影的强度和模糊效果等也可随意更改。

MokupFrames
网址：https://www.mokupframes.com



高逼格样机工具MokupFrames，它是一款可以快速制作样机的客户端工具，支持Windows/Mac，只需要上传准备好的图片或视频即可在不同的设备上生成渲染后的高逼格作品，提供的设备类型有iPhone、Android、PC&Web，真是相当好用

Unscreen
网址：https://www.unscreen.com



一个在线免费扣视频背景的神器Unscreen，支持mp4、gif、mov、.webm、.ogg格式，上传视频自动去除背景保留主体，使用后效果不错，感兴趣的可以来试试。

Upscale Pics
网址：https://upscalepics.com



无损放大的工具Upscale Pics，它可以免费将您的图像放大2倍至8倍，使用AI算法来解决像素化问题，从而提高分辨率使模糊图片变得更清晰，无损放大的工具码力全开资源站收录了5个，我使用最多的是bigjpg。

Algorithmia
网址：https://demos.algorithmia.com/colorize-photos



一个使用AI技术给黑白照片上色的网站Algorithmia，只需要贴图片链接或直接上传本地照片即可自动对旧照片进行着色，使旧照片焕然一新，关键是Algorithmia还提供了可扩展的API供开发人员使用。

Pixeltrue
网址：https://www.pixeltrue.com/free-illustrations



一个免费的矢量插画和Lottie动画插画素材，可免费用在个人和商业项目中，插画素材种类比较多有彩色和单色两种类型，打包好的所有插画和Lottie动画插画素材在文章详情里。



Letters
网址：https://apps.apple.com/cn/app/ ... %3D12



一个Mac上的文字特效软件Letters，有很多免费的字体特效模板，通过修改软提供的模板，可以快速做出各种炫酷的文字效果。

IconFinder
网址：https://www.iconfinder.com/p/c ... icons



一套由IconFinder提供的300+新冠疫情主题图标，这些图标完全开源且免费可商用，图标风格多样，有黑白线条、彩色扁平、插画风，提供了矢量SVG和PNG格式。

SleekBundle
网址：https://sleekbundle.com



一个免费可商用的矢量插画素材SleekBundle，它提供了很多高质量的插画，网站上的插画有348个、2个套件、5个插图集，插画提供了EPS、PNG、SVG、AI、Sketch、Figma格式，可免费使用无需标注出处。

PS：在线发邮件给我们的客服，即可购买我们的相应作品。

Animockup
网址：https://animockup.com



一个在浏览器中快速创建动画样机模型并导出视频或动画GIF的工具 ➝ Animockup，它是一款GitHub上的开源项目，作者是来自美国旧金山的一位前端工程师。

流程图和图表制作工具
网址：https://www.maliquankai.com/20 ... mind/



超全的在线流程图和图表制作工具，推荐几个新发现的流程图和图表制作工具都已更新到资源库，Creately - 在线图表制作协作平台，Miro - 在线协作式的白板平台，VisualSitemaps - 在几秒钟内自动生成可视站点地图，FlowMapp - 可视站点和用户流程的在线工具，Lucidchart..等。

头像素材库
网址：https://www.maliquankai.com/20 ... urce/



文章内涵盖了以前推荐过的头像素材，最近新发现了几个头像素材库，分别是Bottts - 机器人头像库，Avatar-Library - 免费的头像插画，Generated Photos - AI生成的头像库。



最后，如果奥克兰当地的商家找我们设计网站，请直接给我们的客服留言。

  view all

关于我

刚入坑移动端开发的时候，大部分精力都放在了App功能的技术实现度上，对App相关的设计其实没有过多的关注，因为首先你必须实现了功能，才有精力去研究设计、打磨细节。

高中的时候学过一段时间美术，传统的美术老三样素描、速写、水粉，有一些绘画基础，大学并不是设计相关专业，但选修课学习了一些和设计相关的软件，比如：3DMax、CAD、Dreamweaver、Flash。大学期间报了一个班，学习了PS、CorelDRAW，拿了一个平面设计师资格证，然而这个证并没有什么卵用。

时隔这么多年，那些曾经学过的技能也早已忘的一干二净，从去年开始才慢慢的重新拾起来。

关于设计这块，因为我并不是专业的设计师，有些想法可能比较粗浅，这里只是简单的提供一个学习建议，不好的地方还欢迎大家指正。

美术基础
设计师最好有一定的绘画功底，因为它最能直接的表达出你大脑的想法，自我头脑风暴输出、与他人进行设计沟通，这些都是绘画能给你带来的，当你无法通过你的手来表现出你想法的时候，你会非常痛苦。



其实画画真的没你想象的那么难，很多艺考美术生考试前集训3-4个月也能考上一个艺术院校，所以，建议每天抽出那么一点时间去做绘画功底的积累，不仅有助于你的设计，更能提高审美，一举两得的事何乐而不为。在这里推荐一本我也在跟着画过的一本书《30天学会绘画》，这本书适合没有美术基础的小伙伴，为了练习入手了一个数位板，刚开始特别不习惯，配合PS电脑上比较难控制。现在很多画画的内容都在一个手绘本上完成，不依赖电脑，更能随心所欲利用碎片时间来练习，初学者建议先在本子上绘画。



学习绘画的目的是通过动手实践去锻炼我们的思考能力，刚开始画的不好没关系，重点是带着思考去不断的练习，每一次实践都应该让你感受到自己对物体深层次的理解。



绘画不仅可以帮助你建立原型设计草图的能力，更能增进你界面的排版和配色能力。

当然很多并没有很强的绘画能力，却也是远近闻名的设计大师，比如：山本耀司、可可·加布里埃·夏奈尔，我想说的是绘画仅是一种设计思考表现手段和工具，要看什么设计，对绘画依赖比较严重。



关于软件
提到设计相关的软件，最基础的还是PS，不是有句话，学好PS走遍天下都不怕，可见它的强大之处，哈哈~，说到PS那你一定知道Sketch，扁平化设计的流行和屏幕分辨率的提升推动了Sketch这款软件的流行，它可以帮你快速完成移动端界面的设计工作，除此之外还可以熟悉一下AI，AI可以更方便快捷的绘制矢量图形，配合PS使用很棒。熟练掌握PS、AI之后,可以再进阶学习AE、C4D等动效和3D制作工具，丰富我们的设计成果。



理论基础
设计中的理论基础包括：字体、色彩、排版等很多方面，需要我们自己去多看多学多研究，推荐两本烂大街的书《写给大家看的设计书》、《文字设计的原理》。除此之外还有很多设计师聚集的网站，比如：Dribbble、Behance、优设网、站酷网、UI中国等等。



说了这么多，自认为设计师除了要多练习，更要勤看书，好的设计师应该大部分都是书虫吧。

最后
推荐一篇干货满满的临摹文章以及我收集的一些设计相关的网站和工具

关于临摹的四个阶段

设计/摄影/图站
创造狮导航
Dribbble
Behance
站酷
设计师网址
牛大拿
UI中国
字由
MyFont
千库网
摄图网
图虫网
图片压缩
包图网
花瓣
UIgradients
优优教程网
阿里巴巴图标库
EASYICON图标库
Noun图标库
TOICON图标库
WORLDVECTOR
FreeDownloads
ICONFINDER
ICONS8
UEDC
网易用户体验中心
阿里巴巴UED
阿里巴巴中国站
淘宝前端FED
腾讯CDC
新浪UED
百度UXC
原型工具

墨刀
Axure
Sketch
Mockplus
XIAOPIN

最后
 
按照我们老板的给我派发的kpi，如果你准备开发一个ios 的app，请到我们的在线商店直接购买，我们公司支持kiwikiwifly这个平台的担保交易。 view all