UI Design Internship Log | Nanjing Youqifu Industry Consulting Quotation Platform
Internship Job Description
I worked as a UI design intern at Nanjing Youqifu Information Technology Co., Ltd. The company's core product is an industry consulting and asset transaction quotation platform software, focusing on vertical scenarios such as enterprise-level asset transfer and industry service consulting. It creates an online trading platform that combines B-end service attributes with C-end experience, and builds transaction trust through systems such as "authenticity guarantee" to provide standardized information matching and transaction guarantee services for both supply and demand sides.
The following is a daily internship work record, professional gains, and reflection summary from August 24th to August 28th:
---
Monday14 Sep, first day on the job : Business integration and fidelity module prototype launched.
Daily work content
参观公司，了解大致业务，认识公司职员
1. Job Handover and Business Review: Complete the work handover on the first day of employment, and fully transfer the project source files, design specifications, and version iteration progress with the previous designer; review the V2.5 version work list issued by the product manager, clarify the business positioning, page scope, and core logic of the "Authenticity Guarantee" function module, and quickly establish a comprehensive understanding of the platform's asset trading business.
 |
| Handing over with UI colleagues |
 |
| Communication |
 |
| Join the company's back-end management |
 |
| app configuration |
 |
| Product manager outputs functional specifications |
2. High-fidelity prototype design implementation: Based on the existing Axure low-fidelity prototyping framework, high-fidelity UI optimization of the fidelity guarantee module was carried out using Adobe XD, covering 8 core business pages: product management, product listing/delisting, moving to the recycle bin, refund application, product details, payment instructions, payment success, and asset list; the focus was on completing the high-fidelity output of the **fidelity guarantee pop-up component**, while simultaneously standardizing the page visual hierarchy, control styles, and pop-up interaction logic.
Learning and Gains
- Quickly grasped the business logic framework of industrial transaction platforms, understood the product value of "authenticity guarantee" as the trust infrastructure of the platform, and learned to break down UI design requirements from the perspective of business objectives, rather than simply focusing on visual presentation.
- We became familiar with the standardized process of transforming low-fidelity prototypes into high-fidelity prototypes and understood the efficiency value of component reuse and grid unification in the design of platform-based products.
Reflection and Improvement
- Insufficient understanding of business rules and terms; the hierarchical division of rule-related information in the initial prototype was not clear enough. It is necessary to read the product requirements document in advance to align business ambiguities and reduce design rework.
- Insufficient awareness of tool selection and prediction. Before starting a project, it is necessary to assess the compatibility between the design tools and the project complexity to avoid changing tools midway and slowing down the output pace.
Tuesday15 Sep End-to-End Iteration : Visual Standard Unification and Module Experience Optimization
Daily work content
We conducted a full-link iterative optimization of the platform login and registration, margin deposit business, asset module, and overall UI system, and completed the prototype version iteration of the V2.5 margin deposit management module (originally made using Adobe XD, adjusted to use Figma):
 |
| Adobe XD |
 |
| Recreated in Figma |
 |
| 小程序原有页面（需简化有品牌特色） |
 |
| Improved |
2. Naming and Labeling Standards for Margin Deposit Business : Complete the unified revision of the naming of "Genuine Margin" related businesses, optimize the visual weight and style specifications of the "Genuine Guarantee" label, enhance the label's recognizability, and achieve unified alignment with the global UI style.
 |
| 尝试设计 |
 |
| 最终确认 |
3. Asset Module Functionality Expansion : A new asset search page has been added to improve the user path for finding and browsing assets; in line with the product positioning of the second-hand industry, the page information hierarchy and functional module layout have been optimized to improve asset retrieval efficiency.
4. Refinement of global UI components : Fine-tune basic components such as buttons, labels, and cards, unify the brand visual system with blue and purple as the main color, and enhance the platform's professionalism and enterprise service attributes.
5. Refinement of Payment Details and Coverage Pop-ups : Refine the layout of the payment details page, optimize the layout logic of business fields, status information, and operation areas; improve the visual appeal of the coverage description pop-up, standardize the inner margins, title levels, and text segmentation formats of the pop-up, unify the color scheme of pop-up components, and enhance the readability of rule-related information.
 |
