php

php

php相关问题
html+css

html+css

JavaScript

JavaScript

js,jquery,vue.js等
Linux

Linux

Linux操作系统
Mysql

Mysql

各种资源

各种资源

开发工具,手册等
就业指导

就业指导

UI设计

UI设计

教学视频分享

教学视频分享

U190600班教学视频 - 20190715

教学视频分享寇老师 发表了文章 • 0 个评论 • 688 次浏览 • 2019-07-15 14:37 • 来自相关话题

链接:https://pan.baidu.com/s/1aSkELmgreiqs8dVqScUQFg
提取码:7tjl
复制这段内容后打开百度网盘手机App,操作更方便哦
链接:https://pan.baidu.com/s/1aSkELmgreiqs8dVqScUQFg
提取码:7tjl
复制这段内容后打开百度网盘手机App,操作更方便哦

U190600班教学视频 - 20190712

教学视频分享寇老师 发表了文章 • 0 个评论 • 685 次浏览 • 2019-07-12 16:05 • 来自相关话题

链接:https://pan.baidu.com/s/13rdois8PHeKFf6jY8YcRZQ
提取码:uliq
复制这段内容后打开百度网盘手机App,操作更方便哦
链接:https://pan.baidu.com/s/13rdois8PHeKFf6jY8YcRZQ
提取码:uliq
复制这段内容后打开百度网盘手机App,操作更方便哦

打造自己的音乐播放器1 —— 播放页布局

JavaScript王老师 发表了文章 • 0 个评论 • 1757 次浏览 • 2019-07-12 14:22 • 来自相关话题

