网页设计 App界面设计

野性酷女 2024-04-17 15:28 162阅读 0赞

### 一、 网页设计 ###

1.  什么是网站  
    ![在这里插入图片描述][20190827232908488.png]
2.  什么是网页  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]
3.  首页和主页的区别  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]
4.  网页的表现形式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]

### 二、 网页的板块结构 ###

1.  网站LOGO  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]
2.  导航条  
    ![在这里插入图片描述][20190827232939478.png]
3.  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]
4.  内容板块
5.  版尾或版权工具  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 5]  
    `域尾`包括：认证和备案；

> 1.  域名包括：.cn(国内域名)/.com（国际域名）；在`万网`可以买到（查找是否被注册），域名只能使用一次
> 2.  服务器：空间（在阿里云购买）
> 3.  网站命名：www.任意自己命名.com
> 4.  备案：国内域名必须备案；国际域名仅需认证（如下图）

![在这里插入图片描述][20190827232959475.png]

> 5)站长之家可以查询网站流量

eg：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 6]

### 三、 网页的内容 ###

1.  ![在这里插入图片描述][20190827233010558.png]
2.  ![在这里插入图片描述][20190827233015493.png]
3.  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 7]
4.  动画
5.  ![在这里插入图片描述][20190827233038381.png]
6.  ![在这里插入图片描述][2019082723304223.png]
7.  表单

### 四. 网页设计软件 ###

1.  文本编辑器
2.  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 8]
3.  ps
4.  Fireworks

### 五、网页制作主要相关技术 ###

![在这里插入图片描述][20190827233056114.png]

### 六、 网站建设基本流程 ###

![在这里插入图片描述][20190827233827214.png]

### 七、 网页的版式设计 ###

1.  布局：上下型结构，无框架局限式
2.  导航设计：一级导航栏+二级导航

### 八．网页的风格设计 ###

1.  网页配色  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 9]  
    一种主调色+点情色

### 九.网站 ###

1.  网站类型

> 1） 企业站（主要用于宣传和展示）  
> 2） 门户类网站（如：新浪、搜狐等）以新闻信息为主  
> 3） 商城类网站（如 淘宝，京东） 以商品为主  
> 4） 行业类网站 （如政府网站等） 后三个属于功能型网站；第一个是展示型网站

1.  网站设计规范

> 1） 字号：12px——13px——14px(正文)；20px(标题)  
> 2） 字体：微软雅黑、宋体（服务器自带的两种字体）  
> 3） 尺寸：企业站（宽度：1200px\_版心部分）；高度任意（根据内容而定）

eg:白色部分为版心  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 10]  
门户类网站，宽度为1004px,高度根据内容决定

> 4） 数据单位：px；  
> 5） 最低分辨率：72px;

案例一——导航栏

1.  确定版心1200的位置 ；调出标尺ctrl+r;右键单击后选择像素，用矩形选框工具看着宽度拉出宽度1200px的矩形框，大概放至中间位置
2.  宋体-无 14px以上使用平滑  
    微软雅黑-平滑  
    ![在这里插入图片描述][20190827233127477.png]
3.  唯品会案例中，上部未填充完整，使用矩形工具，按住ctrl+alt键可以将选中区域复制并移动  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 11]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 12]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 13]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 14]

### app界面设计 ###

1.  pc端 移动端
2.  界面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 15]
3.  移动端包括IOS 安卓  
    ios  
    ![在这里插入图片描述][2019082723315984.png]  
    1）ipone6 宽*高：750*1334px 分辨率：72px

![在这里插入图片描述][20190827233204564.png]![在这里插入图片描述][20190827233211276.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 16]  
2) 字体：华文黑体![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 17]  
3）字号：长文本（正文）：26px  
图标尺寸 512*512  
4) 颜色值![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 18]  
**Iponex**  
1）尺寸2436*1125像素  
**安卓**  
1）标签栏即主菜单栏；导航栏即菜单栏![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 19]  
2）设计尺寸：720\*1280![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 20]  
3）  
app页面设计案例