| 提醒注意到可跳转条款需有特殊颜色标注 |
6. Product Details Page Module Restructuring: The original deposit payment button at the top of the product details page has been removed, and a new brand guarantee prompt section has been added and placed in the original button position. This section presents the platform's guarantee information in a modular format, strengthening the transmission of trust perception regarding the platform.
 |
| 品牌保障图标 |
Learning and Gains
- - I mastered the implementation methods of global visual specifications for B-end products and understood the role of component reuse and style consistency in improving the iteration efficiency of multi-page products.
- - We established a mindset of "design serving business goals": the module adjustments on the product details page are essentially an optimization of the trust conversion path, reducing user decision-making costs by ensuring information is presented upfront.
- - The design principles for rule-based information can be summarized as follows: improve the readability of long text pop-ups and reduce the user's understanding threshold through hierarchical division, white space control, and visual partitioning.
Reflection and Improvement
- - The filtering logic on the asset search page is not comprehensive and does not fully cover the multi-dimensional filtering needs of industrial assets. The filtering dimensions need to be supplemented in the future based on the product requirements document.
- - There is insufficient awareness of component specification accumulation. Components optimized on the same day were not synchronized to the design system. In the future, we need to "iterate one and accumulate one" to gradually improve the platform component library.
Wednesday16 Sep Process Standardization and Competitive Product Research : Strengthening Design Methodology
Daily work content
1. Business rule verification and review : Complete the full review of the clause annotations in the authenticity management module, verify the consistency between the design draft and the business rules, correct the problems of mismatched rule expressions and misaligned information levels, and ensure the business accuracy of the design output.
2. Design process system training : Participate in the company's basic design process training, clarify that UI design must strictly follow the functional design principles of the requirements document, and master the full process specifications and delivery standards of "requirements review - prototype design - interaction review - visual implementation - development review".
3. Competitive UI Research and Analysis : We selected four similar asset trading mini-programs—JD Auction, Alibaba Auction, Hotel Home, and China Auction Platform—and dissected them from five dimensions: page layout, button interaction, form design, pop-up logic, and filtering components. We analyzed the advantages and disadvantages of each module and identified design points that could be learned from, forming a structured competitive analysis note to provide a reference for the platform's UI redesign.
4. Login process experience optimization : The login pop-up window was redesigned. After comparing the login modes of similar products on the market, a lightweight solution of one-click login with mobile phone number was adopted, the cumbersome operation of account and password registration was eliminated, the user login path was shortened, and the final optimization solution for the login process was determined.（重点强调保留手机号一键登录）
 |
| 最终简约登录页 |
Learning and Gains
- - A standardized design process awareness was established, clarifying that UI design is not purely visual creation, but functional design centered on needs, requiring dual responsibility for business logic and user experience.
- - Mastering structured competitive analysis methods enables us to break down surface styles into underlying interaction logic and effectively extract reusable design strategies.
- - Understood the value of lightweight design: The shorter the login path for transactional products, the lower the user conversion rate. The design should prioritize reducing the entry barrier for users.
Reflection and Improvement
- - The depth of competitive analysis needs to be strengthened. Currently, it focuses more on the visual and interactive aspects, with insufficient analysis of the underlying business logic and user profiles. Future competitive research needs to be combined with product positioning for in-depth deduction.
- - Insufficient understanding of requirements beforehand; some rule deviations were only discovered during the review process. Going forward, a full review of requirements needs to be completed before the design process begins to align any points of ambiguity in advance.
In-depth analysis of competitors on Thursday17 Sep : The underlying logic of information display and interaction
Daily work content
- We selected two similar competing products, Alibaba Auction and Zhidian.com Mini Program, for in-depth page analysis. We focused on Alibaba Auction and dissected its entire design process, concentrating on three core dimensions: card information presentation, page layout logic, and navigation interaction mode. We output in-depth analysis conclusions and design insights, which were compiled into a learning summary for the day.
Learning and Gains
1. Design methodology for high-density information pages: Pages with information output as their core should not overemphasize visual decoration, but should ensure content clarity through reasonable white space and hierarchical division; for industrial products with high information density, a balance should be found between information completeness and browsing experience to avoid excessive compactness that causes reading pressure.
2. User-centric design thinking: Design should not only focus on visual presentation, but also simplify the operation process from the user's perspective, reducing the cost of understanding and operation; at the same time, it should take into account business objectives, guiding users to complete conversion behaviors such as placing orders and registering through design, so as to achieve a balance between experience and business.
3. Design strategy for pop-ups and navigation: After multiple page navigations, secondary navigation can be stored away and brought up by a floating button. This simplifies the visual burden of the current page without interrupting the user's operation path and avoids the experience interruption caused by frequent back navigation.
Reflection and Improvement
- - In the past, the control of information density was not precise enough, which easily led to problems such as information piling up or excessive white space. In the future, it is necessary to judge the information priority based on user scenarios and reasonably control the page density.
- - There was insufficient systematic thinking about navigation design. When designing pages in the future, we need to consider the navigation experience throughout the entire process, rather than just focusing on the visual effects of a single page.
Identity Segmentation Design on Friday18 Sep: Scenario-based Design and Competitor Intent Deduction
Daily work content
1. Individual/Enterprise Identity Selection Page Design: Design an identity selection and routing page to cater to the dual attributes of individual and enterprise users on the platform. Match different operation paths and function permissions for the two types of users, optimize the user's first step experience when entering the platform, and realize scenario-based function routing.
 |
