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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Ask HN: What are weird and/or novel ways to do web UIs?

434 点作者 louismerlin超过 5 年前
Do you know any websites that have weird UIs ? Something like a ZUI [1] for example.<p>[1] https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Zooming_user_interface

81 条评论

zxcvbn4038超过 5 年前
I once worked at Chase Manhattan Bank and one of their internal networking teams had a web site for wiring requests. They didn’t want to work too hard so their UI was designed to make data entry as slow as possible, mostly by using huge multi-level drop down lists where the slightest twitch would make them collapse and you would have to start over navigating through them, repeat a dozen times for every run of cable, several runs required to make an end to end connection. It wasn’t custom programming, just taking full advantage of the browsers of the era’s inability to render the UI component for that. So I was building out a data center and needed Something like forty thousand cables run which translated into around one hundred and fifty thousand segments. I tried to give this info via a spreadsheet but they were steadfast that the web interface was the only way they could receive it. So I wrote a script to just post the data directly without going through the UI, ran it, and went home. Turns out all their web form did was e-mail the values to a half dozen people. The e-mail system was Lotus Notes (dates this) so each person got their own copy and there was a lot of overhead. The sudden influx of a million e-mail messages brought down Chase’s email system for two thirds of the country. They spent days clearing the mail queue and recovering - they had to fly in IBM techs with suitcases full of disk drives to add the storage needed. Everyone who received the wiring requests spent days deleting them with new ones arriving as quickly as they deleted the old ones. Then when things were finally normal again they asked me to resend them my spreadsheet.
评论 #21145549 未加载
评论 #21147139 未加载
评论 #21146364 未加载
评论 #21146029 未加载
评论 #21148100 未加载
评论 #21151925 未加载
评论 #21153977 未加载
评论 #21148021 未加载
评论 #21147367 未加载
评论 #21145552 未加载
评论 #21145479 未加载
TekMol超过 5 年前
This website uses scatterplots instead of lists to display products:<p><a href="https:&#x2F;&#x2F;www.productchart.com" rel="nofollow">https:&#x2F;&#x2F;www.productchart.com</a><p>So on Product Chart, you can for example say &quot;Show me 300 smartphones and put the price on the x-axis and the size on the y-axis&quot;.<p>It&#x27;s a bit like you would lay out things on a table and then organize them by some criteria.
评论 #21145936 未加载
评论 #21149387 未加载
评论 #21145361 未加载
评论 #21145323 未加载
评论 #21147324 未加载
评论 #21146372 未加载
toddmorey超过 5 年前
An impressive implementation of a web UI is Figma:<p>Figma is written in C++ code then run in the browser by cross-compiling it to a subset of JavaScript known as asm.js. The asm.js subset is basically JavaScript where you can only use numbers (no strings, objects, etc.). This is all you need to run C++ code since everything in C++ is either a number or a pointer to a number, and pointers are also numbers. The C++ address space is just a giant JavaScript array of numbers and pointers are just indices into that array.<p>Of course wasm is more performant as it matures, but they’ve been at this since 2015 and I’m impressed by how responsive the app is.<p><a href="https:&#x2F;&#x2F;www.figma.com&#x2F;blog&#x2F;webassembly-cut-figmas-load-time-by-3x&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.figma.com&#x2F;blog&#x2F;webassembly-cut-figmas-load-time-...</a>
评论 #21147407 未加载
yakshaving_jgt超过 5 年前
I used to work at a company that behind the scenes had to <i>use</i> a web UI in a weird&#x2F;novel way for their system to work.<p>This company&#x27;s web UI would allow its users to initiate bank transactions. Nothing weird from the user&#x27;s end. However, the company had to &quot;approve&quot; the transactions in real time, synchronously. The company could do all sorts of programmatic verification on the user, recipient, transaction, etc, but we had to actually <i>physically press</i> a button on the screen of a smart telephone to approve the transaction. There was no programmatic way around this.<p>Some programmers at the company came up with a robotic arm which could be controlled programmatically, which would do the telephone screen pressing for us.<p>I always thought that was pretty clever.
评论 #21153812 未加载
namrog84超过 5 年前
Go spend 5 minutes here on pc desktop. <a href="http:&#x2F;&#x2F;cyberspaceandtime.com&#x2F;Gaano9Y6KAU.video+related" rel="nofollow">http:&#x2F;&#x2F;cyberspaceandtime.com&#x2F;Gaano9Y6KAU.video+related</a><p>I came across this site a few weeks ago. And it&#x27;s quite unlike anything I&#x27;ve seen. And try to inspect the site using browser inspector. It&#x27;s a very different ui than I&#x27;ve ever seen before.
评论 #21145161 未加载
评论 #21149384 未加载
评论 #21159781 未加载
评论 #21145389 未加载
评论 #21146142 未加载
评论 #21148443 未加载
melvinroest超过 5 年前
This is a bit of an odd answer, even in a question that expects odd answers. That is because it sounds so normal, yet I have Googled for it and almost <i>no one</i> advocates for it. They do maybe advocate for it in terms of design, but I mean in making actual static websites.<p>Enter Google Slides: the product for your uncle Joe and aunt Lysa to create their own websites without knowing how to code!<p>I even have an example website for you that I made as it is a project that I&#x27;m working on in my free time. I already remade the website in actual HTML&#x2F;CSS&#x2F;JS but I was simply curious how well Google Slides would work. IMO, it has a thing or two over Sketch (such as displaying GIFs, having links) since I made the actual layout with Sketch, and then redid everything with Google Slides to do a side by side comparison (I went too far with this :P).<p>There are a few things to consider:<p>1. Every page needs to be made in its own slide show as you cannot have different document sizes.<p>2. You will be stuck with a slide viewer, but I figured for the industrious fellow, you could simply inject some JavaScript that disables that whole viewer when you iframe your Google Slides website.<p>3. There are zooming issues because the pages are of different document sizes.<p>4. The fact that you need to define document sizes is noteworthy in itself.<p>So yea, not super duper practical, unless you aren&#x27;t a web designer and simply want a simple profile page online, but definitely weird :D<p>Example website &#x2F; project that I&#x27;m working on (and recreated to the best of my abilities in Google Slides for fun): <a href="https:&#x2F;&#x2F;docs.google.com&#x2F;presentation&#x2F;d&#x2F;e&#x2F;2PACX-1vRxqg4SNv1SlUZzPwu2ycjqMKPqk4fgtFDroq0nwbVp_m7hd8Zbui04g3ademPQP-efmdzi9PHW3Uoj&#x2F;pub?start=false&amp;loop=false&amp;delayms=3000&amp;slide=id.g61e126f25a_0_1" rel="nofollow">https:&#x2F;&#x2F;docs.google.com&#x2F;presentation&#x2F;d&#x2F;e&#x2F;2PACX-1vRxqg4SNv1Sl...</a>
评论 #21145972 未加载
评论 #21145497 未加载
评论 #21145218 未加载
评论 #21149899 未加载
评论 #21156093 未加载
评论 #21146637 未加载
评论 #21149077 未加载
ggerganov超过 5 年前
Not sure if this counts as weird or novel web UI, but I wrote a small library to stream Dear ImGui&#x27;s vertex and index buffers to browsers via websockets, and just render them using WebGL&#x27;s drawElements [0]. There a couple of examples linked in the README for anyone interested.<p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;ggerganov&#x2F;imgui-ws" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ggerganov&#x2F;imgui-ws</a>
评论 #21145577 未加载
评论 #21146114 未加载
thewway481超过 5 年前
it&#x27;s just a proof of concept, but this web site discussed a few weeks ago absolutely blew my socks off:<p>discussion:<p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=20929801" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=20929801</a><p>site:<p><a href="https:&#x2F;&#x2F;3dforreddit.com&#x2F;r&#x2F;pics" rel="nofollow">https:&#x2F;&#x2F;3dforreddit.com&#x2F;r&#x2F;pics</a><p>From a comment:<p>&quot;<p>How to use it Desktop: Click to start, WASD and mouse to move<p>Mobile: Dragging on left half of screen is move, right have is look<p>Append any subreddit to the url to switch subreddits<p>&quot;<p>It should work in any browser but if you have a good GPU it will help a ton.
评论 #21146179 未加载
评论 #21156982 未加载
评论 #21149249 未加载
ag8超过 5 年前
The rotating cube interface [1], where each of six parts of a form is on a different face of a cube.<p>[1] <a href="https:&#x2F;&#x2F;ux.stackexchange.com&#x2F;questions&#x2F;11229&#x2F;is-this-rotating-cube-interface-user-friendly" rel="nofollow">https:&#x2F;&#x2F;ux.stackexchange.com&#x2F;questions&#x2F;11229&#x2F;is-this-rotatin...</a>
评论 #21149643 未加载
评论 #21152099 未加载
rwmj超过 5 年前
This isn&#x27;t a weird UI as such, but it&#x27;s probably a technology that isn&#x27;t explored enough. Back in the very early 2000s before Javascript was universally available, we wrote a CGI-based technology that worked by persisting the entire state of the page between clicks. It was a true widget-based server-side GUI, so you could build single page UIs by composing widgets such as buttons, labels, and more complex things, hierarchically (like native GUIs). The whole page would reload between clicks but everything was so lightweight and tiny that wasn&#x27;t actually much of a problem, at least by the standards of the day.<p>It&#x27;s all open source but probably doesn&#x27;t compile on modern machines, and of course for extra fun we wrote the entire stack including the webserver, CGIs, cooperative threading, database layer and C libraries from scratch. From top to bottom this is the entire stack:<p><a href="http:&#x2F;&#x2F;git.annexia.org&#x2F;?p=monolith.git;a=summary" rel="nofollow">http:&#x2F;&#x2F;git.annexia.org&#x2F;?p=monolith.git;a=summary</a><p><a href="http:&#x2F;&#x2F;git.annexia.org&#x2F;?p=rws.git;a=summary" rel="nofollow">http:&#x2F;&#x2F;git.annexia.org&#x2F;?p=rws.git;a=summary</a><p><a href="http:&#x2F;&#x2F;git.annexia.org&#x2F;?p=pthrlib.git;a=summary" rel="nofollow">http:&#x2F;&#x2F;git.annexia.org&#x2F;?p=pthrlib.git;a=summary</a><p><a href="http:&#x2F;&#x2F;git.annexia.org&#x2F;?p=c2lib.git;a=summary" rel="nofollow">http:&#x2F;&#x2F;git.annexia.org&#x2F;?p=c2lib.git;a=summary</a><p>Edit: I should say that it&#x27;s obsolete if you can make the nowadays reasonable assumption that Javascript can be used on the client side. It&#x27;s more like &quot;this is the crazy shit that a team of developers in their 20s with VC funding, disfunctional management and time on their hands get up to&quot;.<p>Edit 2: It was used in production for quite a long time, certainly until the 2010s. If you were in a UK school in the mid 2000s there&#x27;s a chance you might have used this.
评论 #21145833 未加载
评论 #21154096 未加载
Doxin超过 5 年前
Last time I checked Gtk has a web backend, meaning you can run basically any gtk app with the right environment variables and it&#x27;ll pop open a browser with the app rendered pixel perfect into it.<p>I don&#x27;t really think it&#x27;s useful as an actual web technology since you&#x27;d need to spawn a process, reserve a port, and keep a connection open for each and every user which seems like it wouldn&#x27;t be workable.<p>It&#x27;s a neat trick though.
评论 #21153704 未加载
tiborsaas超过 5 年前
Check out <a href="http:&#x2F;&#x2F;hoverstat.es&#x2F;" rel="nofollow">http:&#x2F;&#x2F;hoverstat.es&#x2F;</a><p>It&#x27;s full of examples with unconventional design.
tomglynch超过 5 年前
You might find some interesting examples by going through the websites here: <a href="http:&#x2F;&#x2F;brutalistwebsites.com" rel="nofollow">http:&#x2F;&#x2F;brutalistwebsites.com</a><p>They definitely dont all have weird UI, but some do.
评论 #21147318 未加载
dandare超过 5 年前
Inspired by zoomable interface <a href="https:&#x2F;&#x2F;uk.wikibudgets.org&#x2F;w&#x2F;united-kingdom-budget-2015" rel="nofollow">https:&#x2F;&#x2F;uk.wikibudgets.org&#x2F;w&#x2F;united-kingdom-budget-2015</a>
评论 #21148557 未加载
评论 #21145364 未加载
brianpgordon超过 5 年前
I think briefly it was considered cutting edge to have your page content be delivered as an XML document, with an accompanying XSL or XSLT file to mechanically translate the XML into a full-fledged XHTML page suitable for rendering in a browser. I even saw it once on some public website, I think maybe for a Blizzard game? The content XML looked great; very intuitive. The XSLT stuff for translating into XHTML, well, not so much.
评论 #21155828 未加载
评论 #21151552 未加载
评论 #21151797 未加载
评论 #21152885 未加载
superkuh超过 5 年前
For the comment system on my website I wrote a perl script that tails the nginx logs for all instances of &#x2F;@say&#x2F; in the file path of requests. Anything after a &#x2F;@say&#x2F; is considered comment. So the UI for commenting on my website is like,<p><a href="http:&#x2F;&#x2F;mywebsite.com&#x2F;somepage.html&#x2F;@say&#x2F;Hey" rel="nofollow">http:&#x2F;&#x2F;mywebsite.com&#x2F;somepage.html&#x2F;@say&#x2F;Hey</a>, neat somepage content, guy.<p>Some nginx redirects also included to take users to the comments page after submitting.
Bilters超过 5 年前
I would say the website which shows you and tells you what you&#x27;re doing in the browser; <a href="https:&#x2F;&#x2F;clickclickclick.click&#x2F;" rel="nofollow">https:&#x2F;&#x2F;clickclickclick.click&#x2F;</a>
Ruphin超过 5 年前
I worked on a project before that explores using non-traditional UI on the web:<p><a href="https:&#x2F;&#x2F;overwebs.ruph.in" rel="nofollow">https:&#x2F;&#x2F;overwebs.ruph.in</a> (warning - sound and high bandwidth)<p>It emulates a game UI, and uses background video to simulate physical movement when navigating between pages. It also incorporates some controls that are unusual for normal web applications like keyboard controls (shortcuts like &#x27;Esc&#x27; to go back, &#x27;Enter&#x27; to open chat).<p>It&#x27;s a pretty old and very experimental project so some stuff is in a semi-broken state. I should revisit it sometime and clean up.
评论 #21158476 未加载
justusthane超过 5 年前
<a href="https:&#x2F;&#x2F;www.kickscondor.com" rel="nofollow">https:&#x2F;&#x2F;www.kickscondor.com</a> is really bizarre.<p>Animated backgrounds, infinite scrolling, elements that are only partially visible until you mouseover them, and uses zooming interface for opening individual posts.<p>Feels like a bastard child of GeoCities and modern web.
评论 #21152066 未加载
tontonius超过 5 年前
I like <a href="http:&#x2F;&#x2F;zombo.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;zombo.com&#x2F;</a><p>You can do anything at zombocom
评论 #21161585 未加载
ssijak超过 5 年前
Well, not that novel tech wise, but design always cracks me up <a href="https:&#x2F;&#x2F;www.lingscars.com" rel="nofollow">https:&#x2F;&#x2F;www.lingscars.com</a>
评论 #21148539 未加载
sp332超过 5 年前
A classic from 1996. Olia Lialina (@GIFmodel on twitter) wanted to make a website that had the feeling of a movie, far before movies were feasible online. So she made My Boyfriend Came Back From the War. Here&#x27;s a mirror: <a href="http:&#x2F;&#x2F;www.teleportacia.org&#x2F;war&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.teleportacia.org&#x2F;war&#x2F;</a>
sksksk超过 5 年前
<a href="http:&#x2F;&#x2F;www.dontclick.it&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.dontclick.it&#x2F;</a> is a super old (Flash) demo of a UI that doesn&#x27;t have any clicking
评论 #21145321 未加载
TeMPOraL超过 5 年前
Well, HN is pretty weird for the web of today. That&#x27;s also why it&#x27;s so nice to use it. I wish more sites had simple, lean UI that let the text communicate its message, instead of being interactive marketing brochures.
daosyn超过 5 年前
Bong International [1] has done interesting and weird stuff. One of my personal favorites of theirs is bo en&#x27;s website [2]. They have also done stuff for Bloomberg.<p>[1] <a href="http:&#x2F;&#x2F;bong.international&#x2F;" rel="nofollow">http:&#x2F;&#x2F;bong.international&#x2F;</a> [2] <a href="http:&#x2F;&#x2F;bo-en.info&#x2F;" rel="nofollow">http:&#x2F;&#x2F;bo-en.info&#x2F;</a>
atrilumen超过 5 年前
I&#x27;m not ready to show it yet (#FML), but my interface renders <i>everything in threads</i>, including graphical controls, which yield messages.<p>Nothing happens outside the context of a thread. So it leaves a log of everything that happened in that context. Graphical elements can go full-screen... but you don&#x27;t lose connection to the thread that they appear in.<p>It will tile these threads across all your (funky, heterogeneous) screens.<p>I think this will help you to organize things, and homogenize and simplify your experience with those things across devices.<p>Imagine actually knowing where everything is, and being able to see who, when, and why anybody touched it.
license2e超过 5 年前
Zircle: A frontend library to develop zoomable user interfaces<p><a href="http:&#x2F;&#x2F;zircle.io" rel="nofollow">http:&#x2F;&#x2F;zircle.io</a><p>Smart home dashboard example: <a href="https:&#x2F;&#x2F;zircleui.github.io&#x2F;docs&#x2F;examples&#x2F;home.html" rel="nofollow">https:&#x2F;&#x2F;zircleui.github.io&#x2F;docs&#x2F;examples&#x2F;home.html</a>
dec0dedab0de超过 5 年前
Weird UIs were what I miss the most about the web in the late 90s. There were no rules, and people were just winging it. I remember my friends making websites for their bands and bragging about how they made it so hard to use, that it was like a secret club if you figured it out.
评论 #21147242 未加载
miki123211超过 5 年前
repl.it&#x27;s jobs page[1] is basically a bash terminal running on the web. You navigate it by using standard commands like cd and ls, and read files with cat, more or similar. This is <i>NOT</i> a bash emulator, this is an actual bash, running in a Docker container somewhere. repl.it lets you build an app, in almost any language, on the web, and run it. If it&#x27;s a console app using stdin&#x2F;stdout, they even provide you with a terminal emulator. Well, that&#x27;s some pretty impressive instance of dogfooding.<p>[1] <a href="https:&#x2F;&#x2F;repl.it&#x2F;jobs" rel="nofollow">https:&#x2F;&#x2F;repl.it&#x2F;jobs</a>
评论 #21167265 未加载
haolez超过 5 年前
I’ve always liked the approach of <a href="http:&#x2F;&#x2F;intercoolerjs.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;intercoolerjs.org&#x2F;</a>.<p>But I’m not a web dev and I don’t know the real reasons why it didn’t get traction :)
评论 #21147405 未加载
评论 #21150006 未加载
8jef超过 5 年前
Weird? Maybe. Super simple single page responsive website, no JS, CSS + HTML only: <a href="https:&#x2F;&#x2F;isabellegrell.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;isabellegrell.com&#x2F;</a>
评论 #21145561 未加载
mzzter超过 5 年前
Back in design school, web portfolios could get pretty interesting. One novel way was to put up a collaborative google doc with some initial info that visitors could edit.<p>An example of this was <a href="http:&#x2F;&#x2F;carlyayres.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;carlyayres.com&#x2F;</a> though it has since been updated to a non-editable page.
khuknows超过 5 年前
Cool interface for user flow diagrams: <a href="https:&#x2F;&#x2F;overflow.io&#x2F;s&#x2F;9ST7SX&#x2F;" rel="nofollow">https:&#x2F;&#x2F;overflow.io&#x2F;s&#x2F;9ST7SX&#x2F;</a>
评论 #21148550 未加载
评论 #21146400 未加载
评论 #21145826 未加载
jho406超过 5 年前
I wrote a library for React, Redux and Rails. Allowing you to build SPA without APIs. <a href="https:&#x2F;&#x2F;github.com&#x2F;jho406&#x2F;Breezy" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jho406&#x2F;Breezy</a><p>Breezy&#x27;s insight is that frontends are wildly complex due to the industry vertical (say.. childwelfare), so instead of shaping your state for business, breezy shapes it for content. Content being a header, footer, body as opposed to a post model or user model. This means each page is represented as a node in the Breezy Redux tree with its own header body and footer.<p>On one hand, it is annoying to traverse the pages to make updates, on the other, I can look at any running application and make close-to-correct assumptions on how to update the store. After all, most applications regardless of industry vertical has a header, body and footer somewhere.
评论 #21148432 未加载
评论 #21146588 未加载
carapace超过 5 年前
I once made a calendar UI that used D3 to animate little circles that represented days. Switching from e.g. week to month caused the circles to flow to new locations. It had a pastel color scheme and it was really beautiful. Everyone who came into the office and saw it said things like, &quot;I&#x27;ve never seen anything like this on the web.&quot; It was just eye candy really. It never saw the light of day. I begged them to put it in front of users or investors but no dice.<p>BTW, if you like ZUIs read up on Jef Raskin&#x27;s &quot;Humane Interface&quot; <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;The_Humane_Interface" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;The_Humane_Interface</a>
评论 #21149578 未加载
WillPontificate超过 5 年前
I favor brutalism. A 1998 style design completely contained in inline code in the header. Using base fonts and features that are supported by all browsers.<p>It has a unique capability: it loads quickly.
评论 #21146240 未加载
pssflops超过 5 年前
I&#x27;ve always had an affinity for weird image hotmaps at SuperBad[0].<p>[0]<a href="http:&#x2F;&#x2F;www.superbad.com" rel="nofollow">http:&#x2F;&#x2F;www.superbad.com</a>
ehnto超过 5 年前
Vimium may not be a web UI itself but it layers on top of them, and I have found it to be a way more efficient and concise way to navigate the web.
评论 #21148488 未加载
throwaway_bad超过 5 年前
Dribbble has a really nice collection:<p><a href="https:&#x2F;&#x2F;dribbble.com&#x2F;shots&#x2F;popular&#x2F;animation?timeframe=ever" rel="nofollow">https:&#x2F;&#x2F;dribbble.com&#x2F;shots&#x2F;popular&#x2F;animation?timeframe=ever</a><p>Codepen has stuff you can actually see source code of:<p><a href="https:&#x2F;&#x2F;codepen.io&#x2F;popular&#x2F;pens&#x2F;" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;popular&#x2F;pens&#x2F;</a>
neurostimulant超过 5 年前
This library allows you to compile your winform C# gui app into a set of html, js, wasm and dll files and run them in the browser: <a href="https:&#x2F;&#x2F;github.com&#x2F;roozbehid&#x2F;WasmWinforms" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;roozbehid&#x2F;WasmWinforms</a><p>Completely blew my mind! Probably not practical but really make me wonder if anything is possible with webassembly.
评论 #21149137 未加载
nathell超过 5 年前
I haven&#x27;t seen this on a page, but David Gelernter wrote about Lifestreams[1] in &quot;Mechanical Beauty,&quot; which is a good read.<p>[1]: <a href="http:&#x2F;&#x2F;www.cs.yale.edu&#x2F;homes&#x2F;freeman&#x2F;lifestreams.html" rel="nofollow">http:&#x2F;&#x2F;www.cs.yale.edu&#x2F;homes&#x2F;freeman&#x2F;lifestreams.html</a>
评论 #21147186 未加载
harryf超过 5 年前
<a href="http:&#x2F;&#x2F;www.coboloncogs.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.coboloncogs.org&#x2F;</a>
pjungwir超过 5 年前
Isotope is a pretty fun jQuery plugin: <a href="https:&#x2F;&#x2F;isotope.metafizzy.co&#x2F;" rel="nofollow">https:&#x2F;&#x2F;isotope.metafizzy.co&#x2F;</a><p>An idea I read about long ago is ring-based context menus. So instead of getting a square list of choices, one per line, you get each choice arranged in a ring around your cursor. So maybe Copy is at 1 o&#x27;clock, Cut 2 o&#x27;clock, etc. It would be easier to &quot;target&quot; your choice, and even easier once you learned the position of things. I don&#x27;t know if this has ever been tried. Maybe in a game? EDIT: apparently this is called a pie menu or radial menu: <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Pie_menu" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Pie_menu</a>
评论 #21155330 未加载
laumars超过 5 年前
Javascript-less seems weird these days yet you can build most sites without really needing Javascript.
throwaway_bad超过 5 年前
3d web comics? <a href="https:&#x2F;&#x2F;sketchfab.com&#x2F;3d-models&#x2F;headache-xkcd-880-5659b3b539e94dcca00a315ac6a48256" rel="nofollow">https:&#x2F;&#x2F;sketchfab.com&#x2F;3d-models&#x2F;headache-xkcd-880-5659b3b539...</a><p>Also New York Times and other news site sometimes have really sophisticated interactive story telling or visualizations.
boldslogan超过 5 年前
I&#x27;ve seen a website favicon be used to show loading and other information at the top of the browser inside the tab. that was really cool. They made the emoji cycle through multiple so that the favicon was animated.
Mattasher超过 5 年前
One of the first websites I built (and one of the few sites left untouched for 20yrs) was a design experiment: <a href="http:&#x2F;&#x2F;lyca.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;lyca.com&#x2F;</a>
subpixel超过 5 年前
I still love this chestnut from years and years past: <a href="http:&#x2F;&#x2F;noonebelongsheremorethanyou.com&#x2F;00025" rel="nofollow">http:&#x2F;&#x2F;noonebelongsheremorethanyou.com&#x2F;00025</a>
bullen超过 5 年前
I tried mixing SVG and pixel perfect elements: <a href="http:&#x2F;&#x2F;fuse.rupy.se" rel="nofollow">http:&#x2F;&#x2F;fuse.rupy.se</a><p>It&#x27;s really hard because it behaves differently with different aspect ratios.
spiralganglion超过 5 年前
I created this SVG-based graph layout GUI [1] for our learning media website LunchBox Sessions [2]. The graph lets us visually express the prerequisites of each session. Using SVG meant I could do some fun animations to hide the load time when opening a session.<p>[1] <a href="https:&#x2F;&#x2F;lunchboxsessions.com&#x2F;explore&#x2F;hydraulics" rel="nofollow">https:&#x2F;&#x2F;lunchboxsessions.com&#x2F;explore&#x2F;hydraulics</a><p>[2] <a href="https:&#x2F;&#x2F;lunchboxsessions.com" rel="nofollow">https:&#x2F;&#x2F;lunchboxsessions.com</a>
评论 #21157986 未加载
mo1ok超过 5 年前
I&#x27;d a big fan of some of the webGL experiments hanging around the internet.<p>i.e. <a href="http:&#x2F;&#x2F;taotajima.jp&#x2F;" rel="nofollow">http:&#x2F;&#x2F;taotajima.jp&#x2F;</a>
clemensnk超过 5 年前
With Webstrates (<a href="https:&#x2F;&#x2F;webstrates.net" rel="nofollow">https:&#x2F;&#x2F;webstrates.net</a>) we experiment with building web UIs by persisting and synchronizing the DOM. I wrote a short blog post about it here: <a href="https:&#x2F;&#x2F;medium.com&#x2F;@clemensnk&#x2F;a-brief-overview-of-webstrates-7847333b39f7" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;@clemensnk&#x2F;a-brief-overview-of-webstrates...</a>
sktrdie超过 5 年前
Using Behavioral Programming you can write UIs mainly using event traces. The state of the app is not really contained and managed in the usual way: it&#x27;s based off of the state of many concurrent threads running at the same time. Here&#x27;s a TicTacToe example: <a href="https:&#x2F;&#x2F;lmatteis.github.io&#x2F;react-behavioral&#x2F;" rel="nofollow">https:&#x2F;&#x2F;lmatteis.github.io&#x2F;react-behavioral&#x2F;</a>
jaimex2超过 5 年前
Back in the days of Flash the web was full of interesting and weird UIs with tons of art and animation.<p>ie -<p><a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=N-2sKZjawq4" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=N-2sKZjawq4</a><p><a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=UHbQmqmmIFk" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=UHbQmqmmIFk</a><p>Now its just the same boring Bootstrap&#x2F;Material design cookie cutter crap everywhere.
评论 #21148511 未加载
bradenb超过 5 年前
ZUI huh? Thanks for introducing me to that term. I didn&#x27;t know there was a name for a type of interface I&#x27;ve created in WPF a number of times. We&#x27;ve always called it a &quot;semantic zooming&quot; interface. WPF makes this super easy, but turns out it&#x27;s a little harder in the web, but we&#x27;ve almost matched the UX!
avaer超过 5 年前
My metabrowser [1] transludes webgl volumes into 3d space, and is navigated with FPS controls or VR. It’s ultimately a web site, but I’ve had chromium developers argue with me it’s not really “web”.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;exokitxr&#x2F;exokit-browser" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;exokitxr&#x2F;exokit-browser</a>
Zarel超过 5 年前
Pokémon Showdown uses a two-column layout on desktop, where you can drag panels between the columns:<p><a href="https:&#x2F;&#x2F;play.pokemonshowdown.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;play.pokemonshowdown.com&#x2F;</a><p>I don&#x27;t have a good sense of whether or not users actually like it, though.
l00sed超过 5 年前
I stumbled upon this guy&#x27;s site recently: <a href="http:&#x2F;&#x2F;cyberspaceandtime.com&#x2F;Gaano9Y6KAU.video+related" rel="nofollow">http:&#x2F;&#x2F;cyberspaceandtime.com&#x2F;Gaano9Y6KAU.video+related</a><p>Think it&#x27;s been around for a while, but pretty fun and weird. :)
teknopaul超过 5 年前
Apache&#x2F;Nginx SSI + fcgiwrap + bash scripts.<p>For little admin&#x2F;monitoring ui for Linux servers this is crazy quick to build. Probably would not want such sites on the Internet. Pwnd instantly if you have shell shock<p>If you have a good set of cli admin tools #youmightnotneedphp :)
xylophone超过 5 年前
How about exe in the URL? I can only imagine whats going on behind the scenes. <a href="https:&#x2F;&#x2F;www.example.com&#x2F;searchUtility.exe?a=1" rel="nofollow">https:&#x2F;&#x2F;www.example.com&#x2F;searchUtility.exe?a=1</a>
评论 #21146711 未加载
nick_vdb31超过 5 年前
A novel way would be to create a UI using a UI that exports the UI code. Using one of these no code tools like Webflow or Handoff. (Disclaimer: I&#x27;m the founder of Handoff. Check: www.handoff.design)
tsak超过 5 年前
Using Vis.js timeline for an artist collaboration website: <a href="http:&#x2F;&#x2F;sirius.modeselektor.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;sirius.modeselektor.com&#x2F;</a>
zitterbewegung超过 5 年前
Django and SQLite for the backend and jQuery for the front end. And a $5 a month server from pythonanywhere.com. Also using a splash page from glitch.com using static html.
评论 #21147234 未加载
dynamite-ready超过 5 年前
I&#x27;m a bit confused by the title. Does the OP mean, &#x27;tools and techniques to create (do) UI&#x27;?<p>Or is he or she referring to the look and feel of the final product itself?
dugluak超过 5 年前
back in 2007 I joined a company in a department where they wrote tailor made websites for clients. One of the sites was built to generate reports for ~50 customer&#x27;s accounts. It was a single webpage with 50 buttons having the account name on each one of them. So you would see a bunch of different shape buttons on the page, you click a button and you would be redirected to another website. It was internally referred as Death By Buttons.
macca321超过 5 年前
<a href="https:&#x2F;&#x2F;theweekly.co.uk&#x2F;ap2&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;theweekly.co.uk&#x2F;ap2&#x2F;index.html</a>
JDiculous超过 5 年前
Any examples of websites with ZUIs? Looks interesting!
评论 #21145069 未加载
评论 #21146619 未加载
评论 #21150017 未加载
评论 #21144823 未加载
评论 #21147945 未加载
therealmarv超过 5 年前
Google Maps has a ZUI in Chrome ;) more or less.
评论 #21145077 未加载
meremortals超过 5 年前
<a href="https:&#x2F;&#x2F;brutalistwebsites.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;brutalistwebsites.com&#x2F;</a>
atannen超过 5 年前
<a href="https:&#x2F;&#x2F;www.yhchang.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.yhchang.com&#x2F;</a>
christophilus超过 5 年前
These days, it&#x27;s pretty novel to just use HTML and very basic CSS with no JavaScript.
评论 #21150755 未加载
intrasight超过 5 年前
When you say &quot;do&quot;, do mean &quot;implementation&quot; or &quot;design&quot;?
RocketSyntax超过 5 年前
Python UI: tkinter. Very popular on stackoverflow.
jawns超过 5 年前
A while back, just for kicks, I built a site whose UI is essentially a slideshow that takes the form of a draggable map. The content is sort of like a PowerPoint presentation, but user interaction is more like Google Maps.<p><a href="http:&#x2F;&#x2F;www.youmightbe.pressbin.com" rel="nofollow">http:&#x2F;&#x2F;www.youmightbe.pressbin.com</a><p>It&#x27;s not a particularly efficient way for users to traverse the content, but I think it&#x27;s fun.<p>The site gives an intro to Distributism, a &quot;third way&quot; economic model that is neither Capitalism nor Socialism nor a mishmash of the two.
guhcampos超过 5 年前
There&#x27;s this thing called Macromedia Flash...
AkshatM超过 5 年前
This is more of a joke answer, but r&#x2F;ProgrammerHumour recently underwent a spate of submissions competing to come up with the wackiest and &quot;wrong&quot; ways to do common UI elements, such as the slider or phone number inputs.<p>A small album of the best and worst of these submissions: <a href="https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;ProgrammerHumor&#x2F;comments&#x2F;6fdl8h&#x2F;an_album_of_volume_sliders&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;ProgrammerHumor&#x2F;comments&#x2F;6fdl8h&#x2F;an_...</a>
评论 #21145951 未加载
评论 #21160575 未加载
评论 #21148390 未加载
ransom1538超过 5 年前
Craigslist. Here is something novel: let html and browsers do their job. Let your browser process simple html at light speed. Let GET be idempotent. Let users be anonymous while getting information.
评论 #21146658 未加载
评论 #21147025 未加载
评论 #21146418 未加载
评论 #21148212 未加载
评论 #21146666 未加载
mister_hn超过 5 年前
I think the weirdest way is using React. I mean, it feels so unnatural for me, compared to the jQuery way.<p>You have to download thousands of packages, keep track of various dependencies and their security holes, adding an overhead for auditing them.<p>HTML5 with jQuery IMHO still beats everything in simplicity and getting work done fastly
评论 #21146137 未加载
评论 #21146038 未加载
评论 #21146873 未加载
评论 #21145829 未加载
评论 #21147105 未加载
评论 #21150021 未加载
评论 #21149404 未加载
评论 #21148568 未加载
评论 #21146582 未加载
评论 #21149797 未加载
评论 #21150152 未加载
mosselman超过 5 年前
I&#x27;ve heard that some people build UIs with thousands of dependencies, in JavaScript that hits the server for text that is then parsed to object that are then passed through all sorts of classes that each spit out HTML. They also do some weird stuff with events like key-ups in order to re-render input fields based on objects rather than letting the browser manage those kinds of things.<p>Sounds pretty weird to me.
评论 #21145837 未加载
评论 #21145096 未加载
评论 #21145548 未加载
评论 #21146970 未加载
评论 #21145097 未加载
评论 #21145207 未加载
评论 #21145343 未加载
评论 #21147276 未加载
hemmert超过 5 年前
<a href="https:&#x2F;&#x2F;motherfuckingwebsite.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;motherfuckingwebsite.com&#x2F;</a>
评论 #21145975 未加载
评论 #21150261 未加载
gameswithgo超过 5 年前
This one is pretty weird, F# front end and back: <a href="http:&#x2F;&#x2F;websharper.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;websharper.com&#x2F;</a>