'Design' 分类

来自大自然中的另一种美 - 干柴

自然主义服饰网站设计

自然主义服饰网站设计

自然造物,它创造了所有。没有人能够真正的了解自然的神奇之处。除了叹服和膜拜之外,我们能从它身上找到无数的灵感。只要是自然所创造的事物,到处都散发着不可挑剔的美。它有我们取之不尽的源泉,是我们的灵魂所在。

干枯的树木似乎散发着大自然中哪种不被大众所注意的另类之美。一棵树从生长到死亡,经历了春夏秋冬四个季节,每一个季节都有对应着一种风姿,最起码人们可以从树叶,树干或树皮中分辨出来这种变化。然后到完全枯萎变成干柴,最后的最后变成人类的一把火,灰飞烟灭,或腐烂风化又回到大自然的母体中去。

它的一生都有着各种利用或使用价值。在吸收日月精华后,干枯树木似乎有着一种既朴实但又高雅和干净的永恒之美,它的颜色非常有力量,质朴和高雅。当然,还有大自然的那种神秘感。

如果人类的服饰设计能够从干枯树木中获得灵感和提取颜色的话,这种自然主义风格想必会给人们带来非常朴实和亲切的美感。

所以,就有了我这个以干枯树木作为灵感来源的自然主义风格服饰的品牌网站设计。

全部设计的页面在这里查看 https://www.behance.net/gallery/34898963/Naturalism-Fashion-website

设计与艺术

艺术必须来自于 “自我”,缺乏个性的东西怎么会称得上为艺术呢?而设计,则必须是和生活有关。

设计的最根本目的就是为了服务生活,为了让生活更加有滋有味。设计就是将美学通过视觉传达加上实用性与易用性来生产出最终物品的过程。没有实用性与易用性的设计不叫设计,或者是不好的设计。只有美学或者完全自我而忽略实用性与易用性的设计该叫做艺术。

设计是因为人类对生活需求与品质追求而出现的。所以设计中的美学,实用性,易用性这三大要素无论是在那一个设计领域,都必须得满足的基础。既然要设计,我们是希望在这三者之间达到一种平衡。要达到美的层次则必须要有个性,这个个性就是大家所说的 “风格”。当一个设计品没有什么使用价值或者使用起来不方便的话,那我们需要这样的设计品来干嘛用呢?看来只能当做艺术品来展示了。

平面设计 Graphic Design

平面设计应该叫做视觉传达,它通过利用色彩,图案,文字三者的组合将内容信息通过视觉传达出来。所以平面设计必须建立在内容的基础上,它为内容信息服务,并将它们抽象出来。既然是视觉的传达,那么,一个平面设计作品首先它的可识别性(可读性)是应该排在首位的。

用户界面设计 UI Design

用户界面设计要比平面设计复杂的多,网页设计 [WEB Design] 或APP设计 [APP UI] 也属于用户界面设计范畴。更何况还得有用户体验设计 [UX Design] 在它们的前面。这种面向硬件产品与软件产品来进行的交互设计。要面对着硬件产品的不同屏幕大小,分辨率不同。既要解决兼容性,还得考虑跨平台,自适应;既要达到美学标准,还要考虑性能问题。而内容的可识别性则是它的第一准则。

别忘了,还有程序的设计,既要功能,又要前端与后端用简洁的代码来实现性能优化 ~ 总的来讲,符合人的操作体验。

好的设计就是去除所有多余的东西后,剩下的,如果去掉任何一个元素都不行。

靠自己来获得一枚Dribbble的邀请码

Dribbble 可以说是目前最高端的设计者社区,就称它为设计者的天堂吧。然而不是注册了帐号或者买了Pro就能上传自己的作品,为了保证社区作品的内容质量,采用的邀请机制。

Dribbble的邀请码(Dribbble invite)可不是能随便获得的,然而有个方法就是靠自己的作品质量来获得邀请码。那就是在 Draft.im 这里提交自己的作品。获得通过的话,你就可以获得Dribbble的邀请码了。

当然,还得靠点运气!

Bootstrap 4 要来了 开始使用rem单位

Bootstrap 4 要来了,虽然还未发布正式版,目前已经放出了 Bootstrap 4 alpha 。

Bootstrap 4 给大家带来了不少惊喜,我觉得非常重要的就是 Bootstrap 4 开始支持 rem 和 em 并替换掉原先使用的 px 作为单位。这样一来就真正地实现了页面以及所包含的元素在不同屏幕下按比例缩放。rem 是按根元素的比例来缩放,最为 CSS3 才引入新单位比 em 更高级,em 是根据来按比例缩放。

同时 Bootstrap 4 开始却底放弃对 IE8(老比家都放弃自家的💩产品了,你为啥还不放弃) 的支持,大家请鼓掌!IE8 本身就无法支持 rem ,如果你还想支持IE 这堆垃圾,那解决办法就是在使用rem的同时,也加上px。我这段时间真正写 Blog 的 Theme ,作为对研究的实践和试验 在 Bootstrap 3 中使用rem,最终的结果是:我只好放弃。

Bootstrap 4 还有新增的 grid,以及非常漂亮的官方 Bootstrap 主题样例(要购买的)等等。

自适应设计中的媒体查询知识

min-width // 当任意浏览器宽度大于查询中定义的值时适用的规则。

max-width // 当任意浏览器宽度小于查询中定义的值时适用的规则。

min-height // 当任意浏览器高度大于查询中定义的值时适用的规则。

max-height // 当任意浏览器高度小于查询中定义的值时适用的规则。

