2025/04/29 14:27:01
<div id="meta_content" class="rich_media_meta_list">
<span id="copyright_logo" class="wx_tap_link js_wx_tap_highlight rich_media_meta icon_appmsg_tag appmsg_title_tag weui-wa-hotarea">原创</span>
<span class="rich_media_meta rich_media_meta_text">
<span role="link" tabindex="0" id="js_author_name" class="wx_tap_link weui-wa-hotarea" datarewardsn="" datatimestamp="" datacanreward="0">江炜johnwayne</span>
</span>
<span class="rich_media_meta rich_media_meta_nickname" id="profileBt">
<a href="javascript:void(0);" class="wx_tap_link js_wx_tap_highlight weui-wa-hotarea" id="js_name">
江炜 johnwayne </a>
<div id="js_profile_card"></div>
</span>
<span id="meta_content_hide_info" class="">
<em id="publish_time" class="rich_media_meta rich_media_meta_text">2025年04月16日 22:07</em>
<em id="js_ip_wording_wrp" class="rich_media_meta rich_media_meta_text" role="option" aria-labelledby="js_a11y_op_ip_wording js_ip_wording" style="display: inline-block;"><span id="js_a11y_op_ip_wording" aria-hidden="true"></span><span aria-hidden="true" id="js_ip_wording">江苏</span></em>
</span>
</div>
<div class="rich_media_content js_underline_content defaultNoSetting fix_apple_default_style" id="js_content" style=""><p data-mpa-action-id="m9jzjgmd1l78" data-pm-slice="0 0 []" style="visibility: visible;"><span leaf="" style="font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 15px; visibility: visible;" data-mpa-action-id="m9jqmhs8rjr">大家好！我是江炜。</span></p><p data-mpa-action-id="m9jylp2616zy" data-pm-slice="0 0 []" style="visibility: visible;"><span leaf="" style="font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 15px; visibility: visible;" data-mpa-action-id="m9jqmhs8rjr"><br style="visibility: visible;"></span></p><p data-mpa-action-id="m9jz6mjs1mj6" data-pm-slice="0 0 []" mpa-font-style="m9jz6mjpu4n" style="font-size: 15px; visibility: visible;"><span leaf="" style="font-size: 15px; visibility: visible;">每次分享我的出海网站到群里或者即刻上，都会收到不少网站界面漂亮的好评。所以很多朋友很好奇一个程序员是如何把网站做到这么好看的，今天就来写一篇。</span></p><p data-mpa-action-id="m9jz6mjs1mj6" data-pm-slice="0 0 []" mpa-font-style="m9jz6mjpu4n" style="font-size: 15px; visibility: visible;"><span leaf="" style="font-size: 15px; visibility: visible;"><br style="visibility: visible;"></span></p><p style="visibility: visible;"><span leaf="" style="font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 15px; visibility: visible;">下面以最近做的吉卜力网站举例。</span></p><p style="visibility: visible;"><span leaf="" style="font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 15px; visibility: visible;">网站地址: </span><span leaf="" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]" style="font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 15px; visibility: visible;" mpa-font-style="m9jzahfu1h9j" data-mpa-action-id="m9jzahg4239z">https://ghiblio.art/</span></p><p style="visibility: visible;"><span leaf="" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]" style="font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 15px; visibility: visible;" mpa-font-style="m9jzahfu1h9j" data-mpa-action-id="m9jzahg4239z"><br style="visibility: visible;"></span></p><section style="text-align: center; visibility: visible;" nodeleaf=""><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInaSrURCiaNtWRBrMAA5J7MN4ldNkY18QEqic7iaW9bd1mk416GCHmIrMxg/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.5703703703703704" data-s="300,640" data-type="png" data-w="1080" type="block" data-imgfileid="100000038" data-original-style="null" data-index="1" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInaSrURCiaNtWRBrMAA5J7MN4ldNkY18QEqic7iaW9bd1mk416GCHmIrMxg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" style="height: auto !important; visibility: visible !important; width: 677px !important;" alt="图片" data-report-img-idx="0" data-fail="0"></section><p><span leaf="" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" mpa-font-style="m9jzahfu1h9j" data-mpa-action-id="m9jzahg4239z"><br></span></p><p><span leaf="" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" mpa-font-style="m9jzahfu1h9j" data-mpa-action-id="m9jzahg4239z"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">我的设计一般遵循一个流程：</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">第一步：<span textstyle="" style="font-weight: bold;">打底</span></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">第二步：<span textstyle="" style="font-weight: bold;">点缀</span></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">第三步：<span textstyle="" style="font-weight: bold;">升华</span></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">在Ghiblio Art里我是这样做的：</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">1、 打底：完成吉卜力风格基础配色</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">2、点缀：进度条、指针、图标等的定制</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">3、升华：完成整站风格统一性</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">为什么要分这三部呢，就是为了超出用户预期。</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">完成了第一步，这是一个在设计上合格的网站。</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">完成了第二步，这是一个设计有点出彩的网站。</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">完成了第三步，这是一个令人惊叹，设计专业的网站。</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">不断超越用户预期才能让用户觉得这是个设计很出彩的网站。</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">这次我们就来看看ChatGPT 4o强大的图片能力怎么助力网站的设计？</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;"><br></span></p><h3 data-pm-slice="0 0 []" style="-webkit-tap-highlight-color: transparent;margin: 0px 0px 24px;padding: 0px;outline: 0px;font-weight: 400;font-size: 20px;max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word !important;color: rgba(0, 0, 0, 0.9);font-family: "PingFang SC", system-ui, -apple-system, "system-ui", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;line-height: 1.6em;" mpa-font-style="m9k03bgj1xkq" data-mpa-action-id="m9k03bgurl9" class="js_darkmode__0"><strong style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;background-color: rgb(255, 255, 255);font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;" class="js_darkmode__1"><span leaf="" style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span textstyle="" style="font-weight: bold;">第一步：打底</span></span></strong></h3><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">打底一般情况下不需要自己设计，选组件库就行了。</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">我们这里使用流行的Shadcn UI组件。</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">然后定义主题色使其契合吉卜力风格，这里使用GPT 4o生成参照风格：</span></p><section style="text-align: center;" nodeleaf=""><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInPjC47icdDEsAIGJx43ictPZ9SUjibO6CicnXB7FOFkXgJ04uLOtO7SsYIg/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="1.4775413711583925" data-s="300,640" data-type="png" data-w="846" type="block" data-imgfileid="100000019" data-original-style="null" data-index="2" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInPjC47icdDEsAIGJx43ictPZ9SUjibO6CicnXB7FOFkXgJ04uLOtO7SsYIg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" style="height: auto !important; visibility: visible !important; width: 677px !important;" alt="图片" data-report-img-idx="1" data-fail="0"></section><p><span leaf="" style="font-size: 15px;">根据参照风格提炼色值变量，修改shadcn主题色变量。</span></p><section><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;"><br></span></section><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;"><br></span></p><section mpa-font-style="m9k03g1ofib" style="font-size: 20px;" data-mpa-action-id="m9k03g27q9u" data-pm-slice="0 0 []"><strong style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;background-color: rgb(255, 255, 255);font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;" class="js_darkmode__2"><span leaf="" style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;" data-pm-slice="1 1 ["para",{"tagName":"h3","attributes":{"data-pm-slice":"0 0 []","style":"-webkit-tap-highlight-color: transparent; margin: 0px 0px 24px; padding: 0px; outline: 0px; font-weight: 400; font-size: 24px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgba(0, 0, 0, 0.9); font-family: \"PingFang SC\", system-ui, -apple-system, \"system-ui\", \"Helvetica Neue\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; line-height: 1.6em;","mpa-font-style":"m9jztsit15f","data-mpa-action-id":"m9jztsjd1zxl"},"namespaceURI":"http://www.w3.org/1999/xhtml"},"node",{"tagName":"strong","attributes":{"style":"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; background-color: rgb(255, 255, 255); font-weight: bold; color: rgb(75, 110, 245); font-family: PingFangSC-Light; letter-spacing: 0.5px; box-sizing: border-box !important; overflow-wrap: break-word !important;"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: bold;">第二步：点缀</span></span></strong></section><section mpa-font-style="m9jzuq9ngfq" style="font-size: 24px;" data-mpa-action-id="m9jzuqad124g" data-pm-slice="0 0 []"><strong style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;background-color: rgb(255, 255, 255);font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;" class="js_darkmode__3"><span leaf="" style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;" data-pm-slice="1 1 ["para",{"tagName":"h3","attributes":{"data-pm-slice":"0 0 []","style":"-webkit-tap-highlight-color: transparent; margin: 0px 0px 24px; padding: 0px; outline: 0px; font-weight: 400; font-size: 24px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgba(0, 0, 0, 0.9); font-family: \"PingFang SC\", system-ui, -apple-system, \"system-ui\", \"Helvetica Neue\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; line-height: 1.6em;","mpa-font-style":"m9jztsit15f","data-mpa-action-id":"m9jztsjd1zxl"},"namespaceURI":"http://www.w3.org/1999/xhtml"},"node",{"tagName":"strong","attributes":{"style":"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; background-color: rgb(255, 255, 255); font-weight: bold; color: rgb(75, 110, 245); font-family: PingFangSC-Light; letter-spacing: 0.5px; box-sizing: border-box !important; overflow-wrap: break-word !important;"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></strong></section><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">网站所有的图片和图标全部使用GPT 4o实现。</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: bold;">第一版的LOGO：</span></span></p><section style="text-align: center;padding: 0.5em;" nodeleaf="" data-mpa-action-id="m9ju440524qd" data-pm-slice="0 0 []"><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInV2Kq7qh72RibvdatBnGacZXw031jNGIL9uoT5M9Qy4MeBHPXibpLeoXA/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.7638095238095238" data-s="300,640" data-type="png" data-w="1050" style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px; height: auto !important; visibility: visible !important; width: 660px !important;" type="block" data-imgfileid="100000021" data-original-style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px;" data-index="3" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInV2Kq7qh72RibvdatBnGacZXw031jNGIL9uoT5M9Qy4MeBHPXibpLeoXA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" alt="图片" data-report-img-idx="2" data-fail="0"></section><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: bold;">首页背景大图：</span></span></p><section style="text-align: center;padding: 0.5em;" nodeleaf="" data-mpa-action-id="m9jtm0j6lge" data-pm-slice="0 0 []"><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInmonH4Xsib6VfY77y1UexhTSbs96uDvMOKSTHHa48vU7NElIZ5wTwia6A/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.6194444444444445" data-s="300,640" data-type="png" data-w="1080" style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px; height: auto !important; visibility: visible !important; width: 660px !important;" type="block" data-imgfileid="100000018" data-original-style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px;" data-index="4" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInmonH4Xsib6VfY77y1UexhTSbs96uDvMOKSTHHa48vU7NElIZ5wTwia6A/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" alt="图片" data-report-img-idx="3" data-fail="0"></section><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: bold;">字体图标：</span></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">我们以往使用字体图标时都是去找iconfont，但是图标表达的意义常常不能精准匹配文案。<span textstyle="" style="font-weight: bold;">GPT具备了理解能力</span>，非常好，先让他理解文案再出图标，直接把features的介绍文案截图丢给GPT：</span></p><section style="text-align: center;" nodeleaf=""><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInWiabULBEhFCOUVrUsahwOibDsye5icU2FHBByrXhfiaUC1CdiaVZyDJSIqA/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.6287037037037037" data-s="300,640" data-type="png" data-w="1080" type="block" data-imgfileid="100000022" data-original-style="null" data-index="5" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInWiabULBEhFCOUVrUsahwOibDsye5icU2FHBByrXhfiaUC1CdiaVZyDJSIqA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" style="height: auto !important; visibility: visible !important; width: 677px !important;" alt="图片" data-report-img-idx="4" data-fail="0"></section><p><span leaf="" data-mpa-action-id="m9jvqr5ro36" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">惊到了！每一个图标和文案完美契合！</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;"><br></span></p><p><span leaf="" data-mpa-action-id="m9jvqr5rrq4" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;">还能出各种套图：</span></p><section style="text-align: center;" nodeleaf=""><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInmOG6gJvCYI16yQ5GmrqKbY2hRYOEw248PhPUmSAG2n6uiaVMl3Prl0w/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.5925925925925926" data-s="300,640" data-type="png" data-w="1080" type="block" data-imgfileid="100000023" data-original-style="null" data-index="6" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInmOG6gJvCYI16yQ5GmrqKbY2hRYOEw248PhPUmSAG2n6uiaVMl3Prl0w/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" style="height: auto !important; visibility: visible !important; width: 677px !important;" alt="图片" data-report-img-idx="5" data-fail="0"></section><section style="text-align: center;" nodeleaf=""><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInarsVrZcPIgCNfzGGTC8C550cDIef3VwgCzkqVjUhBSv9ic0I2gFRQJw/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.6546296296296297" data-s="300,640" data-type="png" data-w="1080" type="block" data-imgfileid="100000024" data-original-style="null" data-index="7" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInarsVrZcPIgCNfzGGTC8C550cDIef3VwgCzkqVjUhBSv9ic0I2gFRQJw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" style="height: auto !important; visibility: visible !important; width: 677px !important;" alt="图片" data-report-img-idx="6" data-fail="0"></section><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">完美！风格统一，而且无比高效！</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: bold;">图片生成进度条设计</span></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">我的想法是吉卜力图片生成等待时间有点长，需要有好的loading来减缓用户的焦虑。我在想是否可以进度条每涨一点后面的图标从一颗种子慢慢长大为一棵树。</span></p><section style="text-align: center;padding: 0.5em;" nodeleaf="" data-mpa-action-id="m9juhmblblr" data-pm-slice="0 0 []"><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInzgQ38cMBdC9D4N5JgUCregOp6SJ5cUKdzD1n6rBdqfD9Y7cvpG1Xkg/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.7435185185185185" data-s="300,640" data-type="png" data-w="1080" style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px; height: auto !important; visibility: visible !important; width: 660px !important;" type="block" data-imgfileid="100000025" data-original-style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px;" data-index="8" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInzgQ38cMBdC9D4N5JgUCregOp6SJ5cUKdzD1n6rBdqfD9Y7cvpG1Xkg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" alt="图片" data-report-img-idx="7" data-fail="0"></section><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">强吧！</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">接着武装到每个细节：</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: bold;">错误提示图标</span></span></p><section style="text-align: center;padding: 0.5em;" nodeleaf="" data-mpa-action-id="m9juksk232p" data-pm-slice="0 0 []"><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInatic2kic6NoTujictTFicOYALKJ7c7d3sWicevviaKLlWyKNEPNWia8HoLaJA/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.7898148148148149" data-s="300,640" data-type="png" data-w="1080" style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px; height: auto !important; visibility: visible !important; width: 660px !important;" type="block" data-imgfileid="100000026" data-original-style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px;" data-index="9" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInatic2kic6NoTujictTFicOYALKJ7c7d3sWicevviaKLlWyKNEPNWia8HoLaJA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" alt="图片" data-report-img-idx="8" data-fail="0"></section><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: bold;">返回顶端图标</span></span></p><section style="text-align: center;padding: 0.5em;" nodeleaf="" data-mpa-action-id="m9jundq7nq0" data-pm-slice="0 0 []"><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInXNt8Q6puwDhib1G8gdU80gJMyxY5l6IQ1dU7dy1qku0ZXrqJfGrymug/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.7759259259259259" data-s="300,640" data-type="png" data-w="1080" style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px; height: auto !important; visibility: visible !important; width: 660px !important;" type="block" data-imgfileid="100000027" data-original-style="box-shadow: rgb(210, 210, 210) 0px 0px 0.5em 0px;" data-index="10" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInXNt8Q6puwDhib1G8gdU80gJMyxY5l6IQ1dU7dy1qku0ZXrqJfGrymug/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" alt="图片" data-report-img-idx="9" data-fail="0"></section><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">至此为止，从设计角度，网站已经是个很漂亮的吉卜力风格了。</span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><section mpa-font-style="m9k03md81ko9" style="font-size: 20px;" data-mpa-action-id="m9k03mdqrz0" data-pm-slice="0 0 []"><strong style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;background-color: rgb(255, 255, 255);font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;" class="js_darkmode__4"><span leaf="" style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;" data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{"mpa-font-style":"m9jzuq9ngfq","style":"font-size: 24px;","data-mpa-action-id":"m9jzuqad124g","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"},"node",{"tagName":"strong","attributes":{"style":"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; background-color: rgb(255, 255, 255); font-weight: bold; color: rgb(75, 110, 245); font-family: PingFangSC-Light; letter-spacing: 0.5px; box-sizing: border-box !important; overflow-wrap: break-word !important;"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: bold;">第三步：升华</span></span></strong></section><section mpa-font-style="m9jzvgvg1ikt" style="font-size: 24px;" data-mpa-action-id="m9jzvgw5122r" data-pm-slice="0 0 []"><strong style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;background-color: rgb(255, 255, 255);font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;" class="js_darkmode__5"><span leaf="" style="-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;max-width: 100%;font-weight: bold;color: rgb(75, 110, 245);font-family: PingFangSC-Light;letter-spacing: 0.5px;box-sizing: border-box !important;overflow-wrap: break-word !important;" data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{"mpa-font-style":"m9jzuq9ngfq","style":"font-size: 24px;","data-mpa-action-id":"m9jzuqad124g","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"},"node",{"tagName":"strong","attributes":{"style":"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; background-color: rgb(255, 255, 255); font-weight: bold; color: rgb(75, 110, 245); font-family: PingFangSC-Light; letter-spacing: 0.5px; box-sizing: border-box !important; overflow-wrap: break-word !important;"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></strong></section><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">很多人认为设计好不好，全看个人喜好。实际并不是，好的设计有自己的方法论，有自己的设计原则。当你不知道这个原则时，你只能靠直觉去判断。当大家都靠直觉去判断时，你就会以为设计没有标准。</span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">我不是专业的UI设计师，但是用多了前端UI库，去了解下UI库的设计原理，其实也能懂一些基本原则。</span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">这里举两个原则：</span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">1、<span textstyle="" style="font-weight: bold;">自然</span></span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span leaf="" style="font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{"mpa-font-style":"m9juu4r59pi","style":"font-size: 20px;","data-mpa-action-id":"m9juu4re1x9c","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]" data-mpa-action-id="m9jv4fyzqdi">网站</span><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__6"><span leaf="">界面设计中最重要的视觉要素，包括布局、按钮、图标、动画等，应符合自然规律，比如有光线的地方阴影的一致性等等</span></span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__7"><span leaf="">2、<span textstyle="" style="font-weight: bold;">确定性</span></span></span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__8"><span leaf=""><span textstyle="" style="font-weight: normal;">用户在网站上进行操作时，不要让用户迷惑。一致的外观和交互，减少用户的学习成本，降低认知和操作成本。</span></span></span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__9"><span leaf=""><br></span></span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__10"><span leaf=""><span textstyle="" style="font-weight: normal;">这里举两个例子：</span></span></span></p><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__11"><span leaf=""><span textstyle="" style="font-weight: normal;">作品页的页面loading，使用上了叶子到树苗到树这样变化的一个过程，这就是和其他地方的交互保持了一致性。</span></span></span></p><section style="text-align: center;" nodeleaf=""><img class="rich_pages wxw-img" data-imgfileid="100000028" data-ratio="0.6930022573363431" data-s="300,640" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInDNzmLaAuK17jW6gUHBazA4HEyZUItnhTbVlkK8Jo560kl9kMh1ADDw/640?wx_fmt=png&from=appmsg" data-type="png" data-w="886" type="block" data-original-style="null" data-index="11" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInDNzmLaAuK17jW6gUHBazA4HEyZUItnhTbVlkK8Jo560kl9kMh1ADDw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" style="height: auto !important; visibility: visible !important; width: 677px !important;" alt="图片" data-report-img-idx="10" data-fail="0"></section><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__12"><span leaf=""><span textstyle="" style="font-weight: normal;">加载更多的时候也是用了一棵树那作为呼应：</span></span></span></p><section style="text-align: center;" nodeleaf=""><img class="rich_pages wxw-img" data-imgfileid="100000029" data-ratio="0.600925925925926" data-s="300,640" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInGXHul6icoMCwm8Q0dubemE3gMOSGgQKhjKUo4OjFicw8Mc84NW0dYvBQ/640?wx_fmt=png&from=appmsg" data-type="png" data-w="1080" type="block" data-original-style="null" data-index="12" src="https://mmbiz.qpic.cn/sz_mmbiz_png/FHwL1EwdM3eZsFHiaiaxT5pms9jghBDEInGXHul6icoMCwm8Q0dubemE3gMOSGgQKhjKUo4OjFicw8Mc84NW0dYvBQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" _width="677px" style="height: auto !important; visibility: visible !important; width: 677px !important;" alt="图片" data-report-img-idx="11" data-fail="0"></section><p mpa-font-style="m9juu4r59pi" style="font-size: 20px;" data-mpa-action-id="m9juu4re1x9c" data-pm-slice="0 0 []"><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__13"><span leaf=""><br></span></span></p><section><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__14"><span leaf="" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{"mpa-font-style":"m9juu4r59pi","style":"font-size: 20px;","data-mpa-action-id":"m9juu4re1x9c","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"},"node",{"tagName":"span","attributes":{"style":"color: rgba(0, 0, 0, 0.88); font-family: Optima-Regular, PingFangTC-light; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: normal;">升华这一步其实是最难的，因为把设计原理翻译成人话就是"审美"，对于程序员出身的独立开发者来说，这个可能确实是短板。我觉得一方面了解下组件库的设计原理，比如ant design的设计价值观文档，另一方面多收藏好看的网站，看多了审美就上来了。</span></span></span></section><section><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__15"><span leaf="" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{"mpa-font-style":"m9juu4r59pi","style":"font-size: 20px;","data-mpa-action-id":"m9juu4re1x9c","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"},"node",{"tagName":"span","attributes":{"style":"color: rgba(0, 0, 0, 0.88); font-family: Optima-Regular, PingFangTC-light; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></span></section><section><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__16"><span leaf="" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{"mpa-font-style":"m9juu4r59pi","style":"font-size: 20px;","data-mpa-action-id":"m9juu4re1x9c","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"},"node",{"tagName":"span","attributes":{"style":"color: rgba(0, 0, 0, 0.88); font-family: Optima-Regular, PingFangTC-light; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: normal;">利用GPT 4o能力做到第二步，再注意下统一性，你的网站就已经很漂亮了。</span></span></span></section><section><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__17"><span leaf="" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{"mpa-font-style":"m9juu4r59pi","style":"font-size: 20px;","data-mpa-action-id":"m9juu4re1x9c","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"},"node",{"tagName":"span","attributes":{"style":"color: rgba(0, 0, 0, 0.88); font-family: Optima-Regular, PingFangTC-light; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></span></section><section><span style="color: rgba(0, 0, 0, 0.88);font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: left;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;display: inline !important;float: none;" data-pm-slice="0 0 []" class="js_darkmode__18"><span leaf="" data-pm-slice="1 1 ["para",{"tagName":"p","attributes":{"mpa-font-style":"m9juu4r59pi","style":"font-size: 20px;","data-mpa-action-id":"m9juu4re1x9c","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"},"node",{"tagName":"span","attributes":{"style":"color: rgba(0, 0, 0, 0.88); font-family: Optima-Regular, PingFangTC-light; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;","data-pm-slice":"0 0 []"},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span textstyle="" style="font-weight: normal;">今天就先聊到这里，希望这篇文章能帮到做AI独立出海的朋友们。</span></span></span></section></div>
2025/04/29 14:28:19
我的设计一般遵循一个流程：
第一步：打底
第二步：点缀
第三步：升华
在Ghiblio Art里我是这样做的：
1、 打底：完成吉卜力风格基础配色
2、点缀：进度条、指针、图标等的定制
3、升华：完成整站风格统一性
为什么要分这三部呢，就是为了超出用户预期。
完成了第一步，这是一个在设计上合格的网站。
完成了第二步，这是一个设计有点出彩的网站。
完成了第三步，这是一个令人惊叹，设计专业的网站。
不断超越用户预期才能让用户觉得这是个设计很出彩的网站。