| Multiple styles are available for selection. |
 |
| Final confirmation |
2. Competitive Product Design Intent Analysis : Analyze the elements of Beike Home's identity selection page, examine its layout logic, visual guidance, and interactive feedback design ideas, extract identity diversion design methods suitable for industry consulting platforms, and use these methods to improve our own product design.
Learning and Gains
- - Understood the core design of the identity-based traffic flow page: completing scenario matching in the initial stage of user entry into the product, with different identities corresponding to different functional architectures and information displays, is a key design node for B+C hybrid attribute products.
- - Master the analytical method of "design intent deduction": When looking at competitor pages, you can't just stay on the surface style. You need to deduce the user scenarios and business goals behind them in order to truly absorb reusable design logic.
Reflection and Improvement
- - The differentiation design of the identity selection page is insufficient, and the visual distinction between individuals and enterprises is weak. In the future, the identity perception can be strengthened by differentiating icons, copy, and visual weight.
- - The understanding of B-end user scenarios is relatively shallow. Going forward, we need to proactively understand the usage habits and decision-making paths of enterprise users to improve the scenario adaptability of B-end designs.
本周我深度参与产品 V2.5 至 V2.6 版本的迭代设计，工作范围覆盖 UI 设计规范体系搭建、报价交易全链路页面设计、类目信息架构重构、品牌图标体系升级、运营物料设计等多个维度，完整经历从需求对齐、方案设计、迭代优化到交付自查的全流程。
8 月 31 日 规范体系沉淀：小程序 UI 设计标准搭建与组件化思维建立
当日工作内容
- 小程序 UI 设计规范体系梳理：参考站酷平台成熟商业 UI 规范案例，结合产业交易类小程序的产品属性，系统梳理移动端 UI 设计基础规则，覆盖尺寸体系、字体层级、按钮组件、卡片容器、图标规范、间距栅格六大核心维度。
- 基础画布与控件尺寸标准化：明确 375×812 标准移动端画布下的页面结构规则，固化状态栏、导航栏、底部导航栏的高度规范与安全区适配标准，建立标题、正文、辅助文字的三级字号层级与字重规范。
- 组件化设计方法落地：基于 Figma 工具沉淀可复用组件库，覆盖配色比例、层级关系、卡片排版、图标统一性、文字识别度、按钮优先级等核心要素，形成可直接复用的组件模块，提升后续页面设计效率。
- 页面信息组织方法沉淀：总结小程序页面的信息架构组织逻辑，掌握通过视觉权重、间距分层控制页面视觉重心的方法，保障高密度业务信息下的浏览体验。
 |
| https://www.zcool.com.cn/ |
 |
| https://www.zcool.com.cn/article/ZMTQ0MDM5Ng==.html |
 |
