寡人的吐槽胜地: UI设计

显示标签为“UI设计”的博文。显示所有博文

Home » Posts filed under UI设计

2017年4月17日星期一

APP规范实例(详细的UI设计方法）

这一套UI设计规范，包含了界面布局、颜色、文字规范、按钮规范、图标规范、图片规范、列表规范、控件规范、弹出浮层，超级详细。

大家可以借鉴下，学会自己设计一套APP设计规范，成为高级设计师。但是不要生搬硬套，毕竟不是一个产品，总之可参考的价值很高。大家自己吸收吧!

规范 / 设计 / 设计规范 / aha，转载 / APP设计 / APP设计规范 / UI / UI设计

No Comments

2016年11月29日星期二

200+值得收藏的设计师资源站

01:05 寡人的吐槽胜地

众所周知，玩儿设计素材很重要。绝大多数的设计作品的背后都有着多种多样素材作为支撑，图片、字体、图标等素材是设计作品中直观可见的组成部分

图片素材

免费资源

Unsplash — www.unsplash.com

Picjumbo — www.picjumbo.com

Gratisography — www.gratisography.com

Superfamous — www.superfamous.com

Little Visuals — www.littlevisuals.co

Split Shire — www.splitshire.com

Pixabay — www.pixabay.com

I’m Free — www.imcreator.com/free

New Old Stock — www.nos.twnsnd.co

Function Free Photos — http://wefunction.com/category/free-photos/

Paul Jarvis Free Photos — http://pjrvs.com/a/photos

Zoomy Images — http://zoomyimages.com/

Dollar Photo Club — http://www.dollarphotoclub.com

Compfight — www.compfight.com

Stocksy — www.stocksy.com

Placeit Product Shots — www.placeit.net

iStockphoto — http://istockphoto.com

offset — http://www.offset.com

Corbis — http://www.corbisimages.com

Facebox — http://facebox.io

排版设计

Okay Type — www.okaytype.com

Typekit — www.typekit.com

My Fonts — www.myfonts.com

Fonts — www.fonts.com

Font Squirrel — www.fontsquirrel.com

Da Font — www.dafont.com

Google Fonts — www.google.com/fonts

1001 Free Fonts — www.1001freefonts.com

Lost Type Co-op — www.losttype.com

Ico Moon — www.icomoon.io

Font-To-Width — http://font-to-width.com/

视觉稿设计工具

InVision — www.invisionapp.com

Mockupr — www.mockupr.com

Flinto — www.flinto.com

Flinto Icon Strike! — www.flinto.com/strike

Webflow — www.webflow.com

Mockuuups — www.mockuuups.com

Red Pen — https://redpen.io

PSD Covers — http://www.psdcovers.com/

HTML 5

HTML5 Please — www.html5please.com

Can I Use? — www.caniuse.com

JavaScript/jQuery

Unheap — http://www.unheap.com

Touchy Js — http://touchyjs.org/

FitText — http://fittextjs.com

Touche.js — http://benhowdle.im/touche/

Cortado.js — http://benhowdle.im/cortado/

FlickFeed — http://benhowdle.im/flickfeed/

Heisenburg.js — http://heisenbergjs.github.io/heisenberg/

Pickadate.js — http://amsul.ca/pickadate.js/

Lettering.js — http://letteringjs.com/

Freetile — http://yconst.com/web/freetile/

Backstretch — http://srobbin.com/jquery-plugins/backstretch/

Hook — http://usehook.com

Echo JS — http://www.echojs.com/

Up to date — http://uptodate.frontendrescue.org/

JS Fiddle — http://jsfiddle.net/

免费PS素材

PSDS.co — www.psds.co

Fribbble — www.fribbble.com

Premium Pixels — www.premiumpixels.com

Teehan+Lax iOS 7 Gui PSD (iPhone)— www.teehanlax.com/tools/iphone

Teehan+Lax iOS 7 Gui PSD (iPad) — www.teehanlax.com/tools/ipad/

iPhone Mockuuups — www.mockuuups.com

Freebiesbug — http://freebiesbug.com/

Marvel — https://marvelapp.com/resources/

Ui Space — http://uispace.net

DB Freebies — http://dbfreebies.co

365 PSD — http://365psd.com/

Pixel Buddha — http://pixelbuddha.net/

Pixels Daily — http://pixelsdaily.com/

图标设计

Other Icons — www.othericons.com

Batch — www.adamwhitcroft.com/batch/

Icon Sweets — www.iconsweets.com

Ico Moon — www.icomoon.io

Flat Icon — http://www.flaticon.com

The Noun Project — http://thenounproject.com

Perfect Icons — http://perfecticons.com/

Iconfinder — www.iconfinder.com

压缩图片

Tiny Png — www.tinypng.com

JPEGmini — www.jpegmini.com

ImageOptim — www.imageoptim.com

PS工具和插件

Mac Rabbit Slicy — www.macrabbit.com/slicy/

Renamy — www.renamy.com

Blendme.in — www.blendme.in

Freeagent — www.freeagent.com

Freshbooks — www.freshbooks.com

Xero — http://www.xero.com/

Crunch — http://www.crunch.co.uk

Slimvoice — http://slimvoice.co/

Ballpark — http://www.getballpark.com

法律

Andrew Clarke’s Contract Killer — www.stuffandnonsense.co.uk/projects/contract-killer/

Proper App — www.properapp.com

iubenda — www.iubenda.com

Docracy — http://www.docracy.com/

灵感

Siteinspire — www.siteinspire.com

Land Book — www.land-book.com

Awwwards — www.awwwards.com

The Best Designs — www.thebestdesigns.com

Dribbble — www.dribbble.com

Behance — www.behance.com

Niice — http://niice.co

One Page Love — http://onepagelove.com/

托管

Propagated Yet? www.propagatedyet.com

Instant Domain Search — www.instantdomainsearch.com

Domainr — https://domai.nr/

工作平台

Crew — www.pickcrew.com

Juiiicy — www.juiiicy.com

Dribbble Jobs — www.dribbble.com/jobs

Authentic Jobs — www.authenticjobs.com

Workfu — www.workfu.com

Onsite — www.onsite.io

地图

Mapbox — www.mapbox.com

Leaflet — www.leafletjs.com

Google Map Builder — http://googlemapbuilder.mynameisdonald.com/

Snazzy maps — http://www.snazzymaps.com

在线学习平台

Treehouse — www.teamtreehouse.com

Steer — www.steer.me

Lynda — www.lynda.com

Codeacademy —www.codecademy.com

Code School — www.codeschool.com

Udacity — www.udacity.com

Code.org — http://code.org/

WebPlatform — http://www.webplatform.org/

播客

The Freelance Web — www.thefreelanceweb.com

Unfinished Business — www.unfinished.bz

Happy Monday — www.happymondaypodcast.com

Boagworld — www.boagworld.com/show/

Shop Talk Show — www.shoptalkshow.com

The Back to Front Show — www.backtofrontshow.com

The Big Web Show — www.zeldman.com/category/the-big-web-show/

Upfront Podcast — www.upfrontpodcast.com

The Industry — www.theindustry.cc/category/podcast/

Iterate — http://www.imore.com/iterate

设计社区

Designer News — https://news.layervault.com/

Designers Talk — http://www.designerstalk.com/forums/

Quora — https://www.quora.com/

Stack Exchange — http://stackexchange.com/sites

Reddit /Design — http://www.reddit.com/r/Design/

Reddit /Web Design — http://www.reddit.com/r/web_design

写作平台

Medium — www.medium.com

Svbtle — https://svbtle.com/

Ghost — https://ghost.org/

WordPress — www.wordpress.com / www.wordpress.org

Squarespace — http://squarespace.com

Roon — https://roon.io/

演讲

Speaking.io — www.speaking.io

Mark Boulton’s Tips — www.markboulton.co.uk/journal/speakingtips

On Speaking by Brad Frost — www.bradfrostweb.com/blog/post/on-speaking/

Public speaking for the (formerly) terrified by Rachel Andrew — www.rachelandrew.co.uk/archives/2012/05/02/public-speaking-for-the-formerly-terrified/

10 Kick ass presentation techniques (Treehouse) — http://blog.teamtreehouse.com/10-kick-ass-presentation-techniques

Suggestions for Speakers by Frank Chimero — http://frankchimero.com/blog/suggestions-for-speakers/

The best advice on public speaking by Ladies in Tech — http://ladiesintech.com/the-best-advice-on-public-speaking/

You’re paying to speak by Remy Sharp — http://remysharp.com/2014/03/07/youre-paying-to-speak/

支付

Stripe — www.stripe.com

GoCardless — www.gocardless.com

Plasso — https://plasso.co

便捷工具

Copy Paste Character — www.copypastecharacter.com

JustDelete.me — www.justdelete.me

What’s my UDID? — www.whatsmyudid.com

Shapecatcher — www.shapecatcher.com

UI Names — http://uinames.com/

UI Faces — http://uifaces.com/

UI Blurbs — http://uiblurbs.com

Density Converter — http://density.brdrck.me

LayerVault — https://layervault.com

Nice Entity — http://nice-entity.com

PlaceIMG — http://placeimg.com/

lorempixel — http://lorempixel.com/

Facebox — http://facebox.io

图书

Grid Systems in Graphic Design — http://amzn.to/1aNQC8B

HTML & CSS: Design and Build Web Sites — http://amzn.to/1biuvJi

How to be a Graphic Designer, Without Losing Your Soul — http://amzn.to/1eooTjo

The Shape of Design — http://www.buyolympia.com/q/Item=frank-chimero-the-shape-of-design

A Practical Guide to Designing for the Web — http://www.fivesimplesteps.com/products/a-practical-guide-to-designing-for-the-web

Hardboiled Web Design — https://shop.smashingmagazine.com/hardboiled-web-design.html

Designing for the web (Free) — http://designingfortheweb.co.uk/

Smashing Book #4 — https://shop.smashingmagazine.com/smashing-book-4-new-perspectives-on-web-design.html

The Geometry of Type — http://amzn.to/1ekRiSV

Insites: The Book — http://viewportindustries.com/insites-the-book

Don’t Make Me Think — http://amzn.to/1ekRul6

Above the Fold — http://amzn.to/1cLAIdv

Design is a Job — www.abookapart.com/products/design-is-a-job

Thinking with Type, Second Revised and Expanded Edition: A Critical Guide for Designers, Writers, Editors, and Students — http://amzn.to/1ixVKOc

The Visual Display of Quantitative Information — http://amzn.to/1n8vezb

参考资料 / 设计 / 资源 / aha，转载 / UI设计

No Comments

2016年6月23日星期四

如何知道手机屏幕的CSS像素宽度？

08:45 寡人的吐槽胜地

随着移动设备浏览量的迅速增长，自适应网页设计变得越来越重要。Web程序员在开发移动端页面时时常会遇到这样的问题，手机设备商声明的屏幕像素宽度尺寸和网页开发时使用的CSS像素宽度不一致，为什么会出现这种情况呢？

此像素非彼像素

设备像素(device pixel):

设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。

CSS像素(css pixel):

CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，设备像素(device pixel)是绝对单位。

比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

设备像素与CSS像素之间的换算是如何产生的呢？

这就需要要谈到每英寸像素(pixel per inch)和设备像素比(device pixel ratio)。

每英寸像素(pixel per inch)：

ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素

设备像素比(device pixel ratio)：

以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。

由上图可知，ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

美工和WEB前端开发人员之间如何协同：

一般美工按照设备像素(device pixel)为单位制作设计稿。前端工程序员，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。

网页设计 / CSS / UI设计

No Comments

2016年5月13日星期五

LNMP下Nginx如何设置域名301重定向

06:25 寡人的吐槽胜地

LNMP下的Nginx如果想将域名lnmp.org 301重定向到www.lnmp.org，同时www.lnmp.org已经通过/root/vhost.sh添加上，可以按如下步骤修改使用命令编辑器vi、nano或winscp图形管理软件编辑对应的虚拟主机，一般虚拟主机配置文件位于：/usr/local/nginx/conf/vhost/域名.conf ，如添加的域名是www.lnmp.org则配置文件是/usr/local/nginx/conf/vhost/www.lnmp.org.conf 在配置文件最后面加上如下代码：

例：

省略www.lnmp.org虚拟主机server配置
server {
listen 80;
server_name lnmp.org;
return 301 http://www.lnmp.org$request_uri;
}

如果是想让http强制跳转到https，把里面的http换成https就行。
例：

server {
listen 443 ssl;
server_name www.lnmp.org;
省略其他配置
}
server {
listen 80;
server_name www.lnmp.org;
return 301 https://www.lnmp.org$request_uri;
}

添加完成后保存，执行：/etc/init.d/nginx restart 重启nginx，使其生效

服务端 / https / nginx / ssl / UI设计

No Comments

在centos上搭建shadowsocks-libev服务端

06:22 寡人的吐槽胜地

shadowsocks是国人写的加密代理软件，效率及其的高。电信20m光纤，可以跑满

shadowsocks-libev是shadowsocks众多版本中的一种，它使用libuv + C 编写，500不到的代码，资源消耗非常小，再破的VPS都能跑得起来。相对于其他版本的shadowsocks，shadowsocks-libev不会出现掉进程或cpu 100%的问题。

之前部署shadowsocks的nodejs版本。出现了掉进程的情况，虽有解决方案，但是没有shadowsocks-libev稳定。

特贴上centos上的部署办法，十分的简单。

1，安装必须组件

yum install build-essential autoconf libtool openssl-devel gcc -y

显示Complete表示安装成功

2，安装git

yum install git -y

装完了执行 git –version ，如果出版本号则安装成功，如图。

3.下载shadowsocks-libev源码包并编译

git clone https://github.com/madeye/shadowsocks-libev.git

cd shadowsocks-libev

./configure

make && make install

4.运行shadowsocks

nohup /usr/local/bin/ss-server -s IP地址 -p 端口 -k 密码 -m 加密方式 &

比如：nohup /usr/local/bin/ss-server -s 156.132.67.213 -p 8981 -k admin888 -m aes-256-cfb &

5.加入开机启动

echo “nohup /usr/local/bin/ss-server -s IP地址 -p 端口 -k 密码 -m 加密方式 &” >> /etc/rc.local

服务端 / 服务器 / 膜法 / centos / UI设计

No Comments

2016年5月10日星期二

如果要学习web前端开发，需要学习什么？

08:54 寡人的吐槽胜地

遇到很多新手，都会问，如果要学习web前端开发，需要学习什么？难不难？多久能入门？怎么能快速建一个网站？工资能拿到多少？还有些让我推荐一些培训机构什么的要去学习。我建议是自学，实在是觉得自己没有这个能力，确实是需要一个老师的话，那你还是自己做主找个老师吧！为什么要自学呢，现在的老师水平都可以说是参差不平，运气好，你遇到个好老师，把毕生的经验和技巧都教给了你，运气不好，遇到个照本宣科的老师，那你的知识也会仅仅局限于教材！也许还有更糟糕的是，学到的书本知识两年前就已经开始有了大的变化，你并不知道关于更多的web设计这方面的知识。如果在这样的情况下，都还不如那些闭关自学的学生。

学习最好的老师就是兴趣，没有兴趣而言，这条路我相信你是走不长远的，除非你有其他比如说生活压力，工作压力等让你不得不这样坚持下去。我刚开始接触web网页设计的时候，教材都是以table来布局的，看到插入table生成了很多标签代码后，tr里面一个个td，理不清楚这个里面怎么回事。敷衍的学习了一个学期。还是没学到什么。真正学到的还是停留在怎么新建，怎么保存。

如果你还是在校学生，那你得好好上课，大学的教材普遍来讲都是知识面浅的。虽然很多知识看起来用处不大，学起来也很枯燥，让你觉得浪费时间。但这些书本上最基础的知识你都不能掌握，那你以后怎么追求更精湛的技术呢。所以不要逃课，把基础知识掌握了，别小看这个基础知识，它非常重要，基础扎实是否也会决定你在一个职业能走多远。

我是毕业了后从文员转到编辑再到技术员当然这期间工资就像是阶梯一样，虽然这差距也不是很大，都离不开那些曾经被我遗落角落的专业课本。生活上的压力迫使我这样做，我知道自己要什么，当一个文员没有追求，感觉过着30、40岁人的生活，接电话、发email、整理报表，每个月都有白领的工资...浪费的不仅仅是自己的青春，还有这大学几年昂贵的学费。后来就愈来愈想掌握一门技术，想去培训学校学习一段时间，但是现实是我没有钱，闭关一个星期，重拾课本，再看看那些讨厌的table，虽然out了，但是确实会发现很多基础再基础不过的东西，利用互联网，不明白的就百度，作为一个过来人，我觉得我自己走了不少弯路，所以，有必要提醒你们一下，一定要明确自己的目标，摆正自己的位置，最好掌握一门技术。

了解web前端

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代产物，那时网站的主要内容是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。说得直白点就是美工photoshop，交互设计，flash，js，html+css。就小规模公司而言，一个技术员都得会这几样技能，这样很锻炼人的，慢慢的你就会成为公司的主力。大规模的公司把这些分得很细，所以，你可以精通一门，熟悉其他的，进军大公司。

网页开发工具

学习web前端开发，网页开发工具有FrontPage，会用 Word 的人很容易学会FrontPage。还有一个常用的是Dreamweaver。这两种都是使用最多的HTML网页制作工具，我使用的是Dreamweaver cs6,因为这套软件提供了一套直观的可视界面，融合了html5一些新的内容。包括网格布局什么的。

学习内容

HTML、CSS和JavaScript。html是内容，css是表现，javascript是行为。前端开发的门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的初入点。也正因为如此，前端开发的领域有很多自学成“才”的同行。html是最基础的，现在流行的是html5设计，先学会网页布局。css是用来美化html页面的为页面提供布局和格式。最后再学javascript。如果你把每天看电影、看电视剧的时间用来学习，我想一个星期入门是没有问题的。

基础知识：

1. html + css。这部分建议在 www.w3school.com.cn上学习，边学边练，每章后还有小测试。之后可以模仿一些网站做些页面。本站提供的个人博客模板www.yangqq.com/download/都是比较简单的单页，可以下载下来模仿自己做一个。理解css每个元素的属性，样式的实现不一定只有一种写法，多想一想还有没有什么需要改进的地方。

2、JavaScript。不是所有的网页都必须有js，但是要想实现一些超酷的功能和界面的时候，就需要涉及到js。如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》

3、Photoshop、flash。熟悉会一点儿就行了，没必要全部都学得精通，当然如果你在学习的过程中，发现你ps或者flash比较感兴趣的话，也可以尝试做美工这一行。

4、html5和css3。可以先了解一下，然后再入手。毕竟IE的浏览器大多还不支持。

5、浏览器兼容。懂web标准，熟练手写 xhtml css3 并符合符合w3c标准。代码能兼容主流浏览器Firfox，Chrome、Safari、IE、Opera。虽然IE6很多都不兼容，但现在还使用的人还是有的。W3C验证地址：http://jigsaw.w3.org/css-validator/通过验证指定URI的CSS内容，可以帮我们检查一下有没有错误。

6、熟悉一门后台编程语言 asp、php、jsp等

web前端设计师前景

遇到很多想换行的朋友，第一句就问，这行赚钱吗？我相信一句话，没有付出，是没有回报的！前面已经说过了，咱们这行门槛是很低的，所以薪资阶段也不一样。2000初入这行的现在还普遍，工作经验2年以上，有很多代表性作品的时候，工资在4000左右；高手级别的估计在6000左右，大师级别这个阶段的薪资参考：10000以上(上海北京深圳为例)网页设计师课程一般包括：Photoshop、Fireworks、用户界面设计实操，xhtml、css、dreamweaver、网站架构与网站策划、flash动画制作，域名与空间、ftp、dhtml、javascript、动态交互网站(asp、php、aja)

开发 / 前端 / 设计 / 网页设计 / UI设计

No Comments

寡人的吐槽胜地

BTemplates.com

我的简介

2017年4月17日星期一

APP规范实例(详细的UI设计方法）

2016年11月29日星期二

200+值得收藏的设计师资源站

图片素材

排版设计

视觉稿设计工具

线框图

原型设计

响应式设计

色彩

CSS

HTML 5

JavaScript/jQuery

免费PS素材

图标设计

压缩图片

PS工具和插件

法律

灵感

托管

工作平台

地图

在线学习平台

播客

设计社区

写作平台

演讲

支付

便捷工具

图书

2016年6月23日星期四

如何知道手机屏幕的CSS像素宽度？

此像素非彼像素

设备像素(device pixel):

CSS像素(css pixel):

设备像素与CSS像素之间的换算是如何产生的呢？

每英寸像素(pixel per inch)：

设备像素比(device pixel ratio)：

美工和WEB前端开发人员之间如何协同：

2016年5月13日星期五

LNMP下Nginx如何设置域名301重定向

在centos上搭建shadowsocks-libev服务端

1，安装必须组件

2，安装git

3.下载shadowsocks-libev源码包并编译

4.运行shadowsocks

5.加入开机启动

2016年5月10日星期二

如果要学习web前端开发，需要学习什么？

Popular Posts

About

Categories

BTemplates.com

Blog Archive