1.  圆角设计：矩形工具里的圆角工具，或者选择路径直接拉  
    ![在这里插入图片描述][20190827233247380.png]

![在这里插入图片描述][20190827233256896.png]  
在属性中点击链锁，可以调整单个圆角的半径

1.  ctrl+回车，操作结束后选中
2.  ctrl+alt+鼠标左键 复制相同框平移

### 工具复习 ###

1.  `磁吸`，多边形为直线
2.  `魔棒`有颜色不同时不一定能全部选中，快速选择工具可以选中
3.  `污点修复`工具，填充为前景色；污点画笔工具：alt选中想要填充的部分后涂抹；修补工具-选中区域后向其他部分拖动
4.  `笔刷`一般不使用硬笔刷  
    5.直接选择工具可以修改锚点所在的位置，移动工具可以移动，![在这里插入图片描述][20190827233308682.png]都是相对于`矩形工具`使用  
    6.![在这里插入图片描述][20190827233329128.png]  
    按住shift键选中两个图层，选择垂直居中  
    案例2
5.  矩形圆角工具选中后选择路径，ctrl+回车选中后，新建图层，填充颜色
6.  按住shift移动可以水平  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 21]

[20190827232908488.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4f24cf96d227435aae4d0c605154c55a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f6462f3a0f9949059f28a2313a17d286.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ad95e12a41104711b4c452dc707046eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/dfb9a1bc181c4f53ad1c4692638ac4e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e5a42557713a49db8483c3575a1ed114.png
[20190827232939478.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8b27f0230ca54e4dab6e3f859bb367d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ec8a2cc7184f493681b48ef38f0db08f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/44a6fcf7432b479d95cdd9db3365928f.png
[20190827232959475.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/de3cc21c007043e5a78d6229b5c769b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/faeddf2861cc4c969d8f105f24e1ac6a.png
[20190827233010558.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3289edd73e5b4662875aeca2add0be29.png
[20190827233015493.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3740c56d9c634dc18eaef1c5bd3caac8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/50e7683e3a70415f8e2345ebb8350be5.png
[20190827233038381.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/807e726ae7434bc786c95e2e620d690d.png
[2019082723304223.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/acb705ca8b8846f391833e52c68b6fd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4e4b64ed4d3c40c2ae0d7e7e15026d75.png
[20190827233056114.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/48ddcbde0dda4086a84d147b4c163585.png
[20190827233827214.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5f3a87ea83c948dc8c923d94d2680e19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4d06af8143b7413cbf40b9e4048d7805.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3fd85be35f3d40f0bdad32f0808cecdd.png
[20190827233127477.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1da298d75ae6497ba66fe58c923a63a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7450d1b67863449c84dfb2364318d874.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9c2735919bd14454943a299b4278e9f5.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c176e5d2a0ca44baa6ef0a973fad3eb7.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c0ee97f4991f43f8a916d7e39f98b2d1.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 15]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/066127b67a634ed8ba9cef6204dcd913.png
[2019082723315984.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/73644d6e51d54ebab38f466256958cac.png
[20190827233204564.png]: https://img-blog.csdnimg.cn/20190827233204564.png
[20190827233211276.png]: https://img-blog.csdnimg.cn/20190827233211276.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/90877b9a050e4eedb8e55d302b5d64cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 17]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/00371d6ac6b943c885e3a16ae5ddc277.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 18]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a54d714f6327463e86aac912d852865d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 19]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c006b35cc4b54199b1ad2641dac847ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 20]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/75e8d65933c34d7399ecbbd0d4834c8a.png
[20190827233247380.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f5019a399ad24659ae008dd6874afec4.png
[20190827233256896.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/51ef3a82dbac4da9802dac331f872773.png
[20190827233308682.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1a35023f463d446da9b4c8b7d6f5f2ea.png
[20190827233329128.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a90d7c0504d340459efbb4e57ad6b0a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 21]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1c2539b99a694e4b98b0c5d7ece363d9.jpg