orientation=portrait // 高度大于或等于宽度的任意浏览器适用的规则。

orientation=landscape // 宽度大于高度的任意浏览器适用的规则。

例如:

@media (max-width: 640px) {} // 浏览器宽度介于 0 像素和 640 像素之间

@media (min-width: 500px) and (max-width: 600px) {} // 浏览器宽度介于 500 像素和 600 像素之间

@media (mix-width: 640px) {} // 浏览器宽度为 640 像素或大于此值

@media (min-width:481px) and (max-width:767px) { }

@media (max-width:480px) { }

@media (max-width:767px) { }

@media (max-width:1224px) { }

@media (min-width:768px) and (max-width:1199px) { }

@media (min-width:1900px) { }

@media (min-width:1200px) { }

@media (min-width:768px) and (max-width:1199px) and (-webkit-min-device-pixel-ratio:1.5),(min–moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-device-pixel-ratio:1.5) { }

@media (min-width:768px) and (max-width:1199px) and (-webkit-min-device-pixel-ratio:1.5),(min–moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-device-pixel-ratio:1.5) { }

@media (max-width:480px) and (-webkit-min-device-pixel-ratio:1.5),(min–moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-device-pixel-ratio:1.5) { }

@media (max-width:767px) and (-webkit-min-device-pixel-ratio:1.5),(min–moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-device-pixel-ratio:1.5) { }

@media (max-width:727px) { }

@media (min-width:1500px) { }

@media (min-width:768px) and (max-width:1199px) { }

@media (min-width:768px) and (max-width:1095px),(max-width:767px) { }

@media (min-width:768px) and (max-width:1095px) { }

@media (min-width:481px) and (max-width:767px) { }

@media only screen and (max-width:985px) { }

@media (max-width:985px) {}

@media (min-width:1900px) {}

参考知识:

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=zh-cn

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

http://stackoverflow.com/questions/13550541/media-min-width-max-width

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Update :2016.10.21

http://ryanve.com/lab/@media/

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

http://docs.themeisle.com/article/344-modify-theme-in-different-screen-sizes-media-queries

https://bjango.com/articles/min-device-pixel-ratio/ (DPI、Dppx…设备检测)

一直没有进步的Web中文字体

不知道大家有没有觉得,在网络中应用的中文字体似乎已有N年长了,也没有迎来什么新变化,更谈不上有什么创新。特别是在网页设计中,中文字体能用的也是少得可怜,要么微软雅黑要么只能是宋体。

Web中文字体需要革新的事情早已经没有人去在意了,特别是那些有能力的大网络公司都只顾去赚钱了(曾经那些什么要给互联网带来革新的醒目言论早已经沦没在公司市值,股票,股东,分红的美好声音中吧),剩下的造字工厂们可能有心无力了,可能字体设计也不怎么赚钱,生活还得继续啊!

在我看来,现在的网页设计中能用的中文字体真的没有一款我是觉得满意的,其实网页设计的字体应用技术也是一直没有进步啊。一般情况下如果访客所用的电脑没有网站上所用的字体话,那么网站就会使用该电脑系统中其它存在的字体,这样一来网页精心设计的字体就白白浪费了,用户也没法看到我们精心所设计的实际页面效果。对于网页结定使用何种字体这是在页面设计时已经定好的,字体是整个页面的灵魂,它是最底层的审美。我站在你面前你却看不到啊。

虽然CSS的@font-face 可以解决上面这个问题了,但是现在看来这也还没有推动着网页字体应用的进步。因为@font-face也并不怎么好用,用起来还是不简便吧。

此外,谷歌的在线字体库是个靠谱的项目,但是你知道的,China已经把谷歌所有的服务都给封了,这逼着大家必须100%地放弃使用它。否则,带来的结果就是网站加载速度超慢,作为站长的满是泪痕啊。帝国的这一举动还影响了我们访问国外网站的速度,国外的站点现在基本都在用谷歌的字体服务…..所以Fxxk。

响应式前端框架 Google Web Starter Kit

说到响应式的前端空间Bootstrap肯定会是大家的首选。不知道大家有没有发现在自从谷歌推出设计指南后,其自家的各个网站视乎都陆续改版为响应式的。而且风格确实够简洁的。

Google Starter Kit 是谷歌推出的用于创建适应于多设备网站的入门套件,推出后developers.google.com上的许多文档都还是英文的。(哎,其实那么多的好内容都没提供中文呢,翻译又那么难吗对于Google)。现在Starter Kit教程已经有中文版《你的首个多设备站点》《从 Web 新手开发包开始你的站点》

Mozilla的X-LocaleSpecific字体

突然发现www.mozilla.org/zh-CN 页面里的中文字体非常漂亮,从未见过的。这引起了我的极大兴趣。对于现在所有中文网页中,没有一种我觉得是非常棒的,当然,Apple的MyriadPro算是最好的了。www.mozilla.org/zh-CN上这套中文字体视乎带来了希望。

查看代码发现是
font-family: 'Open Sans Light',X-LocaleSpecific-Light,'Open Sans',X-LocaleSpecific,sans-serif;

X-LocaleSpecific 才是亮点。于是,网上大翻了一篇,找不到什么鸟信息啊。这到底是啥字体啊??

因为X-LocaleSpecific 找到了Mozilla的Bedrock这个项目。没有任何关于Bedrock这个项目中文信息,英文信息也很少,信息量太少啦。本以为可以在Bedrock里找到点和X-LocaleSpecific有关的东西,暂时还没戏。