| 学习设计技巧 |
- 自行为公司软件制定UI规范，后续可严格按照要求制作统一页面
学习与收获
- 建立了体系化的 UI 规范思维，理解了设计规范不是零散的样式要求，而是保障多页面视觉一致性、提升团队协作效率的底层基建。
- 掌握了移动端小程序的标准适配逻辑，明确了不同尺寸画布下的安全区、控件高度的行业通用标准，能够独立输出符合开发规范的设计稿。
- 深化了组件化设计意识，理解了「一次设计、多处复用」对于 B 端产品迭代效率的价值，学会了从单页面设计中抽离通用组件的方法。
反思与改进
- 规范梳理偏向通用标准，与产业交易平台的业务属性结合度不足，部分组件样式未充分考虑高密度信息的展示需求，后续需结合业务场景优化规范细节。
- 组件库的分类与命名不够标准化，不利于后续团队协作复用，后续需按照原子设计理论优化组件库的层级结构与命名规则。
9 月 1 日 报价业务全链路落地：页面流程闭环与信息层级优化
当日工作内容
围绕平台报价业务流程开展全链路页面设计，完成报价业务核心页面与组件的高保真输出，同步统一视觉规范，保障操作路径的清晰性与一致性：
- 核心业务弹窗设计：完成报价详情页、修改报价弹窗、撤销报价确认弹窗、购买联系弹窗的设计输出，覆盖报价业务的核心操作节点。
- 业务模块拓展：新增关联资产展示模块、底部固定操作栏与资产售卖详情弹窗，完善资产 - 报价的信息联动，强化业务路径的连贯性。
- 横向列表交互方案：针对报价列表字段多、移动端屏宽有限的问题，设计横向滚动交互方案，补充滑动提示图标与隐藏列展示方式，平衡信息完整度与浏览体验。
- 页面架构梳理：梳理商品详情、个人中心、我的订单、商品管理、商户中心等核心页面的结构关系，明确页面跳转逻辑与层级关系。
- 规范落地与组件输出：全量应用 375×812 设计规范，统一卡片、按钮、弹窗、状态标签、表格、间距的层级标准，输出可直接导入 Figma 的 SVG 组件文件。
 |