在这个系列的文章中,我们将一步一步仿照网易云音乐APP的歌曲播放页来制作一个简单的音乐播放器,此篇文章及后续文章将会涉及到的知识点有:audio(音频播放标签)及其属性和事件方法、利用javascript来进行歌词匹配,音频可视化等。





 
以下是播放页的html结构代码:
<div class="player">
<div class="player-bg"></div>
<div class="player-main">
<div class="player-header">
<h3>我的一个道姑朋友</h3>
<span>双笙</span>
</div>
<div class="player-content">
<div class="cover">
<img src="cover/1.jpg">
</div>
<div class="lyrics"></div>
</div>
<div class="player-footer">
<div class="time-info">
<div class="start-time">00:00</div>
<div class="end-time">04:15</div>
<div class="time-process">
<div class="process-bar">
<div class="current">
<div class="point"></div>
</div>
</div>
</div>
</div>
<div class="control">
<a href="javascript:;" class="prev"><img src="img/prev.png"></a>
<a href="javascript:;" class="play"><img src="img/pause.png"></a>
<a href="javascript:;" class="next"><img src="img/next.png"></a>
</div>
</div>
</div>
</div>以下是播放页的css代码:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.player{
height: 100%;
}
.player-bg{
position: relative;
height: 100%;
background: rgba(255,255,255, 0.3) url(cover/1.jpg) no-repeat top center;
background-size: 200%;
filter: blur(40px);
}
.player-main{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
height: 100%;
width: 100%;
}
.player-header{
width: 100%;
padding: 10px;
letter-spacing: 1px;
}
.player-header h3{
color: white;
font-weight: 100;
}
.player-header span{
color: #AFB1B1;
font-size: 16px;
}
.player-content{
height: 70%;
position: relative;
}
.player-content .cover{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 50px solid black;
border-radius: 50%;
overflow: hidden;
}
.player-content .cover img{
width: 100%;
animation: rotation 10s linear infinite ;
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.player-footer{
position: fixed;
left: 0;
bottom: 20px;
width: 100%;
}
.player-footer img{
width: 40px;
height: 40px;
display: inline-block;
}
.time-info{
padding: 0 20px 20px;
overflow: hidden;
color: #B6BDBC;
}
.start-time{
width: 60px;
float: left;
text-align: center;
}
.end-time{
width: 60px;
float: right;
text-align: center;
}
.time-process{
margin: 0 60px;
position: relative;
}
.process-bar{
position: absolute;
top: 10px;
width: 100%;
border-top: 1px solid #B6BDBC;
}
.current{
width: 0;
border-bottom: 1px solid white;
}
.point{
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
cursor: pointer;
position: absolute;
top: -5px;
}
.control{
margin-top: 10px;
text-align: center;
}
.control a{
margin: 0 15px;
}
.control img{
vertical-align: middle;
}
.control .play img{
width: 64px;
height: 64px;
}
在后面的文章中,我们将会对现有的html和css代码进行增加和修改,以次来添加后续功能。
下篇预告:打造自己的音乐播放器2 —— 让歌曲播放和暂停、歌曲进度条增长、切换歌曲
  查看全部
在这个系列的文章中,我们将一步一步仿照网易云音乐APP的歌曲播放页来制作一个简单的音乐播放器,此篇文章及后续文章将会涉及到的知识点有:audio(音频播放标签)及其属性和事件方法、利用javascript来进行歌词匹配,音频可视化等。

1.png

 
以下是播放页的html结构代码:
<div class="player">
<div class="player-bg"></div>
<div class="player-main">
<div class="player-header">
<h3>我的一个道姑朋友</h3>
<span>双笙</span>
</div>
<div class="player-content">
<div class="cover">
<img src="cover/1.jpg">
</div>
<div class="lyrics"></div>
</div>
<div class="player-footer">
<div class="time-info">
<div class="start-time">00:00</div>
<div class="end-time">04:15</div>
<div class="time-process">
<div class="process-bar">
<div class="current">
<div class="point"></div>
</div>
</div>
</div>
</div>
<div class="control">
<a href="javascript:;" class="prev"><img src="img/prev.png"></a>
<a href="javascript:;" class="play"><img src="img/pause.png"></a>
<a href="javascript:;" class="next"><img src="img/next.png"></a>
</div>
</div>
</div>
</div>
以下是播放页的css代码:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.player{
height: 100%;
}
.player-bg{
position: relative;
height: 100%;
background: rgba(255,255,255, 0.3) url(cover/1.jpg) no-repeat top center;
background-size: 200%;
filter: blur(40px);
}
.player-main{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
height: 100%;
width: 100%;
}
.player-header{
width: 100%;
padding: 10px;
letter-spacing: 1px;
}
.player-header h3{
color: white;
font-weight: 100;
}
.player-header span{
color: #AFB1B1;
font-size: 16px;
}
.player-content{
height: 70%;
position: relative;
}
.player-content .cover{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 50px solid black;
border-radius: 50%;
overflow: hidden;
}
.player-content .cover img{
width: 100%;
animation: rotation 10s linear infinite ;
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.player-footer{
position: fixed;
left: 0;
bottom: 20px;
width: 100%;
}
.player-footer img{
width: 40px;
height: 40px;
display: inline-block;
}
.time-info{
padding: 0 20px 20px;
overflow: hidden;
color: #B6BDBC;
}
.start-time{
width: 60px;
float: left;
text-align: center;
}
.end-time{
width: 60px;
float: right;
text-align: center;
}
.time-process{
margin: 0 60px;
position: relative;
}
.process-bar{
position: absolute;
top: 10px;
width: 100%;
border-top: 1px solid #B6BDBC;
}
.current{
width: 0;
border-bottom: 1px solid white;
}
.point{
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
cursor: pointer;
position: absolute;
top: -5px;
}
.control{
margin-top: 10px;
text-align: center;
}
.control a{
margin: 0 15px;
}
.control img{
vertical-align: middle;
}
.control .play img{
width: 64px;
height: 64px;
}

在后面的文章中,我们将会对现有的html和css代码进行增加和修改,以次来添加后续功能。
下篇预告:打造自己的音乐播放器2 —— 让歌曲播放和暂停、歌曲进度条增长、切换歌曲
 

HTML语义化简介 —— 主体结构标签

html+css王老师 发表了文章 • 0 个评论 • 1731 次浏览 • 2019-07-12 13:47 • 来自相关话题

       HTML5标准规范制定完成发布已经好几年了,大家面试时也遇到了不少面试官“你怎么理解HTML5语义化”类似问题的提问。但其实我们日常工作中,真正使用HTML5语义化标签来开发的情况几乎微乎其微。
       
       什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

       语义化优点(面试重点):
       易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
       有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
       有利于开发和维护,语义化更具可读性,代码更好维护。

       这次介绍下主体结构标签,如图所示:
     
         




         1、<header>

        <header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

        在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

       2、<nav>

        <nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

        在一个文档中,可定义多个<nav>元素。

       3、<main>

       <main> 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

       需要注意的是在一个文档中不能出现多个<main>标签。

       4、<article>

       <article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

       当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

       5、<aside>

       <aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

       6、<footer>

       <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

       使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

       7、<section>

      <section>表示文档中的一个区域(或节),比如,内容中的一个专题组。

      如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
      不要把 <section> 元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,应使用<div>。

  查看全部
       HTML5标准规范制定完成发布已经好几年了,大家面试时也遇到了不少面试官“你怎么理解HTML5语义化”类似问题的提问。但其实我们日常工作中,真正使用HTML5语义化标签来开发的情况几乎微乎其微。
       
       什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

       语义化优点(面试重点)
       易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
       有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
       有利于开发和维护,语义化更具可读性,代码更好维护。

       这次介绍下主体结构标签,如图所示:
     
         
1.png


         1、<header>

        <header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

        在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

       2、<nav>

        <nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

        在一个文档中,可定义多个<nav>元素。

       3、<main>

       <main> 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

       需要注意的是在一个文档中不能出现多个<main>标签。

       4、<article>

       <article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

       当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

       5、<aside>

       <aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

       6、<footer>

       <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

       使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

       7、<section>

      <section>表示文档中的一个区域(或节),比如,内容中的一个专题组。

      如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
      不要把 <section> 元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,应使用<div>。

 

你不知道的AI技巧

UI设计刘宇昆 发表了文章 • 0 个评论 • 532 次浏览 • 2019-07-12 10:00 • 来自相关话题

                                                                 









 
                                                                 
100040jjwsqo5fpbzomj5f.png


100040iatoyr3bixabxg6b.png

 

初入UI设计行业,你需要养成这些好习惯

UI设计寇老师 发表了文章 • 0 个评论 • 608 次浏览 • 2019-07-12 09:48 • 来自相关话题

一、审美
 
1.  什么是审美?
审美是什么概念?每个人对于美的概念并不相同,美是一种非常主观的感受。审美的形式也不是一成不变,而我们作为审美主体原本也各不相同。
培养和提高审美也是在个人的审美基础之上进行的,我国大部分人的审美有待提高,特别要注重从小培养审美。

2.  怎样提升审美?
每个设计师对世界的认知层次不同,导致设计的风格必然各不相同。优秀的设计师能够准确表达出目标人群想要的美,从而形成独特的审美风格。而对于新手设计师,他们可能无法理解受众眼中的美,又或能够理解却没有好的技法去表达,无法达到所得既所想的专业水平。
首先要学会站在不同的角度去看待这个世界。需要有良好的观察力和想象力,可以看到别人看不到的世界的另一面。
然后要多听多看。多听你会接收到不同的观念,与相同领域和不同领域的人交流沟通,在对话中你可以得到新的讯息和理念。多看对美的概念就很具体了,多看书籍绘画,多看电影雕塑,多看各式各样的展览。
最后想说,审美不是一蹴而就的事情,需要长期的发现、思考、积累和总结;审美也不是一件令人痛苦的事情,也不是只有一条路可以走。他人的方法不一定适用于你,如何看到身边的花,只能用你自己的眼睛。
用心观察,生活处处是学问,处处都有好设计。
 
二、创建属于自己的素材库 
 
是不是每个设计师都会有一个自己的素材库,怎么创建并且完善呢?
答案是肯定的,每个设计师都应该拥有自己的素材库;但很多设计师不注意素材库的整理,在需要时,总是不太确定想要的素材在哪个位置,通常都是根据自己隐约的记忆来查找,最后即使找到,可能还不是自己想要的,这很大程度上降低了我们的工作效率。
我们今天着重梳理本地素材库,线上网址素材库:
 
①  本地素材库
如果你想成为优秀的设计师,首先请选择优秀的网站,多看优秀的作品,并尊重他人的劳动成果。
在国内外网站上看到喜欢,觉得有可取借鉴的设计作品,可以直接采集到 Pinterest/花瓣网,同时及时保存文件到本地!
既然已经保存到网址收藏了为什么还要保存文件到本地?相信大家经常看到这样的文章“没有了花瓣,Pinterest,设计师怎样做设计?” 现在你应该明白为什么了。
 
优点:一次保存,永久可查阅翻看。不必担心受到网络的问题,更安全。
缺点:难以追随源头,设计师都会有一个爱好,深挖,看到一个好作品后会追寻源头,看看还有没有相关的好作品。
 
②线上网址素材库
多去优秀的网站学习浏览优秀的作品,并及时保存收藏。优秀的网址参考上面的审美网址。以常用的花瓣网的整理为例。为了方便查找给每个画板设置封面,同时不同的内容设置不同颜色,另外利用颜色区分类别,同时把经常使用的内容靠前排列。
 
优点:容易查找,每个作品可添加标签分类;作品源头可追寻,可顺藤摸瓜找到更多相似作品。
缺点:如果出现网站维护,就不能访问网站;网络顺畅的前提下才能正常访问。
 
Tips:收藏的内容并不一定要是自己的专业内容,可以有涉猎更多的设计领域。虽然关注的设计师,收藏的作品就来自各种领域。但很多东西是相通的,能在不同的作品中看到可以通用的创意,我觉得这也是设计的乐趣之一。
 
三、如何在工作中应用这些素材?

1.复习消化。收藏后不代表完事了,需要定时或者空闲时间就翻开看看,各个素材的分布位置,分析这个作品:它好在哪,不好在哪。

2. 工作时作为设计参考。我们在做设计的时候不能埋头苦干,只看到自己的项目,线分析项目需求,在通过分析回想自己以往收藏的组品中,哪些点亮点元素可以借鉴参考,这样对我们的设计有很多帮助,也能够更好的满足需求,做出更好的设计。

3. 更新迭代。所有的素材可能只是在某一瞬间或某一时刻会被你认为是好作品,但随着自己的段位不断提升,素材也需要不断的增删,不断更新。 查看全部
一、审美
 
1.  什么是审美?
审美是什么概念?每个人对于美的概念并不相同,美是一种非常主观的感受。审美的形式也不是一成不变,而我们作为审美主体原本也各不相同。
培养和提高审美也是在个人的审美基础之上进行的,我国大部分人的审美有待提高,特别要注重从小培养审美。

2.  怎样提升审美?
每个设计师对世界的认知层次不同,导致设计的风格必然各不相同。优秀的设计师能够准确表达出目标人群想要的美,从而形成独特的审美风格。而对于新手设计师,他们可能无法理解受众眼中的美,又或能够理解却没有好的技法去表达,无法达到所得既所想的专业水平。
首先要学会站在不同的角度去看待这个世界。需要有良好的观察力和想象力,可以看到别人看不到的世界的另一面。
然后要多听多看。多听你会接收到不同的观念,与相同领域和不同领域的人交流沟通,在对话中你可以得到新的讯息和理念。多看对美的概念就很具体了,多看书籍绘画,多看电影雕塑,多看各式各样的展览。
最后想说,审美不是一蹴而就的事情,需要长期的发现、思考、积累和总结;审美也不是一件令人痛苦的事情,也不是只有一条路可以走。他人的方法不一定适用于你,如何看到身边的花,只能用你自己的眼睛。
用心观察,生活处处是学问,处处都有好设计。
 
二、创建属于自己的素材库 
 
是不是每个设计师都会有一个自己的素材库,怎么创建并且完善呢?
答案是肯定的,每个设计师都应该拥有自己的素材库;但很多设计师不注意素材库的整理,在需要时,总是不太确定想要的素材在哪个位置,通常都是根据自己隐约的记忆来查找,最后即使找到,可能还不是自己想要的,这很大程度上降低了我们的工作效率。
我们今天着重梳理本地素材库,线上网址素材库:
 
①  本地素材库
如果你想成为优秀的设计师,首先请选择优秀的网站,多看优秀的作品,并尊重他人的劳动成果。
在国内外网站上看到喜欢,觉得有可取借鉴的设计作品,可以直接采集到 Pinterest/花瓣网,同时及时保存文件到本地!
既然已经保存到网址收藏了为什么还要保存文件到本地?相信大家经常看到这样的文章“没有了花瓣,Pinterest,设计师怎样做设计?” 现在你应该明白为什么了。
 
优点:一次保存,永久可查阅翻看。不必担心受到网络的问题,更安全。
缺点:难以追随源头,设计师都会有一个爱好,深挖,看到一个好作品后会追寻源头,看看还有没有相关的好作品。
 
②线上网址素材库
多去优秀的网站学习浏览优秀的作品,并及时保存收藏。优秀的网址参考上面的审美网址。以常用的花瓣网的整理为例。为了方便查找给每个画板设置封面,同时不同的内容设置不同颜色,另外利用颜色区分类别,同时把经常使用的内容靠前排列。
 
优点:容易查找,每个作品可添加标签分类;作品源头可追寻,可顺藤摸瓜找到更多相似作品。
缺点:如果出现网站维护,就不能访问网站;网络顺畅的前提下才能正常访问。
 
Tips:收藏的内容并不一定要是自己的专业内容,可以有涉猎更多的设计领域。虽然关注的设计师,收藏的作品就来自各种领域。但很多东西是相通的,能在不同的作品中看到可以通用的创意,我觉得这也是设计的乐趣之一。
 
三、如何在工作中应用这些素材?

1.复习消化。收藏后不代表完事了,需要定时或者空闲时间就翻开看看,各个素材的分布位置,分析这个作品:它好在哪,不好在哪。

2. 工作时作为设计参考。我们在做设计的时候不能埋头苦干,只看到自己的项目,线分析项目需求,在通过分析回想自己以往收藏的组品中,哪些点亮点元素可以借鉴参考,这样对我们的设计有很多帮助,也能够更好的满足需求,做出更好的设计。

3. 更新迭代。所有的素材可能只是在某一瞬间或某一时刻会被你认为是好作品,但随着自己的段位不断提升,素材也需要不断的增删,不断更新。

为什么你的设计改了又改?这几种方法帮你一稿通过!

UI设计李老师 发表了文章 • 0 个评论 • 651 次浏览 • 2019-07-11 11:14 • 来自相关话题

大多数设计师在实际工作中,经常会碰到设计稿改来改去,改得焦头烂额,甚至怀疑自己的设计水平,这是为什么呢?
 
「设计」这一门工种,似乎是永远避免不了「改稿」这一环节的,即便是非常顶尖的设计师,不为甲方不为外部原因所妥协,也会在自我实践中寻求改变。但是,「改设计」也未必是越改越好,如果沟通不当,也会存在越改越糟的结果。所以,作为设计师,一方面我们要吸取不同的意见,另一方面也要全面提升自己的知识架构、坚守自己的原则。

接下来以「UI设计」为例,剖析我们日常工作中「改了又改」的问题。在实际工作中,UI设计师通常会面临来自老板、产品、运营、开发等各方人员的意见,也常常会因为字体的粗细、间距的大小、颜色的选择等等问题各执一词、争论不休。
 
为什么会这样呢?其实,在UI设计中,频繁改稿主要存在三种情况:

第一种:在与产品经理需求对接的时候沟通不到位导致理解有偏差,产生方向性错误,这是信息传递的问题;

第二种:设计师经验不足、设计能力有限导致产品经理的需求得不到最佳程度的实现,这是UI设计师本身的问题;

第三种:UI都已经做到一半或者已经输出了,产品需求又变动了,这是产品经理或老板的需求不确定的问题。
 
针对以上问题,在实际项目中怎样避免陷入频繁改稿的死循环,从而提高工作效率、推动项目进展,提升自己作为设计师的成就感呢?​
 
1.认清工作流,保持全方位的沟通
       首先我们来了解一下UI设计的工作流,只有清楚自己岗位的流程,才能更好地拿捏设计。每个公司的类型和规模可能都不太一样,但基本一致,无非就是5个阶段:需求 – 设计 – 开发 – 测试 – 上线。如果按职位划分就是:产品经理 – 交互设计师 – UI设计师 – 前后端开发工程师 – 测试人员 – 产品上线。
所以我们UI设计师是处于流水线中游的状态,向上对接产品,向下对接开发。在这个流程中,要做到减少设计修改的频率:
向上要明确产品经理的需求,将原型需求准确恰当的视觉化;
向下要考虑开发实现以及时间成本,因为如果一个设计做的非常绚丽,但是开发实现不出来或者很难实现或者实现的时间成本很大,那么肯定需要对设计方案做出调整,采纳折中方案。
所以,不想让自己的设计改了又改,那么一定要全方位的多沟通,一定不要「闭门造车」。​
2.确定需求,吃透交互原型
        1. 原型是否确定,会不会存在变动?     2. 项目的时间周期     3. 理清设计意图,处理好信息层级 
 
3.以产品为核心,尊重各方立场    
        当设计稿出来之后,一般会组织 UI评审,UI设计师一定要将自己的设计理念表达清楚,将设计中考究的观点输送给参与评审的各方人员,这样会让你的设计更有信服力。如果在评审过程中,产品、运营或开发对设计稿提出不同的意见,我们首先不要急于否定,要确定立场:大家都是以产品为核心去思考问题,也不要人云亦云,要清楚他们为什么会提出这个意见,是不是自己的设计哪里没有展现好?即便对方的建议本身没有可取性,那么你也要站在你的视角用你的观点解释给对方听。这决定于每个设计师的自身知识架构和理论支撑,所以一定要让自己不停地吸收,才能让自己的设计更经得起推敲。





 
  查看全部
6368912862866455007667411.jpg

大多数设计师在实际工作中,经常会碰到设计稿改来改去,改得焦头烂额,甚至怀疑自己的设计水平,这是为什么呢?
 
「设计」这一门工种,似乎是永远避免不了「改稿」这一环节的,即便是非常顶尖的设计师,不为甲方不为外部原因所妥协,也会在自我实践中寻求改变。但是,「改设计」也未必是越改越好,如果沟通不当,也会存在越改越糟的结果。所以,作为设计师,一方面我们要吸取不同的意见,另一方面也要全面提升自己的知识架构、坚守自己的原则。

接下来以「UI设计」为例,剖析我们日常工作中「改了又改」的问题。在实际工作中,UI设计师通常会面临来自老板、产品、运营、开发等各方人员的意见,也常常会因为字体的粗细、间距的大小、颜色的选择等等问题各执一词、争论不休。
 
为什么会这样呢?其实,在UI设计中,频繁改稿主要存在三种情况:

第一种:在与产品经理需求对接的时候沟通不到位导致理解有偏差,产生方向性错误,这是信息传递的问题;

第二种:设计师经验不足、设计能力有限导致产品经理的需求得不到最佳程度的实现,这是UI设计师本身的问题;

第三种:UI都已经做到一半或者已经输出了,产品需求又变动了,这是产品经理或老板的需求不确定的问题。
 
针对以上问题,在实际项目中怎样避免陷入频繁改稿的死循环,从而提高工作效率、推动项目进展,提升自己作为设计师的成就感呢?​
 
1.认清工作流,保持全方位的沟通
       首先我们来了解一下UI设计的工作流,只有清楚自己岗位的流程,才能更好地拿捏设计。每个公司的类型和规模可能都不太一样,但基本一致,无非就是5个阶段:需求 – 设计 – 开发 – 测试 – 上线。如果按职位划分就是:产品经理 – 交互设计师 – UI设计师 – 前后端开发工程师 – 测试人员 – 产品上线。
所以我们UI设计师是处于流水线中游的状态,向上对接产品,向下对接开发。在这个流程中,要做到减少设计修改的频率:
向上要明确产品经理的需求,将原型需求准确恰当的视觉化;
向下要考虑开发实现以及时间成本,因为如果一个设计做的非常绚丽,但是开发实现不出来或者很难实现或者实现的时间成本很大,那么肯定需要对设计方案做出调整,采纳折中方案。
所以,不想让自己的设计改了又改,那么一定要全方位的多沟通,一定不要「闭门造车」。​
2.确定需求,吃透交互原型
        1. 原型是否确定,会不会存在变动?     2. 项目的时间周期     3. 理清设计意图,处理好信息层级 
 
3.以产品为核心,尊重各方立场    
        当设计稿出来之后,一般会组织 UI评审,UI设计师一定要将自己的设计理念表达清楚,将设计中考究的观点输送给参与评审的各方人员,这样会让你的设计更有信服力。如果在评审过程中,产品、运营或开发对设计稿提出不同的意见,我们首先不要急于否定,要确定立场:大家都是以产品为核心去思考问题,也不要人云亦云,要清楚他们为什么会提出这个意见,是不是自己的设计哪里没有展现好?即便对方的建议本身没有可取性,那么你也要站在你的视角用你的观点解释给对方听。这决定于每个设计师的自身知识架构和理论支撑,所以一定要让自己不停地吸收,才能让自己的设计更经得起推敲。

6368912862894190219453791.jpg

 
 

“字要大”和设计师的审美之间,这个矛盾不可调和怎么解决!

UI设计李老师 发表了文章 • 0 个评论 • 762 次浏览 • 2019-07-11 10:52 • 来自相关话题

设计师,听起来似乎挺艺术的一个职业,不过本质上其实就是一个手艺人,靠手艺吃饭。
 
 对于所有设计师来说,其实经常都会面对这种问题,就是我们作为内行,有时候面对一个不是内行的人提出的需求,会感觉很无理很变态很难做。

还可能会引发一系列对所谓技术好的设计师却轻视实现自身价值,项目反应周期过长,吧啦吧啦的diss结论出来……那么今天来聊聊为什么甲乙方会存在认知差异,以及如何去解决这沟通中的鸿沟。

( Ps: 设计师,当你突然幡然醒悟觉得为时已晚的时候,恰恰就是最合适的时候。成长就是一个逐渐认识自己的过程。成长也是一个从仰视到平视再到俯视的过程…… )
其实是因为缺少一个步骤:翻译。我们仔细想想,当他们说字要大的时候,到底是在说什么?真的只是要把字放大吗?其实不是的。字要大的意思,翻译一下:是要醒目、显眼、信号强。

原研哉说过,“设计行为是对信息的提取、整理和呈现”,做设计,本质就是处理信息。那么字要大翻译过来,代表的就是信号强。

OK,如果你理解了这一层意思,就是当“甲方爸爸”说字要大时,其实是想说信号要强。那你就不会真的只是把字放大了,你的处理方式有很多很多种,一定能找到一种既不破坏你心里的审美,又能满足需求的方式。前面说的那个矛盾,也就不存在了。
 
在我们设计师眼里,在潘通色卡中,即使是最简陋的那一版里,红色就有五百种。而往往实际当中客户只会告诉你说:我要红色,大红色,哦买噶!设计不疯才怪,由此看来视觉设计师辅修一门《甲方心理学》和《抑郁症的疏导与缓解>非常有必要。
 
那么接到这种需求时,我们该怎么做呢?先想一下,这个看似奇葩的需求,在这个目标的情景下,代表的是什么意思。再运用设计专业能力,自然能达到需求和审美之间的平衡。

* 第一步是翻译需求,弄明白他说这个到底是什么意思。

* 第二步是专业匹配,从掌握的设计技巧中,找到合适的方法去实现需求。

我们平时工作时,往往特别重视第二步,拼命提升设计感,拼命美化细节,但其实更重要的是第一步。

我们经常看到网上流传的那些段子,什么高端大气上档次、五彩斑斓的黑、logo放大的同时缩小一点等等,这些看似奇葩的需求,不是他们要故意为难设计师。

“甲方爸爸”他们不是设计专业的人,他不懂我们的那些衬线体、视觉平衡、色彩构成这些玩意,甚至有的连最基本的设计师付出了时间成本,就应得到相应回报这一点,都不能理,认为不过就是在电脑上简单画几笔而已。因此,我们不能期望他们用设计专业的语言去描述需求。
 
他们只能用他能想到的有限的词汇。甚至实际上,在他没看到心目中对的那个方案时,他也不清楚自己到底想要什么。这很正常。
 
只要你们的目标是一致的,都是为了品牌和用户创造价值,那出现这种情况,其实就是一个翻译的问题。





  查看全部
设计师,听起来似乎挺艺术的一个职业,不过本质上其实就是一个手艺人,靠手艺吃饭。
 
 对于所有设计师来说,其实经常都会面对这种问题,就是我们作为内行,有时候面对一个不是内行的人提出的需求,会感觉很无理很变态很难做。

还可能会引发一系列对所谓技术好的设计师却轻视实现自身价值,项目反应周期过长,吧啦吧啦的diss结论出来……那么今天来聊聊为什么甲乙方会存在认知差异,以及如何去解决这沟通中的鸿沟。

( Ps: 设计师,当你突然幡然醒悟觉得为时已晚的时候,恰恰就是最合适的时候。成长就是一个逐渐认识自己的过程。成长也是一个从仰视到平视再到俯视的过程…… )
其实是因为缺少一个步骤:翻译。我们仔细想想,当他们说字要大的时候,到底是在说什么?真的只是要把字放大吗?其实不是的。字要大的意思,翻译一下:是要醒目、显眼、信号强。

原研哉说过,“设计行为是对信息的提取、整理和呈现”,做设计,本质就是处理信息。那么字要大翻译过来,代表的就是信号强。

OK,如果你理解了这一层意思,就是当“甲方爸爸”说字要大时,其实是想说信号要强。那你就不会真的只是把字放大了,你的处理方式有很多很多种,一定能找到一种既不破坏你心里的审美,又能满足需求的方式。前面说的那个矛盾,也就不存在了。
 
在我们设计师眼里,在潘通色卡中,即使是最简陋的那一版里,红色就有五百种。而往往实际当中客户只会告诉你说:我要红色,大红色,哦买噶!设计不疯才怪,由此看来视觉设计师辅修一门《甲方心理学》和《抑郁症的疏导与缓解>非常有必要。
 
那么接到这种需求时,我们该怎么做呢?先想一下,这个看似奇葩的需求,在这个目标的情景下,代表的是什么意思。再运用设计专业能力,自然能达到需求和审美之间的平衡。

* 第一步是翻译需求,弄明白他说这个到底是什么意思。

* 第二步是专业匹配,从掌握的设计技巧中,找到合适的方法去实现需求。

我们平时工作时,往往特别重视第二步,拼命提升设计感,拼命美化细节,但其实更重要的是第一步。

我们经常看到网上流传的那些段子,什么高端大气上档次、五彩斑斓的黑、logo放大的同时缩小一点等等,这些看似奇葩的需求,不是他们要故意为难设计师。

“甲方爸爸”他们不是设计专业的人,他不懂我们的那些衬线体、视觉平衡、色彩构成这些玩意,甚至有的连最基本的设计师付出了时间成本,就应得到相应回报这一点,都不能理,认为不过就是在电脑上简单画几笔而已。因此,我们不能期望他们用设计专业的语言去描述需求。
 
他们只能用他能想到的有限的词汇。甚至实际上,在他没看到心目中对的那个方案时,他也不清楚自己到底想要什么。这很正常。
 
只要你们的目标是一致的,都是为了品牌和用户创造价值,那出现这种情况,其实就是一个翻译的问题。

6369723877160923841880146.jpg

 

U190600班教学视频 - 20190710

教学视频分享寇老师 发表了文章 • 0 个评论 • 492 次浏览 • 2019-07-10 14:44 • 来自相关话题

链接:https://pan.baidu.com/s/1lQevvVQEON8jNQ_8p9MPDg
提取码:wnw0
 

如何评价腾讯新字体

UI设计刘宇昆 发表了文章 • 0 个评论 • 689 次浏览 • 2019-07-09 11:40 • 来自相关话题

腾讯为了更新一个LOGO,竟然花了几百万做了一套字体。看到网上的吐糟五花八门,却很少有专业性的见解,但我们今天不会点评这次升级,而是会跟大家分享一下,字体设计中的专业术语,下次可以用“行话”来更精准的表达的自己的看法。

所以关于字体的一些专业术语,你知道多少呢?
 
                                                                                 



字体的特征

首先中文字体分为黑体和宋体,英文字体分为有衬线和无衬线这个大家都知道,但是它们是靠什么去划分界限肯定很少有人知道。

宋体和有衬线字体指的是线条右边带有所谓的【衬线】的装饰,以及直线比横线粗的字体的总称。而黑体和无衬线字体则是没有这些衬线装饰,直线和横线笔画粗细均等字体的总称。


                                                                               




                                                                               



 

                                                                               




字体的粗细

你知道怎么字体的种类划分只是高逼格吐槽第一步,接下来就教你怎么甩那些只会说“这一撇好看,那一横不行”的人几十条街。为了节省打字之后就直接写宋体和黑体了,宋体看起来简洁利落,即使缩小也能够有良好的可读性,所以广泛运用在新闻、参考书籍这些长文章中。

字体给人的印象会随着笔画的粗细而改变,笔画粗的宋体会给人“权威”“历史”“男性”等印象,细的则会给人“柔软”“现代”“中性”“品格”等印象;笔画粗的黑体则是“强而有力”“朝气蓬勃”“严格”等,细的则是:“明亮”“纤细”“女性的”等。

所以在设计时挑选字体一定要和挑选女朋友一样慎重,因为一款适合的字体绝对能够将你的作品效果更好的呈现出来。
 

                                                                               




                                                                               



 
Tips:有时间不妨了解一下字体诞生的经历,会产生很多启发,当然重点是会让你的专业功力看上去至少提高三成!
 

                                                                               



字体的个性

不过仅仅了解字体特征还是不够的,因为即使同样归纳为黑体或宋体,但是你还是不足以说出仿宋、新宋和宋体的具体差别,因为字体各自的个性不同,但是你说不上来对吧?所以下面就要上重点了!
 

                                                                               



                                                                
                                                                               




同样是宋体,但是中宫窄、字面框小的字体,可以感受到很强烈的手写文字韵味,给人古典正式的感觉。反之,中宫广、字面框大的字体,则更具现代感,黑体也是一样。

小伙伴要问了,英文字没有中宫、字腔咋整?别担心,有衬线字体根据制作年代划分,经历了【威尼斯式Venetian】【旧风格Old Face】【过渡时期Traditional】【现代样式Modern Face】的演变,需要注意的是纵轴的切入法,以及衬线的形状。无衬线字体具备的几何形状,则会给人现代感。


                                                                               




                                                                               



 
字体印象坐标




所以不要再用“倾斜度8比较吉利,客户肯定喜欢”这种句式去吐槽了,一句“这个纵轴倾斜角度,应该是参考了威尼斯式的古典韵味,但是又兼顾了旧风格的现代感。”一出,设计师气场扑面而来!

在创作过程中,我们在脑海里搜寻字体的信息,然后一个一个漫长的尝试或者从几个尝试中草率决定是比较普遍的,但是虽然普遍但不值得提倡。也许可以尝试一些新的做法,比如制作一张“字体印象坐标”


                                                                             




                                                                             



 
最后,我想说,看待一个设计成果不能仅仅停留在“好看不好看的层面”,设计的视觉呈现就好比是海面上的冰山一角,海面之下是设计师庞大而深厚的知识储备。所以,希望大家在学习设计技巧软件技能之余,能更加注重设计思维和设计之外知识的储备和培养,设计出有“内容”的作品。



 
 
  查看全部
腾讯为了更新一个LOGO,竟然花了几百万做了一套字体。看到网上的吐糟五花八门,却很少有专业性的见解,但我们今天不会点评这次升级,而是会跟大家分享一下,字体设计中的专业术语,下次可以用“行话”来更精准的表达的自己的看法。

所以关于字体的一些专业术语,你知道多少呢?
 
                                                                                 
v2-4853b73187eddd1f95190677c8c71069_hd.jpg

字体的特征

首先中文字体分为黑体和宋体,英文字体分为有衬线和无衬线这个大家都知道,但是它们是靠什么去划分界限肯定很少有人知道。

宋体和有衬线字体指的是线条右边带有所谓的【衬线】的装饰,以及直线比横线粗的字体的总称。而黑体和无衬线字体则是没有这些衬线装饰,直线和横线笔画粗细均等字体的总称。


                                                                               
v2-274686f2a04091e9bcf7a0431931ec20_1200x500.jpg


                                                                               
v2-58ea1fcb4028550ac22230205a4176ec_hd.jpg

 

                                                                               
v2-fe0f055aaaae4467a098f206c2ff3230_hd.jpg


字体的粗细

你知道怎么字体的种类划分只是高逼格吐槽第一步,接下来就教你怎么甩那些只会说“这一撇好看,那一横不行”的人几十条街。为了节省打字之后就直接写宋体和黑体了,宋体看起来简洁利落,即使缩小也能够有良好的可读性,所以广泛运用在新闻、参考书籍这些长文章中。

字体给人的印象会随着笔画的粗细而改变,笔画粗的宋体会给人“权威”“历史”“男性”等印象,细的则会给人“柔软”“现代”“中性”“品格”等印象;笔画粗的黑体则是“强而有力”“朝气蓬勃”“严格”等,细的则是:“明亮”“纤细”“女性的”等。

所以在设计时挑选字体一定要和挑选女朋友一样慎重,因为一款适合的字体绝对能够将你的作品效果更好的呈现出来。
 

                                                                               
v2-6f3736188474635774473f1710b12b6c_hd.jpg


                                                                               
v2-1a88c7004de683f8a6309a01e82e548c_hd.jpg

 
Tips:有时间不妨了解一下字体诞生的经历,会产生很多启发,当然重点是会让你的专业功力看上去至少提高三成!
 

                                                                               
v2-0dc180c3e2041fd52684ef3b4e928c5e_hd.jpg

字体的个性

不过仅仅了解字体特征还是不够的,因为即使同样归纳为黑体或宋体,但是你还是不足以说出仿宋、新宋和宋体的具体差别,因为字体各自的个性不同,但是你说不上来对吧?所以下面就要上重点了!
 

                                                                               
v2-35b63a171312452d7b6a51aebbf1c4f3_hd.jpg

                                                                
                                                                               
v2-467bd3dd7e6d4b10b54af5326f6e014d_hd.jpg


同样是宋体,但是中宫窄、字面框小的字体,可以感受到很强烈的手写文字韵味,给人古典正式的感觉。反之,中宫广、字面框大的字体,则更具现代感,黑体也是一样。

小伙伴要问了,英文字没有中宫、字腔咋整?别担心,有衬线字体根据制作年代划分,经历了【威尼斯式Venetian】【旧风格Old Face】【过渡时期Traditional】【现代样式Modern Face】的演变,需要注意的是纵轴的切入法,以及衬线的形状。无衬线字体具备的几何形状,则会给人现代感。


                                                                               
v2-80ff49af9d21eedf3c31051cd5686aea_hd.jpg


                                                                               
v2-c70464ce03b3febbe2f2418c1f689434_hd.jpg

 
字体印象坐标




所以不要再用“倾斜度8比较吉利,客户肯定喜欢”这种句式去吐槽了,一句“这个纵轴倾斜角度,应该是参考了威尼斯式的古典韵味,但是又兼顾了旧风格的现代感。”一出,设计师气场扑面而来!

在创作过程中,我们在脑海里搜寻字体的信息,然后一个一个漫长的尝试或者从几个尝试中草率决定是比较普遍的,但是虽然普遍但不值得提倡。也许可以尝试一些新的做法,比如制作一张“字体印象坐标”


                                                                             
v2-9c5469fda966b47fd6c2f0dc120dc2ce_hd.jpg


                                                                             
v2-bad0d6955e2a73d7c385056e1ae19364_hd.jpg

 
最后,我想说,看待一个设计成果不能仅仅停留在“好看不好看的层面”,设计的视觉呈现就好比是海面上的冰山一角,海面之下是设计师庞大而深厚的知识储备。所以,希望大家在学习设计技巧软件技能之余,能更加注重设计思维和设计之外知识的储备和培养,设计出有“内容”的作品。