V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
besscroft
V2EX  ›  程序员

设计并实现一款软件的 UI 界面真的挺难的。

  •  1
     
  •   besscroft ·
    besscroft · 322 天前 · 3468 次点击
    这是一个创建于 322 天前的主题,其中的信息可能已经有所发展或是发生改变。

    近一个月每次放假都在写前端页面,有点折磨自己。Web 页面的样式是真的难调,尽管已经在依靠组件库 + TailwindCSS 和 GPT 帮忙了。

    写完一个小东西,换了一种分辨率发现样子又变了,或者是切换成移动端发现又哪里歪了,想要适配不同的分辨率和屏幕大小真的不容易。又或者是发现一个样式不对劲,不知道怎么找到它(组件内部的,找起来有点麻烦,也不好全局覆盖),或者是找到了也不知道怎么调整。以后再也不想评价别人写的咋样了,因为自己写起来确实费劲。我确实得找点资料(书)去好好学学,但我很好奇大家都是怎么做的?

    今天中午起床后,一下午又在画样式,在这个 PR,大家也不妨告诉我,是不是我学习方法有什么问题?

    18 条回复    2023-04-07 04:28:45 +08:00
    zcf0508
        1
    zcf0508  
       322 天前 via Android   ❤️ 1
    你需要先做好设计,再开始写代码,特别是需要适应屏幕分辨率的,要按照断点设计多个版本。用 tailwind 是移动端优先的,所以先实现小屏再往大屏调整。
    liyang5945
        2
    liyang5945  
       322 天前
    先学习 css 的基本知识吧,文档流,盒模型,定位,flex 布局,学会这些东西就发现布局什么的都是小菜一叠,我当初是看一个培训机构的前端教学视频学的,css 的课程不多,快的话一两周就能学会
    CLMan
        3
    CLMan  
       322 天前   ❤️ 5
    前端包括设计和实现(开发),虽然有全栈的概念,但是真正能精通前后端开发的少之又少,精通前后端开发而且精通设计的更是凤毛麟角。

    应试教育使得很多人缺乏基本的审美细胞,这个没法补课了。

    我也曾经焦虑过,因为练习 web 项目就要涉及前端,而前端部分往往让我心里交瘁。后来我就直接爬别人的网站,只练习后端部分。

    Material Design,Ant Design 之类的库也能帮助非前端人员节省开发的脑细胞。

    总之,专业的领域交给专业的人来做,别自己硬着头皮浪费大量精力去做,你也学不到什么。
    crysislinux
        4
    crysislinux  
       322 天前 via Android
    要做的协调好看确实比较难。抄别人的最简单。
    jones2000
        5
    jones2000  
       322 天前
    设计难, 实现就是一个体力活。
    levelworm
        6
    levelworm  
       322 天前
    别做这种事情了,专心做 CLI 的工具,专心做程序员要用的工具,这种面向普通人的东西还是交给其他人来弄。。。
    daweiba
        7
    daweiba  
       322 天前
    找个 UI 框架,改巴改巴
    Aloento
        8
    Aloento  
       322 天前
    设计... 我一般就是先想点子,然后高保真,然后实现,然后优化
    Aloento
        9
    Aloento  
       322 天前
    然后,我超,原
    kongkx
        10
    kongkx  
       322 天前 via iPhone   ❤️ 1
    需要补点 css 相关的知识,响应式以及优先级机制,了解网页 layout 的特性。 看了一个 commit ,好像不少 !important ,跟“行内样式” ,这样很容易搞死自己。
    jeffw
        11
    jeffw  
       322 天前
    如果没要求,我现在只都做电脑版,手机平板的屏幕那么大,又不是不能用。。
    vsitebon
        12
    vsitebon  
       322 天前   ❤️ 1
    虽然我可能不清楚 vue 的语法是怎么实现的,但是我看了一下可以改进的首先是,如果采用了 Tailwindcss 那么尽可能不要再单独将某一个样式放在 style 里面,而是通过控制 class 来控制,例如:“:body-style="{ padding: '1rem' }"” 这种
    superedlimited
        13
    superedlimited  
       322 天前 via iPhone
    用 tailwindcss 的前提是比较熟练掌握 css 。你 css 还不熟,就靠什么 chat 狗屁通帮你写,还 tailwindcss ,r u fucking 搞笑的么?
    debuggerx
        14
    debuggerx  
       321 天前   ❤️ 2
    响应式设计和实现本就不那么容易,别说跨专业来写的了,就是大公司的产品,真正能做好的也没几个,国内尤其严重,还自作聪明得整出各种“屏幕适配方案”的歪路把人带偏……
    想做好响应式,需要足够的理解和认知,再加上各种技巧和套路的积累,所以不光得掌握常见的布局和样式知识,还需要看一些成体系的设计语言指导,比如 MD 的文档:
    https://www.mdui.org/design/layout/responsive-ui.html
    MD 好不好看见仁见智,但是它最少是一套系统的有足够理论支持的设计语言,相反很多 xxxDesign 、xxxUI ,本质不过是一些方便开发的 UI 组件库而已。
    其次就是多留意好的设计实现,学习那些思路和技巧。一般是国外的网站和应用出现的概率会高一点。
    再贴几个刚查到的链接:
    https://www.invisionapp.com/inside-design/examples-responsive-web-design/
    https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design
    https://web.dev/responsive-web-design-basics/

    (我看还有几个大聪明说前端简单的[狗头])
    besscroft
        15
    besscroft  
    OP
       321 天前
    @debuggerx 谢谢!
    xxxyy2y
        16
    xxxyy2y  
       321 天前
    @debuggerx 不错
    YouMoeYi
        17
    YouMoeYi  
       321 天前
    某些人戾气不要太大😅 多分辨率多端 UI 的响应式设计本身就不那么好做
    js8510
        18
    js8510  
       321 天前   ❤️ 1
    做个 UI 真的很难。。开始时候独立还发还想着我要做好看,我要设计一下,我要响应尺寸变化。后来直接放弃,遵循能用就行的原则。
    其实经过漫长的独立开发最终上线,多数情况是完全没有流量。如果成功了,UI 还有机会改。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5264 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 01:23 · PVG 09:23 · LAX 17:23 · JFK 20:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.