2024年ui设计pc网站宽度 篇1
现在的显示器分辩率有大有小,建议做网页还是做成响应式的好。
看看bootstrap这个前端UI吧,根据浏览器的大小来适配页面的宽度等体验感挺好的。
@media (min-width: 768px) { .container { width: 750px; } }
通过对浏览器的min-width宽度判断来决定你内容区域的宽度。这样在不同的显示器下面均能够得到一个很不错的用户体验。
不过呢,网站用户驻足时间最重要的还是内容质量吧。
2024年ui设计pc网站宽度 篇2
WEB端
必备元素:logo、menu(导航)、banner(动效【flash、H5】)、内容区(新闻、企业简介、产品展示...)、版权信息(版权所有、联系方式)
可选元素:搜索、电话、在线客服、流量统计...
用户体验习惯:左:浏览区域、列表区域
右:功能区域、内容区域
字体:最小12px,最黑#333333
字体12 px、14px、16px效果选择无,其他字号则用锐利、犀利、浑厚等
标题部分字体:14px~24px(尽可能采用雅黑)
正文部分字体:12px、14px(雅黑或者宋体),字行距一般为1.5~2倍之间。
尺寸规范:在分辨率1024px*768px的情况下,满屏宽度为1003px,通常定义可视范围为920px~1000px之间。常见:宽960px、980px、1000px,一屏高度650px。
UI方面
iOS
iphone字体、字号标准
字体:中文:苹方 ; 英文:旧金山
字号:正文最小24px ; 常驻栏icon20px
Andriod
字体:中文:思源黑体 ; 英文:roboto
字号:注释最小:24px ; 文本:28px ; 文章标题或图标名称:32px ; 导航标题:36px(在这里为720px*1280px的尺寸下设计规范,注:1sp=2px)
界面尺寸
图标尺寸
以上内容希望可以帮到你!
2024年ui设计pc网站宽度 篇3
给你推荐几个常用的网站:
1、站酷,国内最大的设计师网站,里面优秀的作品很多。
2、UI 中国,国内算是不错的 UI 设计网站。
3、Dribbble,全球最有名的 UI 设计网站,不过里面的作品偏概念,可以了解设计趋势。
4、Behance,全球最有影响力的设计网站之一,Adobe 官方出品,里面的作品完成度更高,更具有实际落地价值。
5、Pinterest,全球最多人访问的设计灵感获取网站,里面各种设计类型都有,可以日常访问提升设计阅读量,培养设计审美。
6、https://www.invisionapp.com/ 这是一个国外的设计协同工具网站,但是里面的一些设计文章写得很不错。
7、Medium,国外最大的文章平台,里面有很多优秀的 UI 设计文章,值得多多学习。
8、Ant Design,由蚂蚁金服推出的 Web 端设计语言,组件完整,设计理念也比较有参考价值,值得好好学习。
9、Material Deisgn,由 Google 官方推出的设计语言,在设计圈备受推崇,内容含金量很高,但是学习量也非常大,值得静下心来研究。
10、http://www.awwwards.com/ 优秀设计网站的排名,可以理解为 UI 届的红点奖。更新很频繁,里面的设计页面都是比较有创意的,用来开发脑洞。
11、http://iconfont.cn/ 阿里官方的图标库,用起来很方便,可以大大提升设计效率。
12、https://unsplash.com/ 最好用的免费图库,里面的图片都是可以免费商用的,更新频繁,质量也非常高,适合平时做 UI 的时候拿来用。
暂时分享到这里,如果点赞高,我再更新,十来年的积累,大概有百来个网站吧。
2024年ui设计pc网站宽度 篇4
为了更好地兼容性,我建议宽度在1100到1200,比较符合现在的设备。我们以前做的大部分都是960,那是因为普遍的显示器分辨率都不高,做大了容易超出或者撑开,导致出现下横滑条,这是非常不专业的。
如果你是为客户建网站,应该把宽带适当做大点,这样看起来大气,人的直观就是这样的。
目前的响应式很流行,你甚至可以做全屏的,但在ps中必须有个宽度值,所以1920就很适合做全屏类ui了。1920是我常用的宽度,保证了图片的清晰度,主要是全屏类网站做得多了。
2024年ui设计pc网站宽度 篇5
初学者如何学习UI设计,并且不走弯路!
一、UI设计什么?
UI即User Interface(用户界面)的简称,说到这个用户界面,其实非常好理解,因为我们每天都在使用。
这是我手机里面的截图,非常熟悉的界面,移动端互联网时代,每位同学都有一部智能手机。
手机里面看到一起我们可以称为用户界面,也就是我说的UI设计。
简单的来说,UI设计师就是负责设计这些在电子屏幕上显示的产品。
比如微信界面、里面的图标 文字 图片整个操作点击 都属于UI设计师要设计的范畴。所以UI设计一直存在于我们的生活!
二、设计软件
如果我们要设计出精美的界面供用户使用,那么我们首先要学习设计软件,来绘制这些界面。
一般UI设计学习 掌握以上4款软件即可
PS:负责界面中的视觉设计,是我们第一款要掌握的软件,在以后的工作中80%的内容 都是PS来完成。
AI:一款平面设计软件,在UI设计中主要负责界面里面图标设计、加快工作效率。
AE:一款影视特效软件,在UI设计中主要负责 交互动效设计。我们手机解锁动作其实就是一个简单的动效。
ARP:全称:Axure RP 一款交互软件、在UI设计中负责做交互原型图。
以上这些设计软件的操作、我们可以通过网上免费教程学习、一般用心的话、画上几天基本上都可以掌握简单的操作。
三、设计练习
想学好UI设计、肯定需要不断的练习。提升自己的审美、提升做图效率!
初学者的话,先把PS熟练精通,可以通过临摹学习来提升操作技巧,介绍个设计师必用的网站(花瓣网).
它属于素材网站,里面各种设计素材应有尽有,建议先从最基本的UI图标开始学起,网站上找到自认为好看的图标,用PS一对一的临摹。
临摹学习是初学者一定会经历的过程,只有不断的临摹。脑子里才会积累东西。提升自己的操作技巧,掌握基本的造型能力 创意能力!
界面临摹学习也是非常有必要的、很多同学设计做不好的原因之一(颜色搭配 板式布局)
通过优秀界面的临摹可以让自己脑海中得到积累,锻炼自己的颜色搭配能力、板式布局能力、把控设计细节。
四、设计规范掌握
UI设计属于一个新的行业、和传统的平面设计 电商设计有很大区别、每个界面都要应用到设备中,所以设计规范学习也是必不可少的。
给大家介绍个设计尺寸规范网站(老姜尺寸网)
这个网站里面,可以学到移动端 PC端 常用的设计尺寸规范。
很多设计理论知识是很难通过 网站作品学会的,所