TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask HN: How can I improve UI dev skills? Looking for real-world examples

20 点作者 im_lince8 个月前
I’m currently working on improving my design skills, especially in the area of UI&#x2F;UX. This week, my focus is on understanding how great products develop and manage their user interfaces.<p>I have a few questions that I’d love some insight on:<p>What key design principles do great products follow when building their UI? How do they handle large components in their interface while maintaining usability and consistency? Any best practices or resources you&#x27;d recommend for tackling complex UI&#x2F;UX challenges?

6 条评论

Adrig8 个月前
Design principles:<p>— Don&#x27;t reinvent the building blocks of UI. It&#x27;s mostly a designer problem than a dev problem but I often see folks reinventing navigation, buttons, or forms when the standard pattern would work fine. There is a high UX cost to breaking existing patterns.<p>— Think in flows, not screens. Gather the context for the starting point, the objective of your feature and create the path between them. I like using the job to be done framework for this<p>— Speaking of frameworks and tools, simple is almost always the best. Don&#x27;t buy into a complex process designers came up to legitimate their job. Find out what to build and how to build it. Use reference, user interviews, data analysis, existing patterns and you&#x27;ll be more than fine<p>Large components:<p>— Look into design systems, it&#x27;s a whole topic. My advice for 90% of software companies is to have a small but robust design system with the basics well documented (typography, spacing, colors, basics UI components). Then jam with it depending on your needs. Extensive design systems require a dedicated designer and dev to maintain. More often than not, they end up as pure chaos without them.<p>Resources:<p>I have a ton, I put them all in a Notion list, feel free to check <a href="https:&#x2F;&#x2F;impasto.notion.site&#x2F;Adrien-s-list" rel="nofollow">https:&#x2F;&#x2F;impasto.notion.site&#x2F;Adrien-s-list</a>
评论 #41580518 未加载
JLCarveth8 个月前
I&#x27;ve found <a href="https:&#x2F;&#x2F;www.refactoringui.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.refactoringui.com&#x2F;</a> to be quite helpful, you can get the first two chapters for free.
评论 #41571905 未加载
评论 #41571065 未加载
meiraleal8 个月前
Design systems. Study many of them. There are great ones coming focused on web components (the most interesting the ones based on Lit).<p>Here is an extensive list: <a href="https:&#x2F;&#x2F;github.com&#x2F;alexpate&#x2F;awesome-design-systems">https:&#x2F;&#x2F;github.com&#x2F;alexpate&#x2F;awesome-design-systems</a>
austin-cheney8 个月前
Try looking at my prior personal project: <a href="https:&#x2F;&#x2F;github.com&#x2F;prettydiff&#x2F;share-file-systems">https:&#x2F;&#x2F;github.com&#x2F;prettydiff&#x2F;share-file-systems</a><p>Imagine loading a large dynamically populated page in the browser with state restoration fully executed as faster than 80ms. I describe that in great detail here: <a href="https:&#x2F;&#x2F;github.com&#x2F;prettydiff&#x2F;wisdom">https:&#x2F;&#x2F;github.com&#x2F;prettydiff&#x2F;wisdom</a><p>I built an original test automation engine for that application because I needed something that supported command and control across multiple computers in the browser for a peer-to-peer environment. On just a single computer it achieved 300 points of evaluation in less that 8 seconds with full file system execution from the browser.<p>The application also demonstrated an OS-like GUI in the browser that achieved accessibility with full file system display.<p>Here are the key insights I employed:<p>* Less is more. Focus on architecture with an obsession on simplicity and reuse even if greatly inconvenient. That often required an irrationally high level of refactoring.<p>* Speed is an understanding of tree models and transmission and nothing more. Always navigate tree models where they are available, such as the file system and the DOM, in preference to string parsing. String parsing, in any form, is a performance killer. Binary payloads and bidirectional communication are vastly superior to HTTP in every conceivable scenario.<p>* Other UI developers are cowardly. Don’t let that limit your ambition. Don’t listen to a bunch of bullshit cliches. Measure things and execute according to evidence. Reinvent absolute everything you see fit, and yes it will make other UI developers cry. Real world users don’t care about the sad tears of your peers.
评论 #41591668 未加载
Leftium8 个月前
<a href="https:&#x2F;&#x2F;doing-design-right.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;doing-design-right.com&#x2F;</a><p>&gt; ... how to solve complex interface tasks by redesigning a real-life app used by more than 2 million users.<p>&gt; In this course, you will work on a real-world application, not a fake one. It already exists and is called Fedica. Its interface is outdated and has many issues.
rozenmd8 个月前
Build things and get feedback as you go.