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

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

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

    本人是一位货真价实的后端程序员,业余时间做一些 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
        1
    feng33   2018-01-19 23:49:50 +08:00
    用来做什么的,现在付费用户多吗
        2
    shiny   2018-01-19 23:51:27 +08:00   ♥ 1
    看到了语法错误:Your already added your credit card
        3
    Wichna   2018-01-19 23:54:37 +08:00
    @feng33 #1 一款自定义快捷键快速打开常用网页的插件,目前还没有写好教程,可以看看我那个帖子。欢迎你体验一下。😄
        4
    Wichna   2018-01-19 23:54:56 +08:00
    @shiny 还真是,感谢提醒
        5
    est   2018-01-19 23:58:39 +08:00
    赞一个。
        6
    Wichna   2018-01-20 00:05:51 +08:00
    @est 谢谢你的肯定
        7
    GooMS   2018-01-20 00:10:38 +08:00 via Android
    Stripe 怎么纳税?
        8
    oott123   2018-01-20 00:16:14 +08:00 via Android
    重点是有个画 logo 的女朋友。
        9
    Wichna   2018-01-20 00:22:43 +08:00
    @GooMS Stripe 收手续费,个人开发者,不用纳税吧
        10
    Wichna   2018-01-20 00:23:35 +08:00
    @oott123 嘎嘎嘎,这个还是有点重要
        11
    crysislinux   2018-01-20 00:23:35 +08:00
    楼主在国内么,怎么搞定的 stripe,不会搞了 atlas 吧。
        12
    Wichna   2018-01-20 00:26:20 +08:00
    @crysislinux 在国内,绕了弯搞定 Stripe 的,Atlas 试过,成本还是有点高,不适合我的小项目。感兴趣可以看看我另外一个网站,我整理了很多申请 Stripe 的途径 https://paybase.cn/
        13
    Wichna   2018-01-20 00:27:05 +08:00
    @Wichna
    @oott123
    Paybase 这个 logo 绝对是我自己用 Sketch 设计的
        14
    ericls   2018-01-20 00:59:21 +08:00 via iPhone
    好了 知道你有女朋友了
        15
    wtf94666   2018-01-20 01:36:48 +08:00 via Android
    好看 新手设计师自愧不如
        16
    hugee   2018-01-20 01:37:29 +08:00 via Android
    高手
        17
    twor   2018-01-20 01:57:36 +08:00   ♥ 1
    非常感谢,我免费订阅 1 年的
    不过不好意思问,如何防止自动续费?我看没有取消的选项
        18
    cctrv   2018-01-20 06:05:33 +08:00
    +1
    我也想知道如何取消自動訂閱。
        19
    Wichna   2018-01-20 08:49:37 +08:00 via Android
    @hugee 真的不是什么高手,只是多花了很多心思和时间去学习实践出来的
        20
    Wichna   2018-01-20 08:52:44 +08:00 via Android
    @twor
    @cctrv
    谢谢订阅,可以无理由取消订阅的,现在需要发邮件才行,FAQ 里面有写。后期会在官网加上这个功能,直接点个按钮就取消自动续费了。
        21
    Wichna   2018-01-20 08:53:25 +08:00 via Android
    @wtf94666 谢谢肯定😜
        22
    yokinzzz   2018-01-20 08:57:43 +08:00 via Android   ♥ 1
    "how does it works"语法错误
        23
    majinjing3   2018-01-20 09:41:23 +08:00 via Android
    支持~
        24
    Wichna   2018-01-20 09:47:54 +08:00
    @yokinzzz 很感谢指正英语的语法错误,我以后会注意的
        25
    Wichna   2018-01-20 09:48:09 +08:00
    @majinjing3 谢谢支持
        26
    levywang   2018-01-20 12:26:15 +08:00
    为何官网不增加中文呢?
        27
    Wichna   2018-01-20 12:50:35 +08:00
    @levywang 因为 Anyshortcut 一开始只考虑海外用户,个人精力有限,然后就没有弄国际化了
        28
    geekcorn   2018-01-20 12:52:42 +08:00
    超棒!
        29
    ashanyue88   2018-01-20 14:03:20 +08:00
    Stripe 可以收 RMB 吗?
        30
    Wichna   2018-01-20 14:43:18 +08:00 via Android
    @geekcorn 谢谢肯定😊
        31
    Wichna   2018-01-20 14:43:32 +08:00 via Android
    @ashanyue88 不可以收人民币
        32
    Wichna   2018-01-20 18:05:57 +08:00
    @ashanyue88 不过可以申请开通微信或者支付宝,另外还支持 Apple Pay
        33
    suliuyes   2018-01-20 19:11:27 +08:00
    bulma 竟然是国人的???
        34
    loading   2018-01-20 19:34:01 +08:00
    厉害。
    虽然其实 Bulma.css 在里面的作用并不是很大,哈哈。
    Bulma.css 的命名方式我非常喜欢。
        35
    yoa1q7y   2018-01-20 19:35:02 +08:00 via iPhone
    通篇关键字“女朋友”
        36
    Wichna   2018-01-20 20:08:33 +08:00
    @suliuyes 不是啊,bulma 是一个英国人写的,国人的优秀 css 框架是 spectre.css
        37
    Wichna   2018-01-20 20:11:09 +08:00
    @loading #34 是的,我的网站里面真正用到 bulma 里面的类确实不多
        38
    Wichna   2018-01-20 20:13:09 +08:00
    @yoa1q7y #35 并不是吧😳
        39
    Heanes   2018-01-20 23:48:41 +08:00
    我也是后端,前端还行,也对设计很感兴趣,但是设计思维还不行😂
        40
    HELLONAV   2018-01-21 16:43:57 +08:00 via Android
    厉害了
        41
    renxiangbin   2018-01-21 22:19:01 +08:00
    尊敬的楼主先生,有哪些推荐的 SaaS 网站推荐?
        42
    Wichna   2018-01-22 09:34:00 +08:00
    @Heanes 哈哈,有时间可以多看看 Dribbble 或者 behance 这类的网站,看到设计好看的网站都研究研究
        43
    Wichna   2018-01-22 09:34:32 +08:00
    @HELLONAV #40 谢谢认可😄
        44
    Wichna   2018-01-22 09:37:36 +08:00
    @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/
        45
    kenshin   2018-01-22 10:14:07 +08:00 via Android
    学习~ 👍
        46
    bilibiliQQ   2018-01-22 11:03:30 +08:00 via Android
    vue 比 jq 难吧!我学 jq 一天入门,vue 三个月了还是一头雾水
        47
    Wichna   2018-01-22 14:01:56 +08:00   ♥ 1
    @kenshin 互相学习😊
        48
    Wichna   2018-01-22 14:02:59 +08:00
    @bilibiliQQ vue 确实比 jq 要难,看看 vue 官方文档,应该不用多久就会了啊
        49
    renxiangbin   2018-01-22 14:10:25 +08:00
    @Wichna 谢谢回复,过去搜过大都是 IBM 之流...支持 Anyshortcut
        50
    Wichna   2018-01-22 14:58:17 +08:00
    @renxiangbin 不客气,哈哈,谢谢你的支持🙏
        51
    azoon   2018-01-22 16:38:49 +08:00   ♥ 1
    ![]( https://i.loli.net/2018/01/22/5a65a2c242edc.jpg)
    楼主,你好,这个样式能不能加个前缀啊...
        52
    Wichna   2018-01-22 16:40:49 +08:00
    @azoon 好的,多谢你的反馈,我马上加上,我以前没有注意,抱歉
        53
    azoon   2018-01-22 16:44:23 +08:00   ♥ 1
    Anyshortcut 插件的样式,都应该加个前缀吧,使用了快捷方式的网站的样式都被插件的同名样式覆盖了😅
        54
    Wichna   2018-01-22 16:52:27 +08:00
    @azoon 谢谢提醒,当然是都加了的,仅仅是用到了几个 common 的类忘了处理了🤣
        55
    quietjosen   2018-01-22 17:27:17 +08:00
    不错不错;小伙,接活吗?😂
        56
    Wichna   2018-01-22 17:57:12 +08:00
    @quietjosen 哈哈,可以接啊,老板有活吗?🤣
        57
    quietjosen   2018-01-22 19:16:30 +08:00
    @Wichna 我的产品网站啊,https://Toolinbox.net 看看怎么整得好看些?😂
        58
    Wichna   2018-01-22 23:38:05 +08:00
    @quietjosen 你的 i 系列软件不是一两个,数量确实不少,估计后期还有推出新的 i 系列软件?而且这些软件的定位一直都是 mac 平台,如果是做成一个静态网站的话,个人认为官网布局可以适当的参考或学习 apple.com ,然后再根据自己特色的改进或调整(主色调,字体,字号等等)。
        59
    quietjosen   2018-01-23 09:06:18 +08:00
    @Wichna 你说的,产品多确实是个问题。其实,我也为 Klib 单独做过一个网站:Klib.me 一个产品的官网,确实容易做些。你的建议不错,谢谢,我来想想。
        60
    Wichna   2018-01-23 10:58:21 +08:00
    @quietjosen 哈哈,不客气,反正加好友了,以后有很多机会交流。

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