[[UIflower Drafts.canvas]] 越熟悉了解的越多，在设计[[页面]]的时候就会越得心易手。 ## Web UI 设计 ^c5559f ### 最佳实践 - [[网页设计的视觉风格]] - [[如何让界面设计有品牌感？]] - [[Banner 视觉设计手法]] ### 网页类型 - [[全屏滚动类（PPT类）]] - [[一屏到底]] ### 组件 Components - [x] [[图标 Icon]] - [x] [[按钮 Button]] - [ ] [[消息提示 Toast&Message]] - [ ] [[面包屑 Breadcrumb]] - [ ] [[步骤条]] - [ ] [[分页]] - [ ] [[表格 Table]] - [x] [[下拉菜单 Dropdown]] - [x] [[选择框 Select]] - [x] [[气泡卡片 Popover]] ### 模块 Section 以 eagle 和 uipatterns 为指导 - [[首页通用模块]] - [[焦点区域 Hero Section]] - [[顶部导航栏 Top Navigation bar]] - [[快捷入口 Section]] - [[特色模块 Featured]] - [[关于我们 About Section]] - [[客户谏言模块 Testimonial Section]] - [[客户案例模块 Customer Cases]] - [[新闻模块 News Section]] - [[问答模块 FAQ Section]] - [[底部导航 Footer Section]] - [[新功能上线 What‘s New]] ### 页面 Pages - [x] [[登录 Login]] - [ ] [[注册 Sign up]] - [ ] [[价格方案 Pricing]] - [ ] [[新闻详情 News post]] - [ ] [[系统列表页]] - [ ] [[系统详情页]] - [ ] [[更新日志 Changelogs]] - [ ] [[单据历史与动态]] - [ ] [[仪表盘工作台 Dashboard]] ### 流程 FLow patterns - [[文件图片管理]] - [[忘记找回密码]] - [[筛选设计]] ### 特殊状态 [[缺省空白状态]] ### 动效 - [[UI 动效设计]] ## 其他设备平台 - [[车载 UI HMI]] - [[大屏 UI]] - [[大型设备 UI]] ## 灵感 ### Web 模式库 #### 组件类 [[设计系统 Design system#^5c0c1d|去设计系统页面查看]] #### 静态类 ##### Muzli - [Search by Muzli](https://search.muz.li/) 聚合类的搜索，把 behance、dribbble 啥的都聚合了。 ##### Uitab （已失效） - [Design Collection | UI Tab](https://www.uitab.io/collection) 把 Dribbble 的截图做了个截图  ##### Lookup. Design - [lookup.design ui examples](https://lookup.design/search?query=button&page=3) 和我想法十分接近 ##### Screenlane - [Screenlane 1. Web & mobile UI design inspiration](https://screenlane.com/) 非常成熟  ##### SaaS Pages - [SaaS Pages](https://saaspages.xyz/blocks/headers)  ##### Calltoidea - [Calltoidea ](https://calltoidea.com/) 经典灵感站 ##### Collect ui - [Collect UI](https://collectui.com/designs) 也是一个经典 ##### Web frame 看着也不错，截图都来自于 B 端产品，有 dex 群友推荐。 - [Webframe](https://webframe.xyz/categories/login)  ##### 其他 - [4555 Landing Page n - Lapa Ninja](https://www.lapa.ninja/) 专注落地页 - [Portfolio Inspiration](https://pfolios.net/?ref=producthunt) 简历模式 - [Popular Websites 1. Webflow](https://webflow.com/discover/popular)  Webflow 也有很多案例 - [网页常见的控件 - 模板](https://modao.cc/square/mtkb3i9vewjkmmhy)墨刀有一个素材广场 #### 交互类 1. [Clone | Flowbase](https://www.flowbase.co/clone?tags=navigations) 很多交互类的案例 ![[Pasted image 20210227203539.png]] 2. [UXArchive - Made by Waldo](https://uxarchive.com/) 专注流程设计模式 ![[Pasted image 20210803215119.png]] 3. [Webflow Interactions | NoCodeTribe](https://nocodetribe.com/webflow-interactions) ![[Pasted image 20210227205819.png]] #### Web 风格库 1. [🌘 Dark Mode Design – Handpicked website inspiration](https://www.darkmodedesign.com/?2bf851fe_page=2) 专门收集暗黑风格的 ### 推广营销邮件 [Inboxflows](https://inboxflows.com/) 挺全的，按产品类型、产品、或者行业分类。 [Really Good Emails](https://reallygoodemails.com/) ### App 模式库 - [Mobbin Browse iOS Apps](https://mobbin.design/browse/ios/apps) 有群友推荐，说这个比较好。 - [SCRNSHTS – App store的上架图](https://scrnshts.club/) - ![[Pasted image 20211127124828.png]] - [UIPatterns.io | Curated list of interactive mobile design patterns](http://uipatterns.io/) 移动端为主的，可交互的，设计模式  - [美叶-为设计师提供有价值的设计参考 (meiye.art)](https://www.meiye.art/) - [Mobile Design Patterns - Pttrns](https://pttrns.com/) 收费了 2021-10 月 - [UIII.Club | UIII灵感俱乐部](https://uiii.club/apps) ![[Pasted image 20211017132629.png]] - 可以根据 APP 查找 - 根据页面类型查找 ## 资源 ### 教程类 - [Checklist Design - A collection of the best design practices.](https://www.checklist.design/) - 和我的想法最接近的一个，每种模式有灵感、有文章、有最佳实践。 - 20220504 不过更新频率似乎不高，但是框架搭的很好 - [UI Patterns & Inspiration - UX Library](https://www.uxlibrary.org/explore/ui-design/ui-patterns-and-inspiration) 聚合所有这一类的网站 - [Patterns - Goldman Sachs Design (gs.com)](https://design.gs.com/patterns) - 比较偏学术性的组件与设计模式，感觉很适合 B 端 2021 0925 - 也是把自己一直想做的事干了，有在缓慢的更新中 20220504 - 确实挺详细的202303再看。看了一篇Filter的，从Web到移动端都有很多案例。 - [UI Guideline - Component Standardization](https://www.uiguideline.com/components) 做的很全，甚至组件名称叫法统计，但是是收费的，作者投入也比较大。1年要50 60 刀。 基于 39 个最流行的参考系统的 UI 组件设计/代码标准化的权威指南。 - [UI Playbook](https://uiplaybook.dev/) ^d43d04 - 作者整理了 UI 组件的知识，精致小巧。 - 不过视乎不怎么更新了20220504 - 202303134还是不更新。 - [设计模式·导读 · 语雀 (yuque.com)](https://www.yuque.com/ant-design/design-pattern/intro) Ant design 出品的，看着还不错20210915 ### 源文件 - [Figma templates, design systems and UI kits (setproduct.com)](https://setproduct.com/) 一个专门做模板的外包团队，基本都是 Figma 源文件。