| 初步版本--需要与产品对接 |
学习与收获
- 掌握了 B 端交易类业务的页面设计逻辑：以业务流程为线索串联页面，通过信息层级区分核心操作与次要信息，保障用户操作路径的清晰闭环。
- 积累了移动端高密度表格的设计经验，理解了横向滚动、字段折叠等方案在解决多字段展示问题中的适用场景与设计要点。
- 深化了「设计先行、规范同步」的工作意识，在业务页面迭代中同步沉淀组件与规范，避免后续迭代出现视觉偏差。
反思与改进
- 由于这只是产品部门给出的第一版方案，后续她还要更新与我对接。需结合业务风险等级优化弹窗的视觉权重与二次确认机制，降低用户误操作风险。
- 页面跳转逻辑的梳理不够完整，未覆盖异常流程与边缘场景，后续需结合产品需求文档补全异常态、空状态的页面设计。
9 月 2 日 报价购买链路深化：用户路径闭环与操作层级设计
当日工作内容
聚焦拍卖商城「报价 + 联系方式购买」双交易模式，完成用户全操作路径的页面设计与流程梳理，构建完整的交易闭环体验：
- 报价全流程梳理：梳理普通用户参与资产报价的完整链路，覆盖进入商品详情、查看报价记录、填写报价、提交报价、查看个人报价、修改报价、撤销报价全节点，保障流程逻辑通顺。
产品部门提供要求 - 报价模块体验优化：完善商品详情页报价模块，设计报价列表、报价金额、报价时间、用户信息的横向滑动展示，解决移动端多字段展示的空间局限。
- 状态体系设计：设计报价详情及操作页面，通过状态标签区分「进行中、已撤销、已失效」等报价状态，并匹配对应操作权限，实现状态与操作的联动统一。
- 购买联系方式流程设计：完成购买联系方式模式的全流程设计，包含购买联系弹窗、价格数量信息展示、立即购买、订单支付、支付后联系方式解锁展示等节点。
- 订单体系设计：完善「我买到的」订单页面，区分待支付、已付款、已完成、已关闭等订单状态，设计订单详情、取消订单、联系卖家等配套操作。
- 图标体系与品牌探索：统一设计报价图标、联系方式图标及商城功能图标，规范线条粗细、尺寸、圆角与视觉权重；针对企业应用商店图标开展多方案探索，从企业属性、识别度等维度迭代优化。需要与原软件风格一致
- 整体设计以用户操作路径为核心，串联「查看资产 - 参与报价 - 管理报价 - 购买联系方式 - 完成支付 - 联系卖家」完整闭环；通过操作层级设计，突出提交报价、立即购买、去付款等核心转化操作，对撤销报价、取消订单等高风险操作做弱化或警示处理，降低误操作概率。
学习与收获
- 建立了交易闭环的设计思维，理解了完整的用户操作路径是交易类产品体验的核心，设计不能只关注单页面美观，更要保障全链路的流畅与连贯。
- 掌握了状态驱动的设计方法：不同业务状态对应不同的信息展示与操作权限，通过视觉化的状态标签降低用户的理解成本。
- 理解了操作层级设计的价值：通过视觉权重区分核心操作、次要操作与风险操作，既能引导用户完成转化，又能规避误操作带来的业务风险。
反思与改进
- 双交易模式的区分度不足，报价与购买两种模式的视觉差异较弱，用户易产生混淆，后续需通过模块样式、操作按钮的差异化设计强化模式感知。
- 企业应用商店图标设计对品牌属性的表达不够突出，产业平台的专业感体现不足，后续需结合品牌调性进一步优化图标风格。
9 月 3 日 视觉资产升级：图标体系重构与运营物料设计
当日工作内容
聚焦产品视觉资产的品质升级，完成图标体系优化、首页导航重构、运营弹窗设计，同步推进报价 2.6 版本的迭代跟进：
- 首页类目主导航图标重构：针对原导航配色杂乱、图标扁平无质感、与栏目内容关联性弱的问题，以蓝紫色品牌主色调为核心，设计 3D 风格系列图标，强化图标与业务类别的关联度；同步优化视觉表现形式，将玻璃质感边框调整为无背景、无边框样式，提升栏目层级清晰度与视觉美观度。
初始后台首页设计 图标1（缺点：没有专业度，有玻璃边框需要去掉） 图标2（有辨识度色调统一）PS结合豆包ai 在后台测试版调试观察效果 - 新人福利活动弹窗设计：配合研发部活动策划需求，完成「新人福利・万元现金点击领取」活动弹窗第一版设计，输出运营活动视觉物料。
比较简约版和详尽版弹窗效果 - 报价 2.6 版本迭代跟进：跟进报价 2.6 版本的开发进度，待产品侧核实全部业务信息后完成最终微调，剩余功能模块预计次日完成。
学习与收获
- 掌握了图标精细化设计的方法，理解了矢量绘制对于多端适配、像素精度的重要性，能够独立完成从草图到最终可落地图标的全流程设计。
- 理解了首页导航图标设计的核心原则：识别性优先、与业务强关联、符合品牌调性，同时要兼顾信息层级，避免视觉过度抢夺内容焦点。
- 积累了运营弹窗的设计经验，理解了运营物料需要平衡品牌调性、活动氛围与信息传达效率，保障活动转化效果。
反思与改进
- 活动弹窗的像素精度与输出规范考虑不足，首版版本像素精度有待优化，后续需建立运营物料的输出标准，统一尺寸、分辨率与格式要求。
- 与产品侧的信息同步不够及时，报价 2.6 版本的业务信息核实进度滞后，后续需主动跟进需求进度，提前对齐业务细节，避免设计等待。
9 月 4 日 全量迭代交付：类目体系重构与高保真版本输出
当日工作内容
完成优企资产猫小程序的高保真迭代设计，共计输出 20 张设计稿，覆盖商品分类首页、类目弹窗、商品列表页、筛选组件、分类导航、空状态页、类目切换交互页、抽奖弹窗、报价相关页面等核心模块，核心工作如下：
- 商品类目体系迭代替换：对照后台新旧类目表，将旧版产权、厂房、建筑公司等类目替换为物流供应链、传媒广告影视、生产加工制造、餐饮文旅实体、商贸贸易类等新版业务类目；完成全部类目表格替换，同步设计配套类目图标与分类专属配图，强化不同类目的视觉区分；针对图片过大影响页面加载速度的问题，完成全量图片压缩优化。
- 抽奖弹窗样式升级：重新抽离抽奖弹窗设计，丰富视觉表现样式，优化弹窗内部布局与元素表现，提升运营活动的视觉吸引力。经理要求修改文案，产出最终效果。图片像素太大，前端运行困难需要压缩
- 3D 图纸资源输出：完成 90 余份建筑相关 3D 图纸设计，同步更新至小程序测试版本，完成线上核验页面展示效果，保障资源展示正常。
- 报价 2.6 版本迭代跟进：听取产品侧需求讲解，梳理 2.6 版本报价表的 UI 调整要点，整理待迭代设计需求。
- 页面适配与状态校验：适配新版类目体系，处理长类目名称文字换行、溢出问题，调整卡片与导航布局间距；校验类目默认、选中高亮、展开收起等交互状态，保障分类切换布局稳定；统一类目弹窗、侧边导航、筛选下拉组件的交互逻辑，保障前端与后台类目数据匹配。
后台多次调试查看图标色系可行性 类目导航 - 设计自查与交付：完成设计稿的自查复核，校验页面视觉规范、信息层级一致性，输出可交付的 Figma 高保真源文件。
学习与收获
- 掌握了产品类目体系重构的设计方法，理解了类目设计不仅是视觉样式的调整，更要与后台业务架构、用户浏览习惯相匹配，保障信息架构的合理性。
- 建立了设计交付前的自查意识，明确了规范校验、状态校验、逻辑校验的完整流程，能够独立输出符合开发标准的高保真设计稿。
- 理解了性能优化在 UI 设计中的重要性，图片资源的大小、格式会直接影响页面加载速度，设计阶段就需要考虑落地性能，平衡视觉效果与加载体验。
反思与改进
- 全局色彩体系不够统一，页面颜色偏杂乱，缺乏固定的品牌色板与主次层级，后续需建立标准化的色彩规范，统一全局配色，强化品牌视觉识别。
- 报价 2.6 版本的新增功能尚未全部完成，部分细节待自查优化，后续需加快迭代进度，同步细化设计细节，保障版本按时交付。
9月7日 首页色彩体系重构：打造商务感冷色系视觉规范
当日工作内容
- 梳理小程序首页测试版的全页面色彩问题，定位到组合推荐、分类入口、榜单等多模块存在色彩饱和度不统一、冷暖色调混杂的核心问题，明确视觉杂乱、商务专业感不足的优化方向。
- 以品牌主色#254BFF为核心，研究并制定首页统一的冷色系商务配色体系，明确全局色彩规范与饱和度控制标准，输出包含品牌主色阶、中性文字色、低饱和功能点缀色三大类共15个标准色值的全局色卡，将所有功能色饱和度统一控制在5%-18%区间。
- 针对首页核心模块逐个输出配色落地方案：组合推荐卡片采用纯白底+冷色小标签方案；小图滑动分类入口统一为蓝、蓝紫、冷青、冷青绿低饱和冷色系；促销类模块用冷青蓝替代原橙红色，弱化电商感；榜单、服务保障模块统一蓝灰冷调基底，搭配低饱和灰金做点缀，平衡模块辨识度与整体统一性。
- 验证色彩层级逻辑，确保「一级类目导航＞次级筛选入口＞内容卡片」的视觉权重秩序，避免次级模块抢夺主视觉；同步完成Tab导航栏图标未点击与点击效果的样式替换。
 |
