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

想知道各位独立开发者的网站或者 App 的 UI 都是怎么设计出来的?

  •  1
     
  •   brucetao2009 · 2023-10-08 11:59:59 +08:00 · 4581 次点击
    这是一个创建于 410 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题, 看到很多独立开发者大佬做的网站和 APP 的界面都是好看的一笔,如丝般顺滑,都是怎么设计的,小弟我也想学学,求求各位大佬给指点迷路 我的疑惑点主要是,这些界面动画都是开发者自己独立设计和开发的么,还是额外让别人做好设计后,自己再开发的

    第 1 条附言  ·  2023-10-10 11:08:48 +08:00

    看看我lowb的默认ui

    44 条回复    2023-10-10 11:36:14 +08:00
    jokechen
        1
    jokechen  
       2023-10-08 12:24:19 +08:00 via iPhone
    想学+1
    nearhan
        2
    nearhan  
       2023-10-08 12:59:12 +08:00
    想学+2
    moyt
        3
    moyt  
       2023-10-08 13:09:54 +08:00 via Android
    想学+3
    lilei2023
        4
    lilei2023  
       2023-10-08 13:13:09 +08:00
    想学+4
    huoshanhui
        5
    huoshanhui  
       2023-10-08 13:13:55 +08:00
    想学+5
    Charles0929
        6
    Charles0929  
       2023-10-08 13:14:21 +08:00
    想学+6
    loveloki32
        7
    loveloki32  
       2023-10-08 13:16:08 +08:00 via iPhone
    想学+7
    leegoo
        8
    leegoo  
       2023-10-08 13:16:51 +08:00
    想学+8
    dj721xHiAvbL11n0
        9
    dj721xHiAvbL11n0  
       2023-10-08 13:22:36 +08:00
    想学+9
    mikaelson
        10
    mikaelson  
       2023-10-08 13:22:51 +08:00
    想学+10
    asaxing
        11
    asaxing  
       2023-10-08 13:23:14 +08:00   ❤️ 2
    我的 App 当前版本的 UI 比第一个版本的漂亮很多,提高的办法就是多观察其他知名产品,不断迭代。
    对于组件,遵守如无必要,勿增实体,多考虑一下如何删掉这个组件
    对于色彩,如果不会搭配就不要有鲜艳颜色,用黑白蓝

    我的 App 截图:👇

    ![1]( )
    yechentide
        12
    yechentide  
       2023-10-08 13:28:29 +08:00 via iPhone
    想学+11
    timnottom
        13
    timnottom  
       2023-10-08 13:33:36 +08:00
    想学+12
    YuuuuuuH
        14
    YuuuuuuH  
       2023-10-08 13:35:20 +08:00
    想学+13
    durban126
        15
    durban126  
       2023-10-08 13:35:23 +08:00
    想学+13
    Tesseract
        16
    Tesseract  
       2023-10-08 13:36:32 +08:00 via Android   ❤️ 1
    比较实际的方法就是从模仿开始,比如去 google play 翻翻那些 top 的应用,看看别人是怎么做的,想想为什么这么做
    superedlimited
        17
    superedlimited  
       2023-10-08 13:50:08 +08:00 via Android
    @Livid 建议处理一下上面盖楼的,看到一个感兴趣的标题点进来。怀疑是不是进了百度水吧...
    shortxxx
        18
    shortxxx  
       2023-10-08 13:51:57 +08:00
    想学+999999
    19888888888x
        19
    19888888888x  
       2023-10-08 13:54:32 +08:00 via iPhone
    学习一下平面设计的软件, ps ai cdr 吧
    CHU20230515
        20
    CHU20230515  
       2023-10-08 13:56:22 +08:00
    设计师设计的,然后交给公司前端
    ztao165
        21
    ztao165  
       2023-10-08 14:00:19 +08:00   ❤️ 1
    最近在看 《 Refactoring UI 》,推荐给大家
    lxiian
        22
    lxiian  
       2023-10-08 14:01:42 +08:00
    我是去 dribble 上去抄😂
    guguji5
        23
    guguji5  
       2023-10-08 14:08:01 +08:00
    丝滑不丝滑需要代码实现,好不好看可以参考免费的设计稿 https://www.freeuid.com/
    akring
        24
    akring  
       2023-10-08 14:20:59 +08:00   ❤️ 3
    个人的两套方法,仅供参考:

    1. 使用系统平台的默认组件

    - 优点:下限很高,一致性很强,通常不会出现让用户恼火的奇葩交互或者怪异审美。
    - 缺点:上限很低,UI 同质化严重,无法让用户一眼记住,需要用功能打动用户。
    - 参考:iOS 和 Android 官方的人机交互指南。
    - 个人作品: https://starorder.akring.com ,大量使用系统组件,对于跨平台开发来说有很大的加成。

    2. 多看设计网站,使用流行的设计体系

    - 优点:上限很高,UI 通常具备更好的设计感和个性,具有独特性,设计的好的话会大大加分。
    - 缺点:下限很低,与之相对的,糟糕的品味和业余的设计能力会让你的作品成为一朵奇葩。
    - 参考:谜底工作室旗下的作品,UI 和交互都非常令人印象深刻。
    - 个人作品: https://fasting.akring.com ,使用了「我自己」非常喜欢的轻拟态设计,从评价来看褒贬不一,有的用户喜欢,有的不喜欢,所以个性化设计是把双面刃,开开发者如何取舍了。
    eDeeraiD0thei6Oh
        25
    eDeeraiD0thei6Oh  
       2023-10-08 14:26:05 +08:00
    看来很多人都不知道 https://themeforest.net/
    rev1si0n
        26
    rev1si0n  
       2023-10-08 14:43:26 +08:00
    不是一步到位的,可能初版的都入不了眼,后面在使用中慢慢改进
    jellybool
        27
    jellybool  
       2023-10-08 14:52:31 +08:00 via Android
    tailwindui 一把梭
    zoharSoul
        28
    zoharSoul  
       2023-10-08 14:55:32 +08:00
    抄竞品
    seven123
        29
    seven123  
       2023-10-08 14:55:57 +08:00
    直接借鉴做的好的
    giter
        30
    giter  
       2023-10-08 14:59:38 +08:00
    dribble 先汲取一下设计灵感,然后在 axure 里画出满意的原型图,再按照原型图写实际界面
    s04
        31
    s04  
       2023-10-08 15:18:48 +08:00
    FIVERR 雇人做
    tyzandhr
        32
    tyzandhr  
       2023-10-08 15:23:42 +08:00 via Android
    学一学视觉传达
    leyfung
        33
    leyfung  
       2023-10-08 16:19:40 +08:00
    @eDeeraiD0thei6Oh 感谢👍
    iOCZ
        34
    iOCZ  
       2023-10-08 16:26:57 +08:00
    dribble 上面感觉很多都很像
    L1SO0307PhOWHL66
        35
    L1SO0307PhOWHL66  
       2023-10-08 16:46:51 +08:00   ❤️ 1
    我是过来人,从 0 到 1 ,做过一款上过 Mac App Store 工具-娱乐垂直品类 TOP1 浏览器插件产品,自己野蛮生长不一定是适合所有人 😄

    1. 定 MVP

    确定提供的核心服务和产品是啥,
    确定投入和产出比(产出可以是盈利,也可以是技能成长)是可接受后,反推最快 MVP(minimum viable product) 最简可用产品**必须**实现的特性,然后围绕这些特性手绘界面。

    你没有看错是手绘,用纸和笔。如果自己去学张三原型工具,李四绘图工具,可能把解决一个问题,变成多个;
    同样,你找人代工也是,出问题怎么改,快速迭代二三四版怎么改,资金能跟上?设计和开发如何协同?

    纸和笔最简单也容易改,而且人人都会,主打一个快,天下武功唯快不破。

    2. 定技术栈

    选最适合的和最熟悉——不是最流行最潮也不是最多人用的框架技术栈,来实现 MVP 。

    许久以前,我自己是后端野路子,听有经验的资深前端推荐了 Vue 自学 ——因为他们说 简单快上手后期容易招人/找人代工,我信了,结果后来还是自学 React ,因为它能一把梭搞定前端、手机端和电视端所有终端产品界面。

    主前端/终端技术栈定下来后,找相关的 UI 库直接参考第一部的手绘图做高保真 demo 。
    比如我选了 React ,我会找 基于 React 实现的 UI 库,如 Mantine UI ,然后直接写高保真 demo 。

    3. 丑没有关系,最重要快

    验证想法,实现营收,快速迭代出下一个版本——赚更多钱——找更专业的人帮你重写。不断重复这个过程。

    你的 MVP/demo/第一个版本出来后,但凡有个嘴巴的用户本能反应就是评论丑之类,其实不要太纠结。
    目标是搞钱,有钱之后想多漂亮都可以;漂亮重要但是它不是目的,过早在界面消耗太多而忽视更为重要的产品服务内核,本末倒置,产品好看从来不是最重要和唯一的竞争力。
    751327
        36
    751327  
       2023-10-08 18:16:23 +08:00   ❤️ 1
    我的第一个 app, UI 基本上是找各种知名的 app 模仿,看看别人怎么设计的,最终的成品还是不太满意
    YYDS18
        37
    YYDS18  
       2023-10-08 18:17:32 +08:00
    0o0O0o0O0o
        39
    0o0O0o0O0o  
       2023-10-08 18:41:27 +08:00
    @751327 #36 我感觉很好看,就是第五张下面有点拥挤,有开源计划吗?
    zsh2517
        40
    zsh2517  
       2023-10-08 18:41:40 +08:00
    想学+15
    kirls
        41
    kirls  
       2023-10-08 23:01:30 +08:00
    想学+16
    AIGCFREE
        42
    AIGCFREE  
       2023-10-09 08:47:20 +08:00
    想学+17
    751327
        43
    751327  
       2023-10-09 10:31:41 +08:00
    @0o0O0o0O0o 刚开发完的 app ,还有很多地方不完善,暂时不开源
    allentown
        44
    allentown  
       2023-10-10 11:36:14 +08:00
    仿其他优秀产品
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2611 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:34 · PVG 23:34 · LAX 07:34 · JFK 10:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.