V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Wichna
V2EX  ›  分享创造

作为后端程序员,我做的网站被 Bulma.css 作者推荐到官网了(有个人经验分享)

  •  3
     
  •   Wichna ·
    folyd · 2018-01-19 23:39:12 +08:00 · 17033 次点击
    这是一个创建于 2503 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本人是一位货真价实的后端程序员,业余时间做一些 side project,比如最近两年一直在做的就是一款叫Anyshortcut 的 Chrome 插件。之前帖子有介绍: /t/415551

    从刚开始前端一窍不通,设计一窍不通,到一点一点学习坚持,把 Anyshortcut 官网做到了我比较满意的地步。前两天我看到 Bulma.css 的作者把 Anyshortcut 也推荐到Bulma.css 的官网上了

    感兴趣的朋友可以看看我做的官网: https://anyshortcut.com

    使用的前端技术

    • bluma.css
    • Vue 2.x
    • Vue router

    设计工具

    • Sketch
    • Photoshop (女朋友帮我设计的 logo,做了一些图,定的主色调,其他大部分都是我自己的点子,自己设计的)

    一些需要登录之后才能看到的页面

    用户绑定的快捷键详情

    用户订阅成功之后

    用户支付方式,即信用卡详情

    用户更新信用卡

    用户的优惠码页面

    个人经验

    • 最重要的是多看国外的 SaaS 网站,多学习,不断提高自己的审美,去 Dribbble,Behance 等网站找灵感
    • 先确定好主色调,至少选两种字体,一种适合做标题的字体,一种是普通文本字体,然后定好几个标题的大小和颜色。比如 heading, title, subtitle, text, subtext 之类的
    • 可以先用一些原型工具设计一下自己脑海中的页面,比如我一直在用的墨刀 (用这个链接注册你我都有优惠,哈哈) 。 大家可以在这看到我最开始设计的原型:https://modao.cc/app/ARvscvpdmhno0NBixRbt0nMTc277hz0
    • 一定要用一款成熟度高的 css 框架,比如 bootstrap, bulma.css, 或者一位国人写的spectre.css。如果不用兼容 IE 系列的话,尽量用 Flexbox 布局
    • 图片尽量用 svg
    • 一些不会写的 UI 控件,可以去 github 或者 codepen 找找借鉴一下
    • 自己动手用在 codepen 或者在Web Maker(我自己经常用的 Chrome 插件)实现一下,然后在集成到自己的项目中

    有什么问题,欢迎大家一起交流。

    第 1 条附言  ·  2018-01-20 00:21:24 +08:00

    忘了说了,为啥要选Bulma?

    其实刚开始是打算用pure.css的,不过感觉这个项目好多年没更新了,所以就放弃了。然后换成了bootstrap 4,当时还是beta版,最大的问题是不方便customize,官方也没有放出customize页面 然后看到了bulma.css, 他最大的优点就是基于Flexbox布局,非常轻量,对个性化,模块化支持非常好,所以就从bootstrap切换到bulma上了。 我是后面才知道国人这款优秀的css框架的。

    另外一个建议:

    选字体,直接去Google Fonts上面选,尽量选sans serif 类的字体,google fonts在国内没有被墙,放心使用吧

    第 2 条附言  ·  2018-01-20 00:48:36 +08:00
    对了,感兴趣的朋友可以用图片上的推荐码订阅,比如用 PRICETAG 就可以免费订阅一年。
    72 条回复    2018-02-07 17:19:07 +08:00
    feng33
        1
    feng33  
       2018-01-19 23:49:50 +08:00
    用来做什么的,现在付费用户多吗
    shiny
        2
    shiny  
       2018-01-19 23:51:27 +08:00   ❤️ 1
    看到了语法错误:Your already added your credit card
    Wichna
        3
    Wichna  
    OP
       2018-01-19 23:54:37 +08:00
    @feng33 #1 一款自定义快捷键快速打开常用网页的插件,目前还没有写好教程,可以看看我那个帖子。欢迎你体验一下。😄
    Wichna
        4
    Wichna  
    OP
       2018-01-19 23:54:56 +08:00
    @shiny 还真是,感谢提醒
    est
        5
    est  
       2018-01-19 23:58:39 +08:00
    赞一个。
    Wichna
        6
    Wichna  
    OP
       2018-01-20 00:05:51 +08:00
    @est 谢谢你的肯定
    GooMS
        7
    GooMS  
       2018-01-20 00:10:38 +08:00 via Android
    Stripe 怎么纳税?
    oott123
        8
    oott123  
       2018-01-20 00:16:14 +08:00 via Android
    重点是有个画 logo 的女朋友。
    Wichna
        9
    Wichna  
    OP
       2018-01-20 00:22:43 +08:00
    @GooMS Stripe 收手续费,个人开发者,不用纳税吧
    Wichna
        10
    Wichna  
    OP
       2018-01-20 00:23:35 +08:00
    @oott123 嘎嘎嘎,这个还是有点重要
    crysislinux
        11
    crysislinux  
       2018-01-20 00:23:35 +08:00
    楼主在国内么,怎么搞定的 stripe,不会搞了 atlas 吧。
    Wichna
        12
    Wichna  
    OP
       2018-01-20 00:26:20 +08:00
    @crysislinux 在国内,绕了弯搞定 Stripe 的,Atlas 试过,成本还是有点高,不适合我的小项目。感兴趣可以看看我另外一个网站,我整理了很多申请 Stripe 的途径 https://paybase.cn/
    Wichna
        13
    Wichna  
    OP
       2018-01-20 00:27:05 +08:00
    @Wichna
    @oott123
    Paybase 这个 logo 绝对是我自己用 Sketch 设计的
    ericls
        14
    ericls  
       2018-01-20 00:59:21 +08:00 via iPhone
    好了 知道你有女朋友了
    wtf94666
        15
    wtf94666  
       2018-01-20 01:36:48 +08:00 via Android
    好看 新手设计师自愧不如
    hugee
        16
    hugee  
       2018-01-20 01:37:29 +08:00 via Android
    高手
    twor
        17
    twor  
       2018-01-20 01:57:36 +08:00   ❤️ 1
    非常感谢,我免费订阅 1 年的
    不过不好意思问,如何防止自动续费?我看没有取消的选项
    cctrv
        18
    cctrv  
       2018-01-20 06:05:33 +08:00
    +1
    我也想知道如何取消自動訂閱。
    Wichna
        19
    Wichna  
    OP
       2018-01-20 08:49:37 +08:00 via Android
    @hugee 真的不是什么高手,只是多花了很多心思和时间去学习实践出来的
    Wichna
        20
    Wichna  
    OP
       2018-01-20 08:52:44 +08:00 via Android
    @twor
    @cctrv
    谢谢订阅,可以无理由取消订阅的,现在需要发邮件才行,FAQ 里面有写。后期会在官网加上这个功能,直接点个按钮就取消自动续费了。
    Wichna
        21
    Wichna  
    OP
       2018-01-20 08:53:25 +08:00 via Android
    @wtf94666 谢谢肯定😜
    yokinzzz
        22
    yokinzzz  
       2018-01-20 08:57:43 +08:00 via Android   ❤️ 1
    "how does it works"语法错误
    majinjing3
        23
    majinjing3  
       2018-01-20 09:41:23 +08:00 via Android
    支持~
    Wichna
        24
    Wichna  
    OP
       2018-01-20 09:47:54 +08:00
    @yokinzzz 很感谢指正英语的语法错误,我以后会注意的
    Wichna
        25
    Wichna  
    OP
       2018-01-20 09:48:09 +08:00
    @majinjing3 谢谢支持
    levywang
        26
    levywang  
       2018-01-20 12:26:15 +08:00
    为何官网不增加中文呢?
    Wichna
        27
    Wichna  
    OP
       2018-01-20 12:50:35 +08:00
    @levywang 因为 Anyshortcut 一开始只考虑海外用户,个人精力有限,然后就没有弄国际化了
    geekcorn
        28
    geekcorn  
       2018-01-20 12:52:42 +08:00
    超棒!
    ashanyue88
        29
    ashanyue88  
       2018-01-20 14:03:20 +08:00
    Stripe 可以收 RMB 吗?
    Wichna
        30
    Wichna  
    OP
       2018-01-20 14:43:18 +08:00 via Android
    @geekcorn 谢谢肯定😊
    Wichna
        31
    Wichna  
    OP
       2018-01-20 14:43:32 +08:00 via Android
    @ashanyue88 不可以收人民币
    Wichna
        32
    Wichna  
    OP
       2018-01-20 18:05:57 +08:00
    @ashanyue88 不过可以申请开通微信或者支付宝,另外还支持 Apple Pay
    suliuyes
        33
    suliuyes  
       2018-01-20 19:11:27 +08:00
    bulma 竟然是国人的???
    loading
        34
    loading  
       2018-01-20 19:34:01 +08:00
    厉害。
    虽然其实 Bulma.css 在里面的作用并不是很大,哈哈。
    Bulma.css 的命名方式我非常喜欢。
    yoa1q7y
        35
    yoa1q7y  
       2018-01-20 19:35:02 +08:00 via iPhone
    通篇关键字“女朋友”
    Wichna
        36
    Wichna  
    OP
       2018-01-20 20:08:33 +08:00
    @suliuyes 不是啊,bulma 是一个英国人写的,国人的优秀 css 框架是 spectre.css
    Wichna
        37
    Wichna  
    OP
       2018-01-20 20:11:09 +08:00
    @loading #34 是的,我的网站里面真正用到 bulma 里面的类确实不多
    Wichna
        38
    Wichna  
    OP
       2018-01-20 20:13:09 +08:00
    @yoa1q7y #35 并不是吧😳
    Heanes
        39
    Heanes  
       2018-01-20 23:48:41 +08:00
    我也是后端,前端还行,也对设计很感兴趣,但是设计思维还不行😂
    HELLONAV
        40
    HELLONAV  
       2018-01-21 16:43:57 +08:00 via Android
    厉害了
    renxiangbin
        41
    renxiangbin  
       2018-01-21 22:19:01 +08:00
    尊敬的楼主先生,有哪些推荐的 SaaS 网站推荐?
    Wichna
        42
    Wichna  
    OP
       2018-01-22 09:34:00 +08:00
    @Heanes 哈哈,有时间可以多看看 Dribbble 或者 behance 这类的网站,看到设计好看的网站都研究研究
    Wichna
        43
    Wichna  
    OP
       2018-01-22 09:34:32 +08:00
    @HELLONAV #40 谢谢认可😄
    Wichna
        44
    Wichna  
    OP
       2018-01-22 09:37:36 +08:00   ❤️ 1
    @renxiangbin SaaS 网站太多了,我提供几个最容易找 SaaS 网站的方法吧:

    1. ProductHunt 上面有 SaaS 的类别,里面全是 SaaS 网站 ttps://www.producthunt.com/topics/saas,或者直接搜索 SaaS 关键字
    2. 有一个叫 SaaS1000 的网站 http://saas1000.com/
    3. 专门整理 SaaS 网站设计的站 https://www.lapa.ninja/
    kenshin
        45
    kenshin  
       2018-01-22 10:14:07 +08:00 via Android
    学习~ 👍
    bilibiliQQ
        46
    bilibiliQQ  
       2018-01-22 11:03:30 +08:00 via Android
    vue 比 jq 难吧!我学 jq 一天入门,vue 三个月了还是一头雾水
    Wichna
        47
    Wichna  
    OP
       2018-01-22 14:01:56 +08:00   ❤️ 1
    @kenshin 互相学习😊
    Wichna
        48
    Wichna  
    OP
       2018-01-22 14:02:59 +08:00
    @bilibiliQQ vue 确实比 jq 要难,看看 vue 官方文档,应该不用多久就会了啊
    renxiangbin
        49
    renxiangbin  
       2018-01-22 14:10:25 +08:00
    @Wichna 谢谢回复,过去搜过大都是 IBM 之流...支持 Anyshortcut
    Wichna
        50
    Wichna  
    OP
       2018-01-22 14:58:17 +08:00
    @renxiangbin 不客气,哈哈,谢谢你的支持🙏
    azoon
        51
    azoon  
       2018-01-22 16:38:49 +08:00   ❤️ 1
    ![]( https://i.loli.net/2018/01/22/5a65a2c242edc.jpg)
    楼主,你好,这个样式能不能加个前缀啊...
    Wichna
        52
    Wichna  
    OP
       2018-01-22 16:40:49 +08:00
    @azoon 好的,多谢你的反馈,我马上加上,我以前没有注意,抱歉
    azoon
        53
    azoon  
       2018-01-22 16:44:23 +08:00   ❤️ 1
    Anyshortcut 插件的样式,都应该加个前缀吧,使用了快捷方式的网站的样式都被插件的同名样式覆盖了😅
    Wichna
        54
    Wichna  
    OP
       2018-01-22 16:52:27 +08:00
    @azoon 谢谢提醒,当然是都加了的,仅仅是用到了几个 common 的类忘了处理了🤣
    quietjosen
        55
    quietjosen  
       2018-01-22 17:27:17 +08:00
    不错不错;小伙,接活吗?😂
    Wichna
        56
    Wichna  
    OP
       2018-01-22 17:57:12 +08:00
    @quietjosen 哈哈,可以接啊,老板有活吗?🤣
    quietjosen
        57
    quietjosen  
       2018-01-22 19:16:30 +08:00
    @Wichna 我的产品网站啊,https://Toolinbox.net 看看怎么整得好看些?😂
    Wichna
        58
    Wichna  
    OP
       2018-01-22 23:38:05 +08:00
    @quietjosen 你的 i 系列软件不是一两个,数量确实不少,估计后期还有推出新的 i 系列软件?而且这些软件的定位一直都是 mac 平台,如果是做成一个静态网站的话,个人认为官网布局可以适当的参考或学习 apple.com ,然后再根据自己特色的改进或调整(主色调,字体,字号等等)。
    quietjosen
        59
    quietjosen  
       2018-01-23 09:06:18 +08:00
    @Wichna 你说的,产品多确实是个问题。其实,我也为 Klib 单独做过一个网站:Klib.me 一个产品的官网,确实容易做些。你的建议不错,谢谢,我来想想。
    Wichna
        60
    Wichna  
    OP
       2018-01-23 10:58:21 +08:00
    @quietjosen 哈哈,不客气,反正加好友了,以后有很多机会交流。

    我刚看了 klib 官网,最大的感觉就是太灰了,我认为人的眼睛对鲜艳一点的颜色更感兴趣,更能受到吸引,灰灰的网站,我个人就不愿意停留太久。
    wanwan
        61
    wanwan  
       2018-01-23 11:30:32 +08:00
    这个不错,支持一下。。
    quietjosen
        62
    quietjosen  
       2018-01-23 12:58:13 +08:00
    @Wichna 我能说 Klib.me 是模仿的苹果官网吗?看来模仿砸了 😂
    Wichna
        63
    Wichna  
    OP
       2018-01-23 13:59:16 +08:00
    @wanwan #61 感谢支持😃
    Wichna
        64
    Wichna  
    OP
       2018-01-23 13:59:57 +08:00
    @Wichna 哈哈,只是配色不够明亮
    myora
        65
    myora  
       2018-01-23 15:15:06 +08:00
    zhushuang+dongxiaocheng?😺
    Wichna
        66
    Wichna  
    OP
       2018-01-23 15:25:23 +08:00
    @myora 你是?😄
    Wichna
        67
    Wichna  
    OP
       2018-01-24 15:25:01 +08:00
    @azoon #53 发布了 1.7.2 版本,这个问题已经改了😃
    Wichna
        68
    Wichna  
    OP
       2018-01-25 16:26:20 +08:00
    @picturepan2 找到 Spectre.css 的作者了, 作者 2016 年在 V 站发过贴介绍过 Spectre.css https://www.v2ex.com/t/276425
    hanangellove
        69
    hanangellove  
       2018-01-26 10:15:24 +08:00
    顶! d=====( ̄▽ ̄*)b
    Wichna
        70
    Wichna  
    OP
       2018-01-26 11:08:04 +08:00
    @hanangellove 感谢😃
    ericbenjaming
        71
    ericbenjaming  
       2018-02-06 08:18:15 +08:00
    JT 是我朋友,哈哈,时间真小。😆
    Wichna
        72
    Wichna  
    OP
       2018-02-07 17:19:07 +08:00
    @ericbenjaming 厉害了,阁下在 UK 工作,怎样认识 JT 的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5963 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 02:01 · PVG 10:01 · LAX 18:01 · JFK 21:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.