| 主页一级图标 |
学习与收获
- 系统掌握了B端产业产品的色彩体系搭建方法，理解低饱和度冷色系对于强化商务专业感、提升信息可读性的价值，打破了“色彩越丰富视觉越饱满”的认知误区。
- 建立了色彩层级的设计思维，通过色阶、饱和度的差异划分页面信息权重，让视觉引导与信息优先级保持一致，提升页面的信息传达效率。
- 理解了品牌色落地的核心逻辑：不是单纯的主色堆砌，而是通过主色阶、辅助色、功能色的分层应用，在统一调性的同时满足不同模块的功能表达。
反思与改进
- 初期模块配色方案过度追求统一性，部分分类入口的视觉辨识度不足，后续需要在统一冷色系的基础上，通过色相的微差强化类目的区分度。
- 色彩规范尚未沉淀为标准化的设计令牌，手动调整效率低且易出现偏差，后续需要将色彩体系录入Figma组件库，实现全局一键调用，保障迭代中的色彩一致性。
9月8日 运营组件设计与报价2.6版本改版启动
当日工作内容
- 完成小程序一级页面「去抽奖」红包式悬浮窗口的视觉设计，优化弹窗视觉表现，采用轻量化红包造型搭配活动文案，贴合整体运营活动风格，同时控制视觉权重，避免过度干扰主业务浏览。
- 接收产品部门同步的9月18日确认版报价2.6版本最新方案，梳理新旧版本的内容差异，明确多处功能调整与页面重构需求，启动报价功能的改版设计工作。
- 重点推进报价详情弹窗的整体重构，同步对原有功能进行简化优化与细节内容补充，持续迭代完善页面交互与视觉逻辑，保障改版项目有序推进。
学习与收获
- 积累了产品需求变更的响应经验，学会快速拆解改版要点，区分新增、修改、删除三类需求，合理规划设计优先级，保障项目推进效率。
- 理解了功能简化的设计逻辑：B端产品迭代不是功能的叠加，而是基于用户核心诉求做减法，去除冗余操作，让核心路径更顺畅。
反思与改进
- 在制作之前可以多看看这些现有设计例如同类型软件
学习悬浮窗口的视觉设计
9月9日 报价全链路梳理与视觉规范统一对齐
当日工作内容
- 完成报价全链路页面层级核对梳理，对照页面结构树逐一核对原型页面，梳理「商品详情→报价列表→查看报价→报价详情→确认订单」的完整交易链路，校准页面命名、图层结构与业务流程的对应关系，确保各页面节点无遗漏。
删除状态更新
2.App 与小程序图标优化定稿：针对前期 AI 生成图标存在的字体模糊、像素精度不足的问题，改用 Photoshop 进行矢量重绘，优化图标主体与文字的细节质感，提升画面清晰度与精致度，最终敲定小程序端与 App 端的图标样式。
老板要求将竞拍，报价，购物等属性体现，并且与猫形象结合
 |
| 用Adobe lllustrator 制作但是不太熟练，更换为PS |
 |
| PS绘制 |
 |
| 最终优化：优企赋资产app图标 |
2.优化运营悬浮入口，将「去抽奖」侧边悬浮按钮调整为右侧贴边样式，采用左侧弧形+右侧直边的造型，精简文案，搭配轻量金币装饰，统一红金运营配色，适配商城板块整体视觉调性。
学习与收获
- 掌握了产品页面层级梳理的方法，理解清晰的信息架构与统一的页面命名，是保障团队协作、降低后续维护成本的基础，也是设计系统性的体现。
- 深化了移动端表格组件的设计认知，明确了触控区域、信息密度、操作权重三个核心优化方向，学会通过横向布局、弱化次要操作来提升移动端表格的易用性。
- 理解了“细节一致性”对于产品体验的价值：圆角、间距、字号等基础参数的统一，虽然单个影响微小，但全链路的统一会显著提升产品的专业感与精致度。
反思与改进
- 前期缺乏统一的页面命名规范，导致层级梳理时需要大量校正工作，后续需要建立标准化的页面与图层命名规则，从源头减少梳理成本。
- 对删除等高风险操作仅做了视觉弱化处理，未补充二次确认机制，风险防控不足，后续需要结合操作的风险等级，配套对应的确认与警示逻辑。
9月10日 设计交付校对与运营活动素材产出
当日工作内容
- 完成体验版配色与首页一二级图标的正式版替换，同步推进上线测试，验证色彩与图标在真实产品环境中的显示效果。
- 完成抽奖大转盘7个数额档位的卡通卡片设计制作与上传，统一活动视觉风格，保障运营活动的素材供给。
3.同步推进商品目录替换工作，因后台测试环境紊乱暂未完成，计划次日继续推进。
学习与收获
- 掌值、元素的差异化快速产出多档位素材，平衡设计效率与视觉多样性。
- 体会到了设计工作的协作属性：设计落地需要配合开发、测试的节奏，环境、排期等因素都会影响进度，需要灵活调整工作优先级。
反思与改进
- 上线前的全量校验不够全面，部分资源替换不同步，容易出现线上显示不一致的问题，后续需要建立上线前的 Checklist，逐项校验资源完整性。
- 多任务并行时的进度管控不足，商品目录替换工作出现延期，后续需要优化任务优先级排序，提前预判协作环节的风险，预留缓冲时间。
9月11日 需求深度对齐与报价全链路设计走查
当日工作内容
报价列表模块设计（核心）
- 参照报价列表参考样式，完成报价列表模块的视觉统一设计：
- 表头三列：用户 / 报价 / 时间，浅灰蓝圆角表头块 + 蓝色加粗 + 排序箭头
- 时间统一为单行格式
2026/07/28 12:31（斜杠分隔、无秒），右对齐修改前 修改后
- 参照报价列表参考样式，完成报价列表模块的视觉统一设计：
产品需求对齐
- 与产品逐条核对报价功能全流程需求，确认买家侧 / 卖家侧角色边界与文案口径
- 梳理并抠改关键叙述文字，确保同一页面在买卖双方视角下的表述区分准确（如 "联系卖家 / 查看联系方式"" 解锁卖家 / 买家联系方式 " 等）
设计稿全链路走查- 完成 21 个页面设计稿：商品详情（有 / 无报价态）、填写报价弹窗、我的报价、报价详情、再次报价 / 删除报价弹窗、确认订单、支付成功、未支付 / 已收货 / 已完成订单、查看联系方式、报价记录、商品管理、商户 / 商家中心、我的订单、个人中心等
学习与收获
- 掌握了B端双角色产品的设计思路，理解买家与卖家的诉求差异，不仅体现在功能权限上，也体现在文案表述、信息优先级的差异上，设计需要站在不同角色视角做体验适配。
- 建立了全链路走查的工作方法，学会从业务流程出发系统性校验页面，而非零散检查单页面，有效避免页面遗漏、逻辑断裂的问题。
- 深化了对横向表格的设计理解，在字段较多的卖家端场景中，横向滑动是平衡信息密度与操作效率的有效方案，同时需要固定核心操作列，保障关键功能的可达性。
反思与改进
- 买卖双角色的差异化设计深度不足，部分页面仅做了文案调整，对于面向卖家和买家，后续需要结合不同角色的核心诉求，进一步优化信息优先级。
- 走查维度仍偏视觉层面，对交互逻辑、异常状态、空状态的校验不足，后续需要完善走查清单，补充交互与边缘场景的校验项，提升走查的全面性。要多和产品员工多交流
V2.5 Guarantee Deposit Management
1. Work Completed
Today, I reviewed the V2.5 Guarantee Deposit Management module after front-end implementation. I compared the actual interface with the high-fidelity Figma design and checked icon size, spacing, typography, image position, and button placement. Several issues were identified and adjusted, including inconsistent icon styles, excessive card spacing, and an action button positioned too low.
 |
| 保真金管理页--修改后效果 |
 |
| 保真金管理页--图标尺寸修改后效果 |
 |
| 上线后效果 |
 |
| 修改功能性图标效果 |
 |
| app中前端尺寸间距问题 |
 |
| UI层面修改 |
2. What I Learned
I learned that high-fidelity design does not always produce the same result after implementation. Some proportions and spacing that look fine in Figma may appear different on an actual mobile screen. Therefore, communication with front-end developers is important to identify and solve these issues early.
3. Reflection
This experience showed me that I need to pay more attention to proportion, spacing, and real-device testing. Some issues in V2.5 caused additional front-end adjustments, which gave me a better understanding of the importance of design specifications.
For V2.6, I will follow a more consistent spacing and sizing system and add a final checking process:
Figma → Front-end Implementation → Mobile Testing → Requirement Check → Final Review
This will help reduce unnecessary rework and improve the consistency between the design and the final product.
Comments
